媒体查询。哪个是标准?
Media queries. Which would be the standard?
假设我们要建立一个有 4 种不同尺寸的网站。哪个是标准程序?开始设计一个尺寸并使用媒体查询修改其他 3 css 属性,或者不在主要尺寸的这个属性中放置任何值并创建具有这些独有属性的 4 个媒体查询?
谢谢!
当前 "best practice" 是为了使移动(最轻量级)版本成为标准 CSS 而不使用媒体查询,并逐渐添加更重、更适合桌面的 CSS 使用媒体查询。这叫做mobile-first responsive design.
这里的想法是让低端移动处理器做尽可能少的工作来摄取它们的 CSS,让大型桌面担心复杂的规则层次结构和随之而来的沉重图像尺寸更大。但是,这只是经验法则,即使您以相反的方式进行操作,它也会起作用。
读了几遍问题后,我想我明白了问题的要点。或者:
A) 从一个 "screen size" 样式开始,然后为其他 3 个版本修改它(我通常称之为主要断点)。
或
B) 将每个屏幕的每个样式保留在它自己的媒体查询中,并且没有 "default" 样式。
您应该选择选项 A,无论您是从移动设备开始,然后转向更大的屏幕,反之亦然。如果您在媒体查询中包含所有样式,您将不必要地失去对旧浏览器(不支持媒体查询)的兼容性。您还应该拥有不会根据媒体查询而改变的通用样式。
假设我们要建立一个有 4 种不同尺寸的网站。哪个是标准程序?开始设计一个尺寸并使用媒体查询修改其他 3 css 属性,或者不在主要尺寸的这个属性中放置任何值并创建具有这些独有属性的 4 个媒体查询? 谢谢!
当前 "best practice" 是为了使移动(最轻量级)版本成为标准 CSS 而不使用媒体查询,并逐渐添加更重、更适合桌面的 CSS 使用媒体查询。这叫做mobile-first responsive design.
这里的想法是让低端移动处理器做尽可能少的工作来摄取它们的 CSS,让大型桌面担心复杂的规则层次结构和随之而来的沉重图像尺寸更大。但是,这只是经验法则,即使您以相反的方式进行操作,它也会起作用。
读了几遍问题后,我想我明白了问题的要点。或者:
A) 从一个 "screen size" 样式开始,然后为其他 3 个版本修改它(我通常称之为主要断点)。
或
B) 将每个屏幕的每个样式保留在它自己的媒体查询中,并且没有 "default" 样式。
您应该选择选项 A,无论您是从移动设备开始,然后转向更大的屏幕,反之亦然。如果您在媒体查询中包含所有样式,您将不必要地失去对旧浏览器(不支持媒体查询)的兼容性。您还应该拥有不会根据媒体查询而改变的通用样式。