移动端适配方案

移动端适配方案

CSS常见的长度单位

1. px:绝对长度单位，像素
2. em:相对长度单位，相对于父元素的font-size的大小。页面层级越深，em换算就越复杂。1em = 16px;
3. rem:相对长度单位，相对于根元素的font-size的大小，避免了层级关系，而且新型浏览器对其兼容性很好。1rem = 16px
4. vh:相对长度单位，视口高度的 1/100
5. vw:相对长度单位，视口宽度的1/100

移动端的适配方案

随着移动设备的增多，屏幕尺寸的增加。

1. 为每一套屏幕尺寸制定一套CSS。 缺点：工作量大，不切实际
2. 使用媒体查询，响应式（@media） 缺点：要区分多个尺寸区段，开发效率也不高
3. 使用百分比布局 缺点：宽高不好确定，
4. vw/vh方案 兼容性不好
5. rem方案 一切单位以设备宽度为准。

rem适配方案

• 介绍rem布局 rem是等比缩放，百分之百还原，一切是基于宽度的一种弹性布局方案。
• rem布局方案

1. 网易布局方式（动态设置font-size） 拿到设计稿，设计稿值/100得一个宽度值x 动态设置font-size的px值

   document.documentElement.style.fontSize = document.documentElement.clientWidth / x + 'px'
   //MDN:内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。
   

   优点：通过动态根font-size来做适配，基本无兼容性问题 缺点：无viewport缩放，对一些手机的适配不是很到位。
2. 使用JS把页面的宽度转换为根font-size的大小，在使用rem进行适配.font-size的大小恒等于屏幕 / 10

    //window.innerWidth获取以像素为单位的窗口的内部宽度，如果垂直滚动条存在，这个属性将包括他的宽度
    let pageWidth = window.innerWidth
    document.write(`<style>html {font-size: ${pageWidth / 10}px;}</style>`)
   

3. 由于换算px与rem，比较麻烦，所以有一个预处理函数，可以放在sass。

   $ue-width: 750; // 设计稿的宽度
   @function px2rem($px){
     @return #{$px/$ue-width * 10}rem
   }
   div {
     width: px2rem(100) // 1.3333rem
   }
   

rem适配方案存在的问题

1. 字体大小并不适合rem，可以在body上做字体修正，字体大小推荐使用媒体查询和em来实现。
2. pc端，屏幕过宽。解决方案：设置一个最大屏幕，大于这个尺寸则居中，旁边留白

   var clientWidth = document.documentElement.clientWidth
   clientWidth = clientWidth < 780 ? clientWidth : 780
   document.documentElement.style.fontSize  = clientWidth / 100 + 'px'
   body {
     margin: 0 auto;
     width: 100rem;
   }