响应式布局
通过媒体查询 @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文件进行处理,称之为后处理语言
