如何创建：典型设备的断点

学习如何对常见设备断点使用媒体查询。

典型设备断点

存在大量的具有不同高度和宽度的屏幕和设备，因此为每个设备创建准确的断点是困难的。

为了简化操作，您可以定位五个常见的组别：

实例

/* 超小设备（手机，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 @media 规则

教程：通过媒体查询实现响应式 Web 设计

参考手册：JavaScript window.matchMedia() 方法