gdf*_*dfg 1 html css css3 twitter-bootstrap twitter-bootstrap-3
我有这个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？
小智 5
您的解决方案是添加max width: 767.5px。会的。但总的来说，我建议避免同时使用min-width和max-width，理想情况下，您应该先编写移动样式，然后再使用min-width媒体查询进行修改（最小宽度：768px，最小宽度：992px等）。 ）