携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天juejin.cn/post/712312…

适配方案

1.rem适配

rem单位：根标签的font-size所代表的值

---步骤

第一步创建style标签

第二三步将根标签的font-size置为布局视口的宽/16

第四步将style标签添加到head中

---原理

改变一个元素在不同设备上的css像素的个数

**---优缺点 **

优点：可以使用完美视口

缺点：px到rem的转化特别麻烦

(function(){
    var styleNode = document.createElement("style");//创建style标签
    var w = document.documentElement.clientWidth/16;//用布局视口的宽度/16（这个数值可以自定义）
    styleNode.innerHTML = "html{font-size:"+w+"px!important}";//设置html的font-size
    document.head.appendChild(styleNode);//把style标签添加到head中
})()

2.viewport适配

---步骤

将所有设备的布局视口的宽置为设计图的宽度

第一步定义设计图的宽度

第二步确定系统缩放比例

第三步选中viewport标签，改变其content值

---原理

改变不同设备上一个css像素跟物理像素的比例

viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的

---优缺点

优点：所量即所得

缺点：破坏了完美视口

(function(){
这个适配方案是在原有的meta标签上进行改动的，原有的meta标签为<meta name="viewport" content="width=divice-width">
将所有设备布局视口的宽度调整为设计图的宽度
    var targetW = 640;//这个就是设计图的宽，也是相当于视口的宽
    var scale = document.documentElement.clientWidth/targetW;
    var meta =	document.querySelector("meta[name='viewport']");
    meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
})()

3.百分比适配

百分比参照于谁

4.流体(弹性布局 flex)+固定 (不是适配)

5.一物理像素的实现

rem+系统缩放

1.主体适配采用rem适配并放大rem的基值(dpr倍)

2.再通过系统缩放缩回dpr倍，initial-scale=1/dpr

响应式+变换缩放 4. bootStrap插件--->栅格系统

6.移动端事件基础

1.queryselectorAll：静态列表 queryselector：静态列表的第一个

2.touchstart touchmove touchend

3.阻止事件的默认行为，阻止事件的冒泡

4.怎么全局阻止默认事件

注意：在做大型项目设置该事件就可以，小型项目可以忽略不设置。

document.addEventListener("touchstart",function(e){
    e=e || event;
    e.preventDefault;(阻止默认动作)
})

5.事件点透

6.event 3类手指列表

7.常见问题

-webkit-appearance:none

-webkit-tap-highlight-color（解决颜色高亮）

font boosting

完美视口

<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

缩放.jpg

移动端适配方案、缩放