Question

tldr;我无法让mobile.css在我的网站上正常工作。

我的网站是http://sweepsmeoffmyfeet.com

我的mobile.css文件

/* CSS Document */

@media all and (min-width:401px) and (max-width:970px) {    
    body {  font-size:1em;}
    .headwrapper { width:100%;}
    .headwrapper .sitelogo{width: 100%;}
    .wrapper { width:100%;}
    .wrapper .container2{width:100%;display:block; }
    input:not([type]), input[type="url"]{width: 400px; height: 20px;}
    .crossborder .content{ width:100%; margin: 0 auto;}
    .boxHousing{width:48%;display:inline-block;}
    .siteHosted{max-width: 400px;}
    .card{width:400px;margin:10px auto;text-align:center;}
    .rules{max-width:400px;padding:5px; margin: 5px auto}
    .sideBar{width: 100%;display:block;}
}

@media all and (max-width:400px) {
    body {  font-size:1em;}
    .headwrapper { width:100%;}
    .headwrapper .sitelogo{width: 100%;}
    .crossborder .content{ width:100%; margin: 0 auto;}
    .wrapper { width:100%;}
    .wrapper .container2{width:100%;display:block; }
    input:not([type]), input[type="url"]{width: 300px;}
    .boxHousing{width:100%;display:block;}
    .container .content{display:block; margin-right: 0;width: 100%;}
    .siteHosted{ max-width: 300px;}
    .rules{max-width:300px;padding:5px; margin: 5px auto}
    .sideBar{width: 100%; display:block;}
}

我正在尝试为移动视图更改一些内容。

我有一个大容器，在普通屏幕上，将显示为972 [x宽，但我希望它在较小的屏幕上达到100％。

我设置了css并上传了它，但它似乎没有被检测到。我甚至改变了背景颜色，看看它们是否被拾起，但我没有运气。

我对此非常不熟悉，所以我不确定我到底做错了什么。有人可以看一看，看看我做错了什么。我会告诉你，我一直在通过谷歌搜索阅读它，看起来我正在做他们正在说的话，除非我只是错过了一块拼图。

提前致谢。

Answer 1

在标记中有一个比mobile.css更晚调用的文件style.css。如果在style.css中声明了一个值，这将覆盖mobile.css中元素的规则。

所以，例如在style.css元素中，类.headwrapper的宽度为95％。虽然在mobile.css中你给它宽度为100％，但它会被style.css覆盖。

移动<head>中style.css下的mobile.css样式表调用将解决此问题。

我没有找到我的css @media查询的问题

1 个答案: