rem适配不同设备快速开发长页面

  规定html基准100px，之所以是100px而不是10px，是因为浏览器的支持的最小font-size达不到10px，通常是12px，而且不同浏览器之间会有差异，我们写10px，浏览器会按照12px处理，这样计算的距离就会跟我们想的不一样。

html{
  font-size: 100px;
}

  设计师通常都是按照iphone6/7/8的375px给的设计图，我们按照设计图开始写UI，之后涉及到大小的都以rem为单位。

*{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
html,body{
    margin: 0;
    padding: 0;
}
html{
    font-size: 100px;
}
body{
    max-width: 750px;
    margin: 0 auto;
}
.detail {
    text-decoration: none;
    font-size: .27rem;
    display: block;
    color: #fff;
    font-family: "微软雅黑 Light", "微软雅黑";
    text-align: center;
    margin-top: .25rem;
}
header a {
    display: block;
    margin-top: -.1rem;
    margin-left: .4rem;
}
.back {
    width:.6rem ;
    height: .6rem;

}
.logo{
    width: 3.75rem;
    margin: 0 auto;
    margin-top: .4rem;
}
.logo img{
    width: 3.75rem;
    height: 1.48rem;
}
.bg {
    width:100%;
    background: #0080ff;
    overflow: hidden;
    margin-top: .55rem;

}
p {
    text-align: center;
    font-family: "微软雅黑 Light", "微软雅黑";
    font-size: .27rem;
    color: #fff;
}
.png{
    width: 7.5rem;
    height: 11.11rem;
    margin-top:.22rem ;

}
.p1{
    font-family: "微软雅黑";
    font-size: .6rem;
    margin-top: .5rem;
}
.p2{
    margin-top:-.4rem;
}
.p3{
    margin-top:-.2rem;
}
#pos1,#pos2,#pos3{
    margin-top: 0;
}

  这样，我们就完成了设备宽度为375px的UI，下一步我们对不同宽度的设备做处理。

;(function () {
  let desW = 375
  let winW = document.documentElement.clientWidth
  let ratio = winW / desW
  document.documentElement.style.fontSize = ratio * 100 + 'px'
  if (winW > desW) {
    let oApp = document.getElementById('app')
    oApp.style.width = desW + 'px'
    oApp.style.margin = '0 auto'
    document.documentElement.style.fontSize = '100px'
  }
})()

  上述技术用于快速开发兼容不同设备的长页面非常好用，因为长页面时常需要兼容所有的移动端、PC端。

来让我们看看效果：

不足之处
  上面方法理论上也可以用来做移动端的适配，但要求所有代码都得用rem单位，显得很不灵活，经测试效果也不是很好，并不推荐用来开发用于移动端的H5页面。
  H5提出针对不同设备宽、高的自适配单位vw、vh，它们相比rem更好用、更简单，我们会在后面详细分析。