设置断点响应设计

日期:2012-11-22 15:21:00

最近,我一直在写关于响应设计的博客 。 它已经涵盖了技术的,媒体方面的质疑 。 实现基本全面的设计教程 ,一些CSS技巧 ,来响应网站的列表。 今天,我想谈谈设置断点响应设计。 你应该如何设置断点? 一般的准则是什么呢? 我要和大家分享我的观点;成都网站建设

你有一个常用的通用断点的列表吗?
有些人喜欢设置断点基础设备的分辨率。 例子:320px【移动768px片剂,1024px或更高版本的桌面。 就个人而言,我不会把设备的分辨率设置断点放在一个大风扇的基础上,因为那里有太多的设备。 如果设备的分辨率的变化呢? 要防弹,的断点应根据设计和内容。

那么,什么是一般准则?
我的反应设计工作流程就是,我一般通过调整浏览器窗口的设计进行测试。 添加一个断点时的设计突破去关注内容流量大小。 那么,有没有具体规定设计应该有多少个断点呢? 经验法则是,以确保在任何视口的宽度的设计和内容流。 我会用我的网站作为例子:设计师网页墙和***网络画廊 。

设计师网页墙
设计师网页墙,我有5个媒体查询:1000px的,760px,600px的,480像素,和320px。 但在长期的重大布局的变化方面,我只有三个:3列固定端头,2列头球顶,侧边栏下降以下内容单列布局。

2列布局断点,设置在1000px的。 单立柱设置在760px。 其他的断点是必要的,以确保内容的所有断点很好流动。

***Web画廊
***网络画廊 ,我有3媒体查询:1240px,800px和480px。 在长期的重大布局的变化,我有两个:4列和单列布局。

在这种情况下,我不认为这是必要的,因为在小的视口后的容器不破坏,就会有更多的布局断点(即打破了4列到3列或2列),

上一篇文章:
下一篇文章: