How TO - 典型设备断点
了解如何为常见的设备断点使用媒体查询。
典型设备断点
存在大量具有不同高度和宽度的屏幕和设备，因此很难为每个设备创建一个确切的断点。为了简单起见，您可以针对五个常见的分组。
示例
/* 超小设备（手机，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 规则
RWD 教程： 使用媒体查询的响应式网页设计
JavaScript 教程： window.matchMedia() 方法
