使用 css 的网站的响应式设计答案

【问题标题】：responsive design for websites using css使用 css 的网站的响应式设计
【发布时间】：2015-09-10 04:57:33
【问题描述】：

我正在为一些必须响应的网站编写 CSS。我是 CSS 新手，不太了解响应式技术。我将我的 css 代码分为三个部分。

桌面：所有通用样式
平板电脑：@media (min-width:768px) 和 (max-width:991px) {我的样式}
手机：@media (min-width:320px) and (max-width:480px) {我的样式}

它会完全响应并支持所有标准设备，还是我需要再做一些更改？这里的 ALL 字面意思是所有设备。

【问题讨论】：

b/w 481px 和 766px 的宽度呢？

标签： css

【解决方案1】：

如果你认为响应式很简单，我为你感到难过，儿子。我们有 99 个视口，但 iPhone 只有一个。

这里是Media Queries for Standard Devices的列表

【讨论】：

是的，我知道，这就是我在这里的原因。这是否意味着我要为 ipad 编写相同的代码 9 次，为 Galaxy 平板电脑编写 3 次，为 nexus 平板电脑编写 3 次，我不知道为不同的手机编写了多少次？请解释一下。
@AdityaKumar 您不必全部使用它们，这只是一种更具体地针对不同设备的方法。从一般媒体查询开始，然后逐步向上。

【解决方案2】：

您不得在 481 到 766 以及 0 到 319 像素之间留出空格。这不是真正的响应。

@media screen and (max-device-width:480px){ // styles for mobile}
@media screen and (max-device-width:780px){ // styles for tablets}
@media screen and (min-device-width:781px){ // styles for desktop}

编辑有低于 319 像素的可穿戴设备。示例：

/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}

481和766之间应该有一些设备。

【讨论】：

是否有任何标准设备的宽度从 0 到 319 和 481 到 766。

【解决方案3】：

几乎每个人都搞错的是，响应式设计应该基于一些预定义的断点来完成。它应该定义您的内容，而不是访问者的屏幕。如果有 10 个断点，则站点结构肯定有问题。更少的媒体查询 = 更好。从那里开始，为任何屏幕的内容总结出完美的结构。

【讨论】：

我认为这是我得到的最好的参考。 link也可以帮助别人