javascript - 手机优化布局是否正确？

Question

我正在尝试使用 CSS 和 HTLM5 创建针对移动设备优化的布局。

我已经在我的样式底部添加了这段代码

 @media only screen and (max-width: 480px) {
    body {
        padding: 5px;
        background-color:#FFF;
        background-image:url(images/smoothieworld_logo_mobile.jpg;
        background-repeat:no-repeat;
    }
    #wrap {
    with:auto;
    margin-top:80px;
   }
   #masthead, sidebar {
    display:none;
   }
   #mainnav {
    height: auto;
   }
   #mainnav li {
    float:none;
    width: auto;
    text-align:left;
    border-top: 1px grey solid;
    border-bottom: 1px grey solid;
   }
   #maincontent {
    float: none;
    width:auto;
    background-color:white;
   }
   #footer, #footer p {
    clear:none;
    width:auto;
    height:auto;
    background-image:none;
    padding-top:20px;
    margin-top:0px;
   }
   }

当我在我的浏览器 Safari 和 Firefox 中预览都是最新的时，这不起作用。

然后我在链接下面添加了一个脚本到我的样式

<link  rel="stylesheet" media="screen" href="reset.css" type="text/css"  />
   <link  rel="stylesheet" media="screen"  href="base.css" type="text/css"  />
   <script scr="modernizer-2.6.2.js" type="text/javascript"></script>

当我减小浏览器的宽度时，它无法正确预览。

我做错了什么？有人可以帮忙吗？

Answer 1

将此添加到您的脑海中。

<meta name="viewport" content="width=device-width, initial-scale=1.0">