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">

移动优化布局是否正确？

1 个答案: