七个高度有效的媒体查询技巧

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

本文由大漠根据的《7 Habits of Highly Effective Media Queries》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries,以及作者相关信息

——作者:

——译者:大漠

我们都知道,Media Queries是实现响应式设计的秘密武器。在这篇文章中,将向大家介绍制定高质量的Media Queries需要注意的一些事项。

让内容确定断点

很多时候,在响应式设计中,你经常看到的断点值是:320px480px768px1024px等。

不要使用流行的设备尺寸(320px是iPhone设备的竖屏尺寸,480是iPhone设备横向屏幕尺寸,768px是iPad竖向屏幕尺寸,等等)来确定断点。该设备的屏幕(Device Landscape)是不断在变化的,所以使用流行设备的尺寸作为断点,他的实际价值存在的意义可能没有什么,甚至一年的时间都坚持不到。Web本质是流动的,因此我们的工作是在任何屏幕上创建外观、功能等,而不是简简单单的几个断点。

我创建ish的原因就是鼓励设计师考虑整个分辨率,而不只是今天流行的几个设备尺寸。请尝试使用“Disco Mode”给你的设计做一个压力测试。

所以你应该在哪里插入断点,应该遵循Stephen Hay的建议:

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!-Stephe Hay.

它是这么简单。

扩展阅读

对布局作为一种增加

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/7-habits-of-highly-effective-media-queries.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部