响应式设计媒体查询尺寸分界点一览表

最新推荐文章于 2024-12-05 18:00:00 发布

转载最新推荐文章于 2024-12-05 18:00:00 发布 · 2.8k 阅读

收录于

本文介绍响应式设计中的媒体查询技术，并提供了一系列关键尺寸分界点，用于指导不同设备上的网页布局调整，确保良好的用户体验。

CSS3中的媒体查询（media query）是响应式设计的关键技术。

媒体查询技术本质就是检测设备不同的尺寸来应用不同的样式，所以我们需要对尺寸检测有一个统一的参考标准。

从最佳用户体验来看，材料化设计用户界面应该适应如下布局尺寸：480、600、840、960、1280、1440和1600dp（设备独立像素）：

注：上述表格中，*号表示当设备最小宽度小于600时取值16dp。**表示在桌面系统中分界点要比所列值小16dp以适应Chrome浏览器的变化。