移动端如何做适配?

·  阅读 194

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. 移动端上没有滚动条
复制代码

3.rem

1.rem是什么?
css有很多的长度单位:px(像素) ,em ,rem, vh, vw

1em相当于一个M的宽度,或者一个汉字的宽度,
1em气死差不多就等于自己的font-size值,比如 div{font-size:16px;height:2em} 那么这个高度就是2*16=32px,可以这样记下来

rem: root em :意思就是根元素的font-size,也就是html元素的font-size,
比如:html的font-size是16px 那么 1rem = 16px 

vh: viewport  height 即视口的高度  100vh == 视口高度
vw: viewport width 视口宽度  100vw == 视口宽度
详细可参考MDN

2. 12像素法则
12像素法则的意思是,在chrome浏览器中,是可以设置页面最小字号的,默认最小字号是12px,如果你再网页中写了font-size:6px,也不会生效,看到字体也会是12px的
注意:!!网页的默认font-size是16像素,面试题:请问如果我不给页面上元素加font-size那么他的font-size是多少,默认是16px
复制代码

4. 动态rem

为了使页面在所有设备上都能按比例还原,我们得出:
一切单位以宽度为基准,就能保证完美还原设计稿。
但是各个单位如 px rem 等都跟宽度是没有关系的。
所以IT工程狮们日思夜想,通过js使得rem与页面宽度产生了关系:
只要使html得font-size等于页面的宽度,rem又是依赖于html的font-size的,
那么1rem 就等于 页面的宽度了。
js代码:
var pageWidth = window.innerWidth;
document.write('<style>html{font-size:'+pageWidth+'}</style>')
那么这个时候就可以在写宽高的时候用rem的单位去写了
复制代码

5.对rem进行微调

第四中的代码,我们在写的过程中会发现,所有的数值都变成了小数,0.4rem,0.2rem等等,那么其实我们可以把font-size变成原来的1%,这样我们在写宽高的时候就可以不用写小数了,可以写成width:40rem等等

但是还会导致一个问题是,在chorme浏览器中有可能会错乱,因为在chrome中页面的font-size不能小于12px(上面提到的12像素原则)。那么下面这种写法,就会导致font-size会小于12px 有可能还会远小于,所以可以不用除以100,除以10就可以了

document.write('<style>html{font-size:'+pageWidth/100+'}</style>')
复制代码

1px是最小的单位了,已经不能再小了,所以比如说border为1像素的就直接写成border:1px solid blue;不用再去换算成rem了,font-size也直接写px

6.px 2 rem

如何将px自动换算成rem, (题外话:1.学会命令行 2. 学会英语 3. 学会看文档。掌握以上三个,就可以好好学会less sass webpack等技术) npm config set registry https://registry.npm.taobao.org/:将安装包的下载源切换成淘宝的,使用sass的px2rem