我写了一段CSS代码,根据用户的屏幕宽度流畅地切换我的网站布局的宽度.如果用户可用的屏幕空间较少,则布局的宽度会增加以填充更多的窗口并留下更少的空白,如果它们有更多空间,则布局会缩小以保持吸引人的外观.
我使用以下代码来实现此目的：
#bg{
background:-webkit-linear-gradient(90deg,#0f0f0f 0%,#222222 400px);
background:-moz-linear-gradient(90deg,#222222 400px);
background:-o-linear-gradient(90deg,#222222 400px);
background:linear-gradient(90deg,#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%
}
}
这在Firefox 30中运行得很好,但Google Chrome总是以70％的宽度显示元素.
以前,我在查询中也使用了max-width,在这种情况下Chrome会做相反的事情;无论我调整浏览器窗口的大小,它总是会以90％显示元素.
规则使用SASS编译.究竟是什么问题？如何更改查询以在所有浏览器中工作？
受影响的网站可以找到at this link.
