响应式网页无法正常工作

Question

我是响应式网页设计的初学者。我创建了一个页面但是当我尝试检查不同的设备时它无法正常工作。这是我的代码和屏幕截图。

<meta name="viewport" content="width=device=width, initial-scale=1" charset="utf-8">

@charset“utf-8”;

section, article, header, footer, nav, aside, hgroup {
display: block;
}



 /*-----------------------
    Global Styles
 -------------------------*/
 .clearfix:before,
 .clearfix:afetr{
    content:"";
    display:table;   
 }
 .clearfix:after{
    clear:both;
 }
 /*.clearfix{
 zoom:1;/*for IE6/7 trigger hasLayout
 } */



   /*-----------------------
    Navigation
 -------------------------*/

 nav ul{
     margin:0;
     padding:0;
     float:right;
 }
 nav ul li{
    list-style:none;
    float:left;

 }
 header nav ul li a{
     display:block;
     color:#FFF;
     text-decoration:none;
     font-weight:bold;
     padding:20px;
 }
header nav ul li a:hover{background-color:#003; }
     /*background:#67A6B8;*/

header nav ul li a:active{
     color: yellow;
    background-color: #003;
    text-decoration: underline;
    -webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0)insert;
    -moz-box-shadow:0 0 5px rgba(0, 0, 0, 0)insert; 
    box-shadow:0 0 5px rgba(0, 0, 0, 0)insert;
  }
  header nav ul li a:visited{`enter code here`
      background-color:#9F3;
  }

我已经试了两个星期了。请有人帮帮我..

Answer 1

首先将charset="utf-8"移动到自己的元标记，如下所示：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

同时检查拼写错误：您写了device=width实际应该是device-width的内容。