最大宽度设置为767px时的媒体查询-Java 学习之路

我有这个 HTML/CSS ：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            p{
                color: white;
                background: black;
            }

            @media only screen and (max-width: 768px) {
                p {
                    color: yellow;
                }
            }
        </style>
    </head>
    <body>
        <p>SOME TEXT</p>
    </body>
</html>

我使用Chrome - 移动模式或者我可以调整浏览器窗口的大小，它是一样的 .

当我设置屏幕的宽度 767 pixels 时， p 标签的颜色为 white （未应用媒体查询中的样式） . 当我制作屏幕宽度 - 766 pixels 时，颜色为黄色（应用了媒体查询样式），但在 CSS 中我有 - .. and (max-width: 767px) . 767 pixels 宽度不包括在内 .

如果我在 CSS - and (max-width: 768px) 中设置并使屏幕宽度为 768 pixels ，则 p 标签的颜色为 yellow ，这意味着包含了 768 pixels 宽度 .

这是为什么？

这里的问题是使用Bootstrap，因为类 col-sm-* 适用于 (min-width: 768px) 而类 .col-xs-* 适用于屏幕宽度最大 767px （包括767，但在Bootstrap CSS文件中，它们不使用此类的媒体查询） .

我希望在宽度为最大767像素时（当 col-xs-* 处于活动状态时）添加样式，但如果我设置 max-width:767px ，则当屏幕宽度为 766 pixels 时，我的样式将被添加 . 如果我设置样式 - max-width:768px ，它将在宽度为 768 pixels 时添加样式 .

如何为宽度 <= 767 pixels 添加样式？

1 回答

4

您的解决方案是添加 max width: 767.5px . 它会工作 . 但总的来说，我建议避免同时使用最小宽度和最大宽度，理想情况下，你应该首先编写移动样式，然后用 min-width 媒体查询修改（最小宽度：768px，最小宽度：992px等 . ..）

回复于 2024-04-24T08:03:25+08:00

最大宽度设置为767px时的媒体查询

1 回答

相关问题