5、手机端页面的做法

media query（就和if差不多感觉）

@media(max-width:800px){
      body{background:red
      }
}//如果浏览器满足800那个条件，就变红色背景

如果不同范围对应不同颜色，应该怎么办呢？

@media(max-width:700px){
      body{background:red
      }
}
@media(max-width:800px){
      body{background:blue
      }
}
//实际得不到我们要的效果，因为后来居上，不管怎样都是blue

改一下顺序就美滋滋了

@media(max-width:800px){
      body{background:red
      }
}
@media(max-width:700px){
      body{background:blue
      }
}

或者我们更加明确一下范围好了

    <style>
        @media(min-width:700px){
           body{background:black;
           }
        }
        @media(max-width:500px){
           body{background:blue;
           }
        }
        @media(min-width:500px) and (max-width:700px){
           body{background:red;
           }
        }//注意and二边有空格哦
    </style>

<link rel="stylesheet" href="style.css" media="(max-width:320px)">

只有满足这个条件才link生效哦，虽然都会下载。不同屏幕的不同都是通过这个media query得到的

有些是直接跳转到手机对应的链接，有些是有二套css

手机端要加一个 meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

手机端的交互方式不一样
没有 hover
有 touch 事件
没有 resize
没有滚动条