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

了解如何将媒体查询用于常见设备断点。

典型的设备断点

有大量不同高度和宽度的屏幕和设备，因此很难为每个设备创建一个准确的断点。为简单起见，您可以针对五个常见的群体:

实例

/* 超小型设备（手机，600px 及以下） */
@media only screen and (max-width: 600px) {...}

/* 小型设备（纵向平板电脑和大型手机，600 像素及以上）*/
@media only screen and (min-width: 600px) {...}

/* 中型设备（横向平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {...}

/* 大型设备（笔记本电脑/台式机，992 像素及 */
@media only screen and (min-width: 992px) {...}

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {...}

亲自试一试 »