移动端适配

1. meta viewport

首先手机端要加meta
<meta name="viewport" content=" width=device-width, user-scalable=no,
initial-scale = 1.0 , maximum-scale = 1.0, minimum-scale=1.0"
 
历史发展中，最开始我们的页面都只是给pc用的，因为没有智能手机
，后来有了诺基亚，但诺基亚也不是智能手机，诺基亚访问的网站是专门做的，编写语言是wap,
wap语法跟html很像，但不是html的。所以如果要想你的网站给用户用，
你需要做一套html版本的和wap版本的，这样诺基亚用户和pc用户就可以使用你的网站了。
诺基亚之后就出现了苹果第三代，在中国很火。但是有个问题是，苹果第三代只有 320像素宽。但是中国的网站都是900多像素的。
那么320像素的苹果怎么去显示900多像素宽的网站内容呢？
苹果就想了一个办法：把所有的网站都缩小，缩小到320像素的屏幕中去，
如果用户想看的话，就用两个手指去放大。然后来回拖动，这样你就可以看到完整的内容了。
这就是为什么页面要缩放了，因为一开始网站都是900多像素宽，而设备宽度300多像素，如果不能缩放的话，就没办法看到完整内容了。
缩放的比例怎么定呢？那就是用页面去模拟980像素的宽度。
也就是说，你在320像素上看到的内容与980像素的pc上看到的是一样的。
当你在谷歌浏览器中打开模拟器，选择iphone6,然后打印出 document.documentElement.clientWidth 的值，会发现他是 980.
iphone6的手机分辨率是375px，那为什么上面的值打印出来的是980呢？
这就是上面提到的，用375像素去模拟980像素。
 
那发展到现如今，我们会针对手机用户再做一个站点，与pc端分开的一套代码。
比如淘宝的我们用手机去访问的时候就是 https://www.taobao.com/,用手机浏览器去访问的时候：https://h5.m.taobao.com/
这个时候我们有两套了，就不需要他缩放了。
所以这个时候，只要做一件事情那就是告诉浏览器不用给我缩放了。因此我们在做手机端适配的时候，就要用到上面那行代码：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
 
width=device-width:意思就是不要用980了，设备多宽就多宽，
user-scalable=no: 用户是否可以缩放？不能，我已经适配好了，你不用缩放了
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0：初始的缩放倍数，最大缩放倍数，最小缩放倍数都是1.0
 
 

2.使用媒体查询

@media (max-width: 500) {
    .color{color: red;}
    在屏幕宽度小于500像素时才会生效
}
@media (min-width: 300 and max-width: 500) {
    屏幕宽度在 300到 500之间的就生效
}
 
复制代码

有了以上两个就可以做响应式布局了。

移动端与手机端不同： 
1. 移动端没有hover
2. 移动端有touch事件
3. 移动端没有resize：不能放大缩小
4. 移动端上没有滚动条