移动端适配

常用插件：flexible.js pxtorem

响应式 & 自适应

响应式布局：媒体查询(media query)

媒体查询就是对设备按照某些条件进行查询，使符合查询条件的设备显示对应的样式，从而达到不同设备显示不同样式的效果。
• 响应式页面的本质就是写了两个页面的内容（移动端+PC端）在同一个页面中，然后根据查询条件来切换该用哪个页面。
• 如果是同一个页面内之间的状态，用JS来切换状态
如果是不同屏幕之间的状态，用媒体查询来切换状态
• 适配移动端用 媒体查询 & meta viewport
• 移动端页面的交互方式和 PC 端页面不同

<style>
  @media (max-width: 320px){ /*0~320*/
      body{
          background: pink;
      }
   } 
   @media (min-width: 321px) and (max-width: 375px){ /*321~768*/
      body{
          background: red;
      }
   }  
   @media (min-width: 376px) and (max-width: 425px){ /*376~425*/
      body{
          background: yellow;
      }
   }  
   @media (min-width: 426px) and (max-width: 768px){ /*426~768*/
      body{
          background: blue;
      }
   }  
   @media (min-width: 769px){ /*769~+∞*/
      body{
          background: green;
      }
   }
</style>

自适应：盒模型，图片，字体

盒模型：

   基本是：flex 弹性布局 & 百分比布局 <br />           高级：bootstarp  element  vant antd  等 栅栏式布局

图片：

重点：避免图片失帧
方式一：

img  {                          
      max-width: 100%;
      max-height: 100%;
      display: block;
      margin: auto;
}

方式二：

img  {                          
      width:100%;
      heigth:auto;
      display: block;
}

字体：

字体尺寸的单位：px pt rem em

px:

相对长度单位。像素（Pixels）。像素px是相对于显示器屏幕分辨率而言的。
px不会因为其它元素的尺寸变化而变化
px特点：比较稳定和精确，但在浏览器放大缩小会出现页面混乱。

pt:

点（Points），绝对长度单位。
印刷业上常使用的单位，磅的意思，一般用于页面打印排版。
不知道经常做设计的同学知不知道zeplin这个网站，它用的像素单位都是pt。

rem:

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。是CSS3新增的一个相对单位（root em=>rem）;
rem可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

em:

相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
em特点：
（1）em的值并不是固定的
（2）em会继承父级元素的字体大小
使用em的注意点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

veu-rem适配：

公司设计稿：750尺寸 是 iPhone6/7/8 屏幕宽度的 2倍视图
方式一：
第一步，先用vue-cli快速构建出一个项目，然后，安装postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url；

npm i --save postcss postcss-pxtorem postcss-loader postcss-import postcss-url

第二步，在项目根目录下添加.postcssrc.js文件，在里面写上

module.exports = {
    plugins: {
        'postcss-pxtorem':
        {
            rootValue: 32,//根目录的字体大小是32px
            propList: ['*'],
            minPixelValue: 2//最小转换单位是2px
        }
    }
};

第三步，动态设置根字体大小！一段简单的js插入在head里面；

<script>
  (function() {
    function autoRootFontSize() {
        document.documentElement.style.fontSize =        Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';
          // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
    }
    window.addEventListener('resize', autoRootFontSize);
    autoRootFontSize();
})();
</script>