最近，我写了很多关于响应的设计。我已经覆盖了媒体查询，技术方面基本实现，完整的设计教程，一些CSS技巧，和一系列可怕的反应位点。今天，我想谈一谈在响应设计中设置断点。你应该如何设置断点？一般准则是什么？我将分享我的观点在设置断点。
你有一个常用的断点列表吗？
有些人喜欢在设备分辨率的基础上设置断点。例如：320px移动，768px平板，桌面电脑或更高。就我个人而言，我不是一个大风扇设置断点的基础上，因为有太多设备的设备分辨率。如果设备分辨率改变了呢？要更防弹，断点应根据设计和内容。
那么什么是一般准则？
在我的响应设计工作流，我一般测试设计的浏览器窗口大小。看内容如何流动时，调整大小和添加一个断点时，设计突破。有没有具体的规则，有多少断点的设计应该有。经验法则是确保内容流程的设计很好地在任何视口的宽度。我将用我的网站作为例子：网页设计师墙和最好的网络画廊。
网页设计师墙
对网页设计师的墙，我有5个媒体查询：google，760px，600px，480px 320px，和。但在重大布局的变化来看，我只有三个：固定侧头三柱，用头球顶柱，和一个单栏布局在边栏低于含量。
网页设计师墙断点
2列布局断点设置在google。单柱设置在760px。其他断点是必要的，以确保在所有断点的内容流很好。
最佳网络画廊
最好的网上画廊，我有3个媒体查询：1240px，800px，和480px。在主要布局变化的词，我有两个：四柱式和单栏布局。
最佳网络画廊断点
在这种情况下，我认为没有必要有更多的布局断点（即打破四柱为三柱或柱）由于后容器不打破小视口。
最近，我写了很多关于响应的设计。我已经覆盖了媒体查询，技术方面基本实现，完整的设计教程，一些CSS技巧，和一系列可怕的反应位点。今天，我想谈一谈在响应设计中设置断点。你应该如何设置断点？一般准则是什么？我将分享我的观点在设置断点。
你有一个常用的断点列表吗？
有些人喜欢在设备分辨率的基础上设置断点。例如：320px移动，768px平板，桌面电脑或更高。就我个人而言，我不是一个大风扇设置断点的基础上，因为有太多设备的设备分辨率。如果设备分辨率改变了呢？要更防弹，断点应根据设计和内容。
那么什么是一般准则？
在我的响应设计工作流，我一般测试设计的浏览器窗口大小。看内容如何流动时，调整大小和添加一个断点时，设计突破。有没有具体的规则，有多少断点的设计应该有。经验法则是确保内容流程的设计很好地在任何视口的宽度。我将用我的网站作为例子：网页设计师墙和最好的网络画廊。
网页设计师墙
对网页设计师的墙，我有5个媒体查询：google，760px，600px，480px 320px，和。但在重大布局的变化来看，我只有三个：固定侧头三柱，用头球顶柱，和一个单栏布局在边栏低于含量。
网页设计师墙断点
2列布局断点设置在google。单柱设置在760px。其他断点是必要的，以确保在所有断点的内容流很好。
最佳网络画廊
最好的网上画廊，我有3个媒体查询：1240px，800px，和480px。在主要布局变化的词，我有两个：四柱式和单栏布局。
最佳网络画廊断点
在这种情况下，我认为没有必要有更多的布局断点（即打破四柱为三柱或柱）由于后容器不打破小视口。
最新推荐