flexible

移动端⾃适应布局⽅案lib-flexible以及postcss-pxtorem

移动端⾃适应布局⽅案

1：常规实现思路：

常规的实现思路就是监听屏幕分辨率的变化动态修改根节点的字体⼤⼩，⽽页⾯布局单位⽤rem，这个地⽅可以借助与vw单位，如要在

750分辨率设备做⼀个200*200的容器

基本思路：如果是在750的设备，那么1vw即为7.5px，以此标准，13.3333vw==100px，所以直接给根节点的字体⼤⼩就为

13.333vw，然后要做200200的容器，由于根节点的字体⼤⼩为100px，所以此时我们只需要给容器宽⾼各位2rem，就能得到

200px200px的容器，⼜由于vw是⼀个根据屏幕宽度动态计算的值，所以能够⾃动实现⾃适应布局⽅案

2：借助lib-flexible以及postcss-pxtorem插件：

插件介绍：

lib-flexible：这个插件是去动态修改根节点的字体⼤⼩的，默认情况下，⾃动设置为根节点的字体⼤⼩为屏幕宽度的⼗分之⼀（也就是说默

认缩放值为10），也就是说如果屏幕宽度为750，那么根节点字体⼤⼩⾃动设置为75px

postcss-pxtorem：这个插件作⽤是⾃动把你项⽬⾥⾯写的全部px单位转换为rem单位，⽐如给这个插件的rootvalue值为20，那么⽐如

你项⽬当中写的200px就会⾃动转为为10rem，也就是页⾯写的px尺⼨/rootValue=转换后的rem单位⼤⼩

插件总结：

lib-flexible：相当于这个插件是控制1rem具体的⼤⼩根据屏幕分辨率⾃动跳转

postcss-pxtorem：这个插件是控制px转换到rem的值

插件使⽤（vue模板案例设计图为750px）：

lib-flexible：

1：npminstalllib-flexible--save-dev

2：中引⼊：import‘lib-flexible’

postcss-pxtorem：

1：npminstallpostcss-pxtorem-D

2：vue/cli3及以上webpack编译配置

//

>`s={

lintOnSave:true,

css:{

loaderOptions:{

postcss:{

plugins:[

require('postcss-pxtorem')({

//这个值的作⽤是把页⾯写的px转为多少rem，⽐如页⾯写的是200px，那么转换成的rem值就是200/这个值

rootValue:75,//这个值得到75的原因是因为，lib-flexible默认设置根节点字体⼤⼩为屏幕分辨率/10，⽽这个地⽅rootValue的缩放⽐例必

须跟控制根节点字体⼤⼩的缩⼩⽐例相同，所以这个地⽅默认就是缩⼩10倍

propList:['*'],

}),

]

}

}

},

}

3：vue/cli2的webpack编译配置

需要安装3个插件

//

"postcss":"^8.3.9",

"postcss-loader":"^6.2.0",

"postcss-pxtorem":"^6.0.0",

//

'ustrict'

s={

css:{

loaderOptions:{

postcss:{

plugins:[

require('postcss-pxtorem')({

//这个值的作⽤是把页⾯写的px转为多少rem，⽐如页⾯写的是200px，那么转换成的rem值就是200/这个值

rootValue:144,//这个是换算的单位，也就是说如果页⾯写的是

propList:['*'],

}),

]

}

}

},

}

3：⾃定义lib-flexible：

很多时候其实不借助lib-flexible也可以，我们⾃⼰完全可以⼿动实现⼀个lib-flexible

1：utils中写⼀个js⽂件动态配置根节点字体⼤⼩

functiontRem(){

lethtmlWidth=Width||Width;

//得到html的Dom元素

lethtmlDom=mentsByTagName('html')[0];

//设置根元素字体⼤⼩

(htmlWidth/10+'px',33333333333333333);

ze=htmlWidth/缩放⽐例值，默认可以为10+'px';

}

//初始化

tRem();

//改变窗⼝⼤⼩时重新设置rem

ze=function(){

tRem()

}

2：引⼊

import'./';

4：总结：

也就是说lib-flexible中的默认缩放⽐例值*postcss的rootValue必须等于设计稿的宽度，⽽lib-flexible默认的缩放⽐例值就为10，或者

⾃定义的lib-flexible可以⾃⼰随便定义，这时候⼀定要动态修改postcss的rootValue的值