移动端适配技术构成：

• 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 src (优先)

img { width: auto; max-width: 100%; }<img src="data:image.jpg" src-600px="image-600px.jpg" 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/zh-CN/docs/Web/CSS/length