移动端适配

响应式布局

通过媒体查询 @media

写两套代码,一套pc,一套移动端,通过userAgent判断用户使用的设备,跳转到相应的网站

移动端适配(rem)   

元素的度量单位

px像素

em根据父元素来计算大小（项目中比较少用）

rem根据根节点(html)元素的font-size进行计算大小

vw/vh根据手机屏幕计算大小

rpx小程序特有单位

rem计算公式: 元素的宽度(高度)= html的font-size * rem

使用rem进行移动端适配的原理

以ipone6宽度作为参考,给它的根标签设置大小

获取手机的屏幕宽度,根据屏幕宽度,以iphone作为参照物进行等比缩放

在项目中配置rem

用来根据手机宽度设置根元素字体的大小

安装 amfe-flexible,

并在main.js中导入

import 'amfe-flexible';

px转成rem,免去我们手动输入rem

安装 postcss-pxtorem

在vue.config.js中进行配置

const autoprefixer = require('autoprefixer');

const pxtorem = require('postcss-pxtorem');

​

module.exports = {

  css: {

   loaderOptions: {

     postcss: {

       plugins: [

         autoprefixer(),

         pxtorem({

           rootValue: 37.5,

           propList: ['*'],

           // 该项仅在使用 Circle 组件时需要

           // 原因参见 https://github.com/youzan/vant/issues/1948

           selectorBlackList: ['van-circle__layer']

         })

       ]

     }

   }

  }

};

css的处理

less、sass、stylus 预处理语言，方便我们模块化编写代码,必须编译成css文件才能使用

postcss 用来对css文件进行处理,称之为后处理语言