针对媒体查询的断点

来源：郑州天琥设计培训学校时间：2019/3/29 13:01:11

我们知道，我们通过媒体查询(Media Query)的方式改变网页的布局，我们在哪些宽度下改变布局，也就是我们所称作的断点，我们更习惯的思维是针对某些设备(比如桌面、平板电脑、手机)的 数据来设置断点，比如 1024 对应桌面、768对应pad、480 对应手机，但实际上，这些东西是靠不住的，因为这些屏幕尺寸会根据时代的发展不断的变化，我们的响应不应该只针对某些设备，我们需要的是一个区间值，而不 是将某一分辨率对应一种设备。断点肯定是需要有的，那这些断点是如何设置的呢?怎么才能不是为了断点而断点呢?实际上，这些断点的设置都是根据内容的需要 做的，当我们的内容在达到一个临界点后，视觉效果不符合人们的审美或影响了内容获取时，这就是我们需要的断点。但是我们可能无法在视觉设计的阶段就能覆盖 其尺寸区间内容所有状况，这样我们就需要把它和现有的设备相结合确立断点。

因此，个人认为不同的项目，在响应式设计中需要的断点是不一样的。我们知道在媒体查询中有 width 和 device-width 两个特性，因为在手持设备中多数用到的是 webkit 内核的浏览器，我们一般会通过 viewport 的属性，将设备宽度赋予视窗的宽度

这样我们就能根据设备的宽度来对某些设备做媒体查询了。

@media screen and (max-device-width:480px){ selector{ } }