移动端布局+完美适配方案

目前市面上流行的移动端适配技术

• 百分比流式布局 （宽高百分比值，字体给百分比/rem值）
• 利用js动态监听设备宽度，加载不同css
• html5的媒体查询方式 写多套CSS（@media+rem）
• 栅格化布局（行列布局，如bootstrap elementUI 等UI框架思想）
• 淘宝前端开源库flexible.js （趋近于完美）

一 各种方案的优劣

• 百分比流式布局

  原理：根据获取设备的屏幕高宽来 动态设置 盒子|字体的高宽及大小

  优：能够保证在任何设备中同一套css 都能够被顺利解析，解析之后自动生成对应百分比高宽

  缺点：因为高宽是根据百分比来自动生成的，一旦跨端幅度过大（如：写的移动端与pc端同时用一套代码时）会造成页面显示非常的不和谐，给人感觉不精致，很粗糙的感觉。

• 利用js动态监听设备宽度，加载不同css

  优：因为是根据js 获取的设备的高宽，加载不同设备的css文件，所以页面显示适配度非常高，实现原理：（iphone5 一套css样式；iphone 6 7 8 一套css样式；平板一套css样式；pc端一套css样式）。

  缺：因为需要根据不同的设备加载不同的css文件，造成前期需要去写多套的独立css文件，前期往往需要花费大量的时间去做css的处理，项目的进度安排往往在前期的页面及样式要求非常快速的速度完成。

• html5的媒体查询方式 写多套CSS（@media+rem）

  优：html5的媒体查询方式 本质上更像是 第二种方法【利用js动态监听设备宽度，加载不同css】的进阶版本，不再需要js去做高宽的获取判断，直接在css文件中通过 css的 媒体查询就可以拿到当前设备的宽高，性能开销更小，比第二种方案更为优秀。

  缺：同样是需要写多套的css样式。

   <style>
      html,
      body {
        width: 100%;
        height: 100%;
        /* 设置初始字体大小 */
        /* 浏览器默认字体大小为 16px  则 1rem = 16px */
        /* 设置字体初始大小为 62.5%   则 1rem = 10px  更加好计算与转换*/
        font-size: 62.5%;
      }
  
      * {
        padding: 0;
        margin: 0;
      }
  
      /* 默认样式 */
  
      .box {
        /* 20rem === 200px */
        width: 20rem;
        height: 20rem;
        background: red;
      }
  
      /* iphone 5/5S/5E */
  
      /* 屏幕宽度小于等于 320px 时生效 */
  
      @media screen and (min-width: 320px) {
        .box {
          background: green;
        }
      }
  
      /* 比iphone5 大 比iphone 6/7/8S 小的屏幕 */
  
      /* 屏幕宽度 大于等于321px 且小于等于374px  时生效 */
  
      @media screen and (min-width: 321px) and (max-width: 374px) {
        .box {
          background: blue;
        }
      }
  
      /* iphone 6/7/8/X */
  
      /* 屏幕宽度 375px至413px之间 时生效 */
  
      @media screen and (min-width: 375px) and (max-width: 413px) {
        .box {
          background: skyblue;
        }
      }
  
      /* iphone 6s/7s/8s */
  
      /* 比平板电脑小 屏幕宽度 414px 至767px 时生效 */
  
      @media screen and (min-width: 413px) and (max-width: 767px) {
        .box {
          background: pink;
        }
      }
  
      /* 平板电脑 ipad  */
  
      /*比电脑小 屏幕宽度 768px 至900px 时生效   */
  
      @media screen and (min-width: 768px) and (max-width: 899px) {
        .box {
          background: #f60;
        }
      }
  
      /* PC电脑 */
  
      /*  屏幕宽度 900px 以上 时生效   */
  
      @media screen and (min-width: 900px) {
        .box {
          background: #000;
        }
      }
    </style>