响应式媒体查询无法在Google Chrome中使用 [英] Responsive media query not working in Google Chrome
问题描述
我写了一段CSS代码，根据用户的屏幕宽度流畅地切换我的站点布局的宽度。如果用户的可用屏幕空间较少，则布局的宽度会增加以填充更多的窗口，并留出更少的空白，如果空间更多，则布局缩小以保持吸引人的外观。
#bg {
background：-webkit-线性梯度（90deg，＃0f0f0f 0％，＃222222 400px）;
background：-moz-linear-gradient（90deg，＃0f0f0f 0％，＃222222 400px）;
background：-o-linear-gradient（90deg，＃0f0f0f 0％，＃222222 400px）;
背景：线性渐变（90deg，＃0f0f0f 0％，＃222222 400px）;
margin-left：auto;
margin-right：auto;
margin-bottom：1.6rem;
border-width：0 0.1rem 0.1rem 0.1rem;
border-style：solid;
border-color：＃303030＃101010＃000;
border-radius：0.8rem;
min-width：94.2rem
}
@media（min-width：70rem）{
#bg {
border-radius：4px;
border-radius：0.4rem;
width：90％
}
}
@media（min-width：91rem）{
#bg {
宽度：80％
}
}
@media（min-width：112rem）{
#bg {
width： 70％
}
}
Firefox 30，然而Google Chrome 总是显示宽度为70％的元素。前面我还使用了 max-width 在查询中，在这种情况下，Chrome会做相反的事情;无论我调整浏览器窗口的大小，它始终显示90％的元素。
这些规则是使用SASS编译的。究竟是什么问题呢？如何修改查询在所有浏览器中工作？
受影响的网站可以找到 at this link 。
在<头>
< meta name =viewportcontent =width = device-width，初始规模= 1\" >
I have written a piece of CSS code to fluidly switch my site layout's width based on the user's screen width. If the user has less screen estate available, the layout's width increases to fill more of the window and leave less whitespace, and if they have more space, the layout shrinks to maintain an appealing look.
I use the following code to achieve this:
#bg{
background:-webkit-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-moz-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-o-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
margin-left:auto;
margin-right:auto;
margin-bottom:1.6rem;
border-width:0 0.1rem 0.1rem 0.1rem;
border-style:solid;
border-color:#303030 #101010 #000;
border-radius:0.8rem;
min-width:94.2rem
}
@media (min-width: 70rem){
#bg{
border-radius:4px;
border-radius:0.4rem;
width:90%
}
}
@media (min-width: 91rem){
#bg{
width:80%
}
}
@media (min-width: 112rem){
#bg{
width:70%
}
}
This works just fine in Firefox 30, however Google Chrome always displays the element at 70% width.
Previously, I had also used max-width in the queries, in which case Chrome would do the inverse thing; it would always display the element at 90%, no matter how much I resize the browser window.
The rules are compiled using SASS. What exactly is the problem here? How can I alter the query to work in all browsers?
The affected website can be found at this link.
add this line in <head>
<meta name="viewport" content="width=device-width,initial-scale=1">
这篇关于响应式媒体查询无法在Google Chrome中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
