移动端适配技术构成：
remvw ，vhcalc（）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.前端单位
pxem：一个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 都和宽度无关，可是其兼容性还不够。 .11.5测
必要时用rem来模拟
纯js：
letVW=window.innerWidth;document.documentElement.style.fontSize=VW/10+'px';
js里面除以10，所以页面分为10等分，5rem表示占一半
使用scss将px自动转化为rem，就不用一个一个算rem了~
6.通过媒介查询来设置样式
直接指定：
@mediascreenand(max-width:980px){#head{…}#content{…}#footer{…}}
设置多种试图宽度
@mediaonlyscreenand(min-width:50em){大于800的屏幕}0-800@mediaonlyscreenand(min-width:30em)and(max-width:50em){481-800的中屏幕}480-800@mediaonlyscreenand(max-width:30em){小于480的小屏幕}0-480
使用link 标签的 media 可以指定宽度的css文件
<linkrel="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 src (优先)
img { width: auto; max-width: 100%; }<imgsrc="image.jpg"src-600px="image-600px.jpg"src-800px="image-800px.jpg"alt="">
js控制:
varW=$(window).width();if(W>800){$("img").attr("src",$("img").data("src-800px"))}elseif(W>600){$("img").attr("src",$("img").data("src-600px"))}
2.最牛的是picture标签，兼容性害怕
<picture><sourcemedia="(min-width:320px) and (max-width:480px)"srcset="ad001.png"><sourcemedia="(min-width:481px) and (max-width:800px)"srcset="ad001-m.png"><imgsrc="ad001-l.png"alt=""></picture>
其他：
1.浏览器默认字体大小16px；谷歌最小字号默认12px，所以即使写了font-size:6px; 显示也是12px，可以改变设置；（点击内容设置）
2.手机端的交互方式不一样
没有 hover有 touch 事件，已经封装好的： jquery.swipe vue.swipe没有 resize没有滚动条
Appendix：/zh-CN/docs/Web/CSS/length
