响应式布局
- 通过媒体查询 @media
- 写两套代码,一套pc,一套移动端,通过userAgent判断用户使用的设备,跳转到相应的网站
移动端适配(rem)
一. 元素的度量单位
1. px像素
2. em根据父元素来计算大小（项目中比较少用）
3. rem根据根节点(html)元素的font-size进行计算大小
4. vw/vh根据手机屏幕计算大小
5. rpx小程序特有单位
二. rem计算公式: 元素的宽度(高度)= html的font-size * rem
三. 使用rem进行移动端适配的原理
1. 以ipone6宽度作为参考,给它的根标签设置大小
2. 获取手机的屏幕宽度,根据屏幕宽度,以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'] }) ] } } } };- 封装完成后，在main.js中导入,将封装好的方法结构出来， 并添加到vue原型中
三. css的处理
- less、sass、stylus 预处理语言，方便我们模块化编写代码,必须编译成css文件才能使用
- postcss 用来对css文件进行处理,称之为后处理语言
