移动端适配方案

移动端适配技术构成：

rem
vw ，vh
calc（）
media queries 媒体查询
百分比布局
flex，grid
flexible image 弹性图片

1.设置 Meta 标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2.前端单位

px
em：一个m的宽度，就是这样，绝不是一个汉字的宽度
pt，ex : 根本没人用
vw：视口（viewport）宽度
vh：视口（viewport）高度
rem：root em 根元素即html的font-size，如果 html的font-size：16px；那么 1rem = 16px

rem 与 em 的区别：rem 参考根元素的font-size，em参考自己的font-size，也可能是继承得来的

3.vw与vh 轻轻松松写页面

将视口分为100份，50vw表示占50份，vh同理

4.calc

calc（）函数可以动态计算长度。

示例：动态计算宽度

.box{
   width:calc(100% - 100px);
   margin: 20px auto;
}

5.rem模拟 vw

一切以宽度为基准，就能完美还原设计稿，目前所有的单位除了 vw 都和宽度无关，可是其兼容性还不够。 2018.11.5测

必要时用rem来模拟

纯js：

let VW = window.innerWidth;
document.documentElement.style.fontSize = VW/10 + 'px';

js里面除以10，所以页面分为10等分，5rem表示占一半

使用scss将px自动转化为rem，就不用一个一个算rem了~

6.通过媒介查询来设置样式

直接指定：

@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}

设置多种试图宽度

@media only screen and (min-width: 50em){大于800的屏幕} 0-800
@media only screen and (min-width: 30em) and (max-width: 50em){481-800的中屏幕} 480-800
@media only screen and (max-width: 30em){小于480的小屏幕} 0-480

使用link 标签的 media 可以指定宽度的css文件

<link rel="stylesheet" href="./mobile.css" media="screen and (max-width:320px)">

断点选择原则

0-480 小屏幕

481-800 中屏幕

801-1400 大屏幕

1400+ 巨屏幕

7.宽度需要使用百分比

虽然高度一般都是撑开的，而不是直接指定，但难免有特殊情况，其他需求，要百分比布局怎么办？？所以复杂情况慎用。

#head { width: 100% }
#content { width: 50%; }

8.flex布局 森仪：flex布局深入浅出

9.处理图片缩放的方法

html或css控制

1. 设置图片src data-src (优先)

img { width: auto; max-width: 100%; }
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

js控制:

var W = $(window).width();
if(W > 800){
$("img").attr("src",$("img").data("src-800px"))
}else if(W > 600){
$("img").attr("src",$("img").data("src-600px"))
}

2.最牛的是picture标签，兼容性害怕

<picture>
<source media="(min-width:320px) and (max-width:480px)" srcset="ad001.png">
<source media="(min-width:481px) and (max-width:800px)" srcset="ad001-m.png">
<img src="ad001-l.png" alt="">
</picture>

其他：

1. 浏览器默认字体大小16px；谷歌最小字号默认12px，所以即使写了font-size:6px; 显示也是12px，可以改变设置；（点击内容设置）

2. 手机端的交互方式不一样

• 没有 hover
• 有 touch 事件，已经封装好的： jquery.swipe vue.swipe
• 没有 resize
• 没有滚动条

Appendix：
https://developer.mozilla.org/z