什么是适配
chrome 最小字体：12px，默认字体：16px
rem 单位：参照于根元素 html 的 font-size 值
适配：就是让网页在各种不同尺寸的移动设备上，都能百分之百的按相同比例还原设计图
rem 适配方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=dedg">
<title>移动端rem适配</title>
<style>
body {
margin: 0;
}
.box {
width: 16rem;
height: 4rem;
background: #70a6ff;
}
</style>
<head>
<body>
<div class="box"></div>
<script>
(function () {
const layoutWidth = document.documentElement.clientWidth,
remSize = layoutWidth / 16,
styleNode = document.createElement('style')
styleNode.innerHTML = 'html {font-size: ' + remSize + 'px !important;}'
document.head.appendChild(styleNode) }
)()
</script>
</body>
</html>
本质：将页面元素的尺寸跟布局视口的尺寸通过 rem 关联起来，不同的设备 rem 对应的像素值不一样，这样就实现了等比例
优点：使用了完美视口，太大的元素也能完好的显示在页面，不会被缩放；图片失真的情况不严重（因为一般的设计图基于 iPhone 6 都是 750px 的宽度）
缺点：页面上的每一个元素都要从 px 单位转换为 rem，计算过程比较复杂（后面用 LESS 自动计算）
viewport 适配方案
同上，把（function(){}）（）替换
(function () {
const targetLayoutWidth = 320,
currentLayoutWidth = document.documentElement.clientWidth,
scale = currentLayoutWidth / targetLayoutWidth,
metaNode = document.querySelector('meta[name="viewport"]')
metaNode.setAttribute('content', 'initial-scale=' + scale + ', user-scalable=no')
})()
本质：将页面的布局视口尺寸设置（缩放）为设计图的尺寸（一般为 320px），这样设计图跟布局视口一比一对应，页面中的元素尺寸就跟设计图中标注的尺寸一致，所以不用管设备的尺寸即可以实现等比例
优点：设计图所见即所得
缺点：由于布局视口缩放（一般是放大操作）后，它的像素个数会变少，这时如果在 meta 里写上 width="device-width" 的话，由于理想视口的像素比较多，所以布局视口会取理想视口的像素值。所以这时不能写这句话，但这样的话就无法实现完美视口了，页面中如果有太大的元素，就会被自动缩放，而不会出现滚动条
心情不太愉快，不写了。事件点透之类的下次来在写
网友评论