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

Question

I have this HTML/CSS : 我有这个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>

I am using Chrome - mobile mode or I can resize the browser window, it is same. 我使用的是Chrome-移动模式，也可以调整浏览器窗口的大小，这是相同的。

When I make the width of the screen 767 pixels , the color of p tag is white (the style in media query not applied). 当我将屏幕宽度767 pixels ， p标签的颜色为white （媒体查询中的样式未应用）。 When I make the screen width - 766 pixels , the color is yellow (media query style applied), but in CSS I have - .. and (max-width: 767px) . 当我将屏幕宽度设置为766 pixels ，颜色为黄色（应用了媒体查询样式），但是在CSS我具有- .. and (max-width: 767px) 。 767 pixels width isn't included. 不包括767 pixels宽度。

If I set in my CSS - and (max-width: 768px) and make the screen width 768 pixels , the color of the p tag is yellow , which means 768 pixels width is included. 如果我在CSS设置- and (max-width: 768px) ，并使屏幕宽度为768 pixels ，则p标签的颜色为yellow ，这意味着包括768 pixels宽度。

Why is that ? 这是为什么？

The problem here is with Bootstrap, because the class col-sm-* is for (min-width: 768px) and the class .col-xs-* apply when the width of the screen is maximum 767px (767 included, but in the Bootstrap CSS file, they don't use media query for this class). 这里的问题是Bootstrap，因为类col-sm-*是用于(min-width: 768px) ，而类.col-xs-*适用于屏幕宽度最大为767px （包括767px ，但在屏幕中Bootstrap CSS文件，此类不使用媒体查询。

I want style to be added when the width is max 767 pixels (when col-xs-* is active), but if I set max-width:767px , my style will be added when the width of the screen is 766 pixels . 我希望在宽度最大为767像素时（当col-xs-*处于活动状态时）添加样式，但是如果我设置max-width:767px ，则在屏幕宽度为766 pixels时将添加样式。 If I set the style - max-width:768px , it will add the style when the width is 768 pixels . 如果设置style- max-width:768px ，则当宽度为768 pixels时，它将添加样式。

How can I add style for width <= 767 pixels ? 如何为宽度<= 767 pixels添加样式？

Answer 1

The solution for you is to add max width: 767.5px . 您的解决方案是添加max width: 767.5px 。 It will work. 它会工作。 But in general I would suggest avoiding using both min-width and max-width, ideally, you should write your styles mobile first, and after that modify with min-width media queries (min-width: 768px, min-width: 992px, etc...) 但总的来说，我建议您避免同时使用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