移动端rem适配(vue&H5)-实践记录
背景
当有移动端适配需求的时候,需要纠结不同设备的不同展示方式,这个时候就需要rem,通过搜索资料并实践,得出了以下成果–以作个人记录
vue 项目
须知:
- 设计稿尺寸:750px, 实际开发尺寸:375px(iphone 6)
- 提醒:必须设置 html 基准字体大小
html {
font-size: 16px;
}
第一步:设置meta
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
第二步:安装依赖
npm install postcss-plugin-px2rem --save
第三步:添加依赖配置
注:我用的vue-cli3,所以在 vue.config.js 文件的 exports 代码块中添加以下代码
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 32, //换算基数, 默认100 ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
//propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //(boolean/string)忽略单个属性的方