相关疑难解决方法(0)

我写了一段CSS代码,根据用户的屏幕宽度流畅地切换我的网站布局的宽度.如果用户可用的屏幕空间较少,则布局的宽度会增加以填充更多的窗口并留下更少的空白,如果它们有更多空间,则布局会缩小以保持吸引人的外观.

我使用以下代码来实现此目的:

#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%
    }

}

这在Firefox 30中运行得很好,但Google Chrome 总是以70%的宽度显示元素.

以前,我在查询中也使用了max-width,在这种情况下Chrome会做相反的事情; 无论我调整浏览器窗口的大小,它总是会以90%显示元素.

规则使用SASS编译.究竟是什么问题？如何更改查询以在所有浏览器中工作？

可以在此链接中找到受影响的网站.

我正在为我的网站应用css媒体查询,以便在移动设备和笔记本电脑上工作.我使用以下媒体查询移动

@media only screen and (min-device-width : 321px) and (max-device-width:480px)

以下是笔记本电脑

@media only screen and (min-device-width: 1100px)

问题是我应用我的第一个移动查询,第二个用于笔记本电脑,移动用户界面是正确的但笔记本电脑用户界面显示不同的结果.当我从我的列表中删除移动css,并只保留第二个查询css.laptop UI是正确的.

请指导我做错的地方......

@media(width: 568px)
{
//style//
}


@media (max-width: 599px) and (min-width: 480px) 
{
//style//
}

宽度568px的媒体查询不适用于Chrome，但采用的是媒体最大宽度：599px和最小宽度：480px的样式。在fire-fox中，它可以正常工作。当我阅读与我相关的问题时，我尝试并检查了括号和其他内容。我是媒体查询的新手，所以想了解主要使用的断点和我的Chrome问题。