最大寬度設置為767px時的媒體查詢

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) 。 不包括767 pixels寬度。

如果我在CSS設置- and (max-width: 768px) ，並使屏幕寬度為768 pixels ，則p標簽的顏色為yellow ，這意味着包括768 pixels寬度。

這是為什么？

這里的問題是Bootstrap，因為類col-sm-*是用於(min-width: 768px) ，而類.col-xs-*適用於屏幕寬度最大為767px （包括767px ，但在屏幕中Bootstrap CSS文件，此類不使用媒體查詢。

我希望在寬度最大為767像素時（當col-xs-*處於活動狀態時）添加樣式，但是如果我設置max-width:767px ，則在屏幕寬度為766 pixels時將添加樣式。 如果設置style- max-width:768px ，則當寬度為768 pixels時，它將添加樣式。

如何為寬度<= 767 pixels添加樣式？

Answer 1

您的解決方案是添加max width: 767.5px 。 它會工作。 但總的來說，我建議您避免同時使用min-width和max-width，理想情況下，您應該先編寫移動樣式，然后再使用min-width媒體查詢（min-width：768px，min-width：992px，等等...）

最大寬度設置為767px時的媒體查詢

問題描述

1 個解決方案

解決方案1
4 已采納 2017-09-01 10:23:46

最大寬度設置為767px時的媒體查詢

問題描述

1 個解決方案

解決方案1 4 已采納 2017-09-01 10:23:46

解決方案1
4 已采納 2017-09-01 10:23:46