媒体查询。哪个是标准？

Question

假设我们想要建立一个有4种不同大小的网站。哪个是标准程序？开始设计一个大小并使用媒体查询修改其他3个css属性，或者不在主要大小的此属性中添加任何值，创建具有这些独占属性的4个媒体查询？ 谢谢！

Answer 1

当前的“最佳实践”是使移动（最轻的）版本成为没有媒体查询的标准CSS，并使用媒体查询逐步添加更加桌面友好的CSS。这称为mobile-first responsive design。

这里的想法是让低端移动处理器尽可能少地工作来摄取他们的CSS，并让大桌面担心复杂的规则层次结构和更大尺寸的重型图像。但是，这只是经验法则，即使你反过来也会有效。

Answer 2

几次读完这个问题之后，我想我已经明白了这个问题的要点。之一：

A）从一个“屏幕尺寸”样式开始，并修改其他3个版本（我通常称之为主要断点）。

或

B）将每个屏幕的每个样式保留在自己的媒体查询中，并且没有“默认”样式。

您应该使用选项A，无论您是从移动设备开始还是使用更大的屏幕，反之亦然。如果您在媒体查询中包含所有样式，则会丢失对旧版浏览器（不支持媒体查询）的兼容性。您还应该有基于媒体查询不会改变的常见样式。