使用CSS的网站响应式设计

Question

我正在为一些必须响应的网站写css。我是css的新手，并不了解很多响应技巧。我将我的css代码分为三个部分。

1. 桌面：所有通用样式
2. 平板电脑：@media（最小宽度：768px）和（最大宽度：991px）{my styles}
3. 手机：@media（最小宽度：320px）和（最大宽度：480px）{my styles}

它是否完全响应并支持 所有 标准设备或者我是否需要进行更多更改？这里 ALL 表示所有设备。

Answer 1

如果你觉得反应简单，我觉得你儿子不好。我们有99个视口，但iPhone只有一个。

以下是Media Queries for Standard Devices

的列表

Answer 2

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

Answer 3

您必须不要在481和766之间以及0到319 px之间留出空格。 这不是真正的回应。

@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之间应该有一些设备。