vue项目移动端、PC端适配方案
vue项目移动端、pc端适配方案
lib-flexible 根据屏幕宽度,自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem
一、第一步先安装 flexible和 postcss-px2rem(命令行安装)
npm i lib-flexible -Snpm i postcss-px2rem -S
简要介绍这两个包的用途:
flexible会为页面根据屏幕自动添加标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值。
postcss-px2rem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据标签的font-size值来计算出结果,1rem=html标签的font-size值。
二、引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!
三、修改lib-flexible源码
因为lib-flexible主要用于手机自适应,当屏幕尺寸大于540px时,它设置html的font-size固定为54px,并不能根据屏幕尺寸调整html的font-size的大小,所以这里需要修改lib-flexible源码。
在node-modules依赖包lib-flexible文件夹中的flexible.js文件,可以看到源码
function refreshRem(){//获取屏幕宽度var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {//这里当屏幕宽度大于540时,宽度写死为540了,所以要想电脑端也能通过rem自适应,替换成 width = width * dpr;width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}
修改替换成 width = width * dpr
function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {//变更width = width * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}
四、配置postcss-px2rem
px2rem的配置放在vue-cli3 项目中vue.config.js中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js)
具体配置内容如下:
module.exports = {css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({remUnit: 37.5})]}}},}
温馨提示: remUnit这个配置项的数值是多少呢??? 通常我们是根据设计图来定这个值,原因很简单,便于开发。假如设计图给的宽度是750,我们通常就会把remUnit设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。
那为什么你在这里写成了37.5呢???那我们后面专门来讲!
之所以设为37.5,是为了引用像mint-ui这样的第三方UI框架,因为第三方框架没有兼容px2rem ,将remUnit的值设置为设计图宽度(这里为750px)75的一半,即可以1:1还原mint-ui的组件,否则会样式会有变化,例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时,也将值改为设计图的一半。
五、注意事项
1、字号不使用rem
我们都知道chrome的最小显示的字体是12px,如果字体用rem,计算出来小于12px,那么就也会以12px显示,而且我们不希望出现13px或者15px这样的奇葩尺寸,所以字体最好是用px来表示,至于适应,我们可以写媒体查询。
.item {border-bottom: 1px #8d8d8d dashed;font-size: 12px;line-height: 16px;@media screen and (min-width: 576px) {font-size: 14px;line-height: 18px;}@media screen and (min-width: 768px) {font-size: 16px;line-height: 28px;}@media screen and (min-width: 992px) {font-size: 16px;line-height: 32px;}@media screen and (min-width: 1200px) {font-size: 18px;line-height: 64px;} }
2、简单来讲阿里手淘的原理就是网页随着屏幕大小等比例缩放而已,所以此方案只适用于纯手机端或者pc端的适配方案,当然手机端、pc端也可以同时适配,前提是页面布局不变。一般而言,手机端、pc端共用一个项目还是建议使用栅格布局、媒体查询控制。
六、参考
postcss-plugin-px2rem官方文档:/package/postcss-plugin-px2rem
postcss-pxtorem官方文档:/package/postcss-pxtorem
postcss-px2rem官方文档:/package/postcss-px2rem
也可以看网址:vue中移动端自适应的postcss-plugin-px2rem插件 - 阿臻 - 博客园 ()
和
vue 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法; - 简书 ()
如果觉得《移动端适配推荐flexible和 postcss-px2rem》对你有帮助,请点赞、收藏,并留下你的观点哦!