Question

我有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)。 <{1}}宽度不包括在内。

如果我在767 pixels - CSS中设置屏幕宽度为and (max-width: 768px)，则768 pixels标记的颜色为p，这意味着{ {1}}包含宽度。

为什么？

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

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

如何为宽度766 pixels添加样式？

Answer 1

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

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

1 个答案: