如何 - 典型设备断点
学习如何使用媒体查询来针对常见的设备断点。
典型的设备断点
有各种各样的屏幕和设备，它们的高度和宽度都不一样，因此很难为每个设备创建精确的断点。为了简化，你可以针对五个常见的组。
示例
/* 极小设备（手机，600px 及以下） */
@media only screen and (max-width: 600px) {...}
/* 小型设备（平板电脑纵向模式和大型手机，600px 及以上） */
@media only screen and (min-width: 600px) {...}
/* 中型设备（平板电脑横向模式，768px 及以上） */
@media only screen and (min-width: 768px) {...}
/* 大型设备（笔记本电脑/台式电脑，992px 及以上） */
@media only screen and (min-width: 992px) {...}
/* 特大型设备（大型笔记本电脑和台式电脑，1200px 及以上） */
@media only screen and (min-width: 1200px) {...}
亲自尝试 »
相关页面
CSS 教程：CSS 媒体查询
CSS 教程：CSS 媒体查询示例
CSS 参考：@media 规则
响应式网页设计教程：使用媒体查询进行响应式网页设计
JavaScript 教程：window.matchMedia() 方法
