移动端适配

1. 移动端适配

1.1 vue-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里面； public里面的index.html

<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>

可能遇到的问题：

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

这里降低 postcss-pxtorem@5.1.1

npm i postcss-pxtorem@5.1.1

再次运行npm run serve 就可以了　

1.2 响应式布局：媒体查询(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>