Html CSS：@media 查询的最大宽度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30706407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: max-width for @media query not working
提问by Divya Barsode
(It works on other browsers but not chrome)
（它适用于其他浏览器，但不适用于 chrome）
I want to apply a style only when the browser size is less than 1400px
我只想在浏览器尺寸小于 1400px 时应用样式
with max-widthnot working
与max-width不工作
@media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-widthits working
与min-width它的工作
@media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
但是当浏览器宽度超过 1400 像素时也会改变（我知道它是如何工作的，但最大宽度不起作用）
Fiddle for this
为此摆弄
回答by Stewartside
Have you tried adding the viewport in?
您是否尝试过添加视口？
<meta name="viewport" content="width=device-width, initial-scale=1">
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Viewport 在呈现响应式页面时使用，因此主要用于处理移动网站，但在处理媒体查询时，它有助于告诉 CSS 实际设备宽度是什么。
回答by T.Todua
Is your browserZOOM-ed at different than 100%level ? If so, reset (zoom-in and out) to 100%.
您的浏览器ZOOM-ed 与100%level不同吗？如果是这样，将（放大和缩小）重置为100%。
回答by Prime
Try this method.
试试这个方法。
This will target based on device
这将基于设备定位
@media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
To target based on browser window area
基于浏览器窗口区域定位
@media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
回答by Pasquale Muscettola
This worked for me
这对我有用
@media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
回答by user2977311
You need to place the @media queries after you declare your standard
您需要在声明标准后放置 @media 查询
回答by Md. A. Barik
@media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If its not work try in browser inspect element navigate network and toggle disabled cache. Sometimes it not work for browser cache.
如果它不起作用，请尝试在浏览器中检查元素导航网络并切换禁用的缓存。有时它不适用于浏览器缓存。
Happy coding
快乐编码
