如何只为移动设备应用样式？

Question

我正在创建新网站。我的目的是为桌面和移动设备创建一个页面，并根据设备（移动设备或桌面设备）设置样式。我知道我可以用纯 JavaScript 实现一切，但我也想使用 CSS 和媒体查询。我的问题是：如何使用 CSS 媒体查询仅为移动设备设置样式？我试图使用：

@media only screen{
     style...
}

但它适用于移动和桌面浏览器。

Answer 1

您不能简单地瞄准移动设备，而是必须给出断点才能使其工作。您必须使用min-width或max-width才能正常工作

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

示例：这将隐藏具有侧边栏类别的 div，并将容器宽度在较小的屏幕上设置为 100%

 @media only screen and (max-width : 321px) {
        .sidebar {
                display:none;
         }

         .container{
             width:100%;
           }

    }