移动端适配方案
响应式布局
- 通过媒体查询 @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 = {
publicPath: "./",
// 关闭eslint检查
lintOnSave: false,
// 配置css前缀,px转rem
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5,
propList: ['*']
})
]
}
}
}
};
3. css的处理
1. less、sass、stylus 预处理语言，方便我们模块化编写代码,必须编译成css文件才能使用
2. postcss 用来对css文件进行处理,称之为后处理语言
