首页 > 分享 > vue项目经验：移动端、pc端适配方案（px转rem）

vue项目经验：移动端、pc端适配方案（px转rem）

花匠小妙招
2024-12-03 18:33

vue项目移动端、pc端适配方案

lib-flexible 根据屏幕宽度，自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem

一、安装 lib-flexible和 postcss-px2rem

npm i lib-flexible -S npm i postcss-px2rem -S 123

简要介绍这两个包的用途：

lib-flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。

postcss-px2rem会将px转换为rem用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，即1rem=html标签的font-size值。（具体可自行百度单位rem的定义）

二、引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible' 1

注意事项 由于lib-flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 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; } 1234567891011'

修改替换成 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; } 12345678910'

四、配置postcss-px2rem

postcss-px2rem的配置放在vue-cli3 项目中vue.config.js文件中（找不到？可能你是一个新构建的项目，需要手动在项目根目录创建vue.config.js）

具体配置内容如下：

module.exports = { css: { loaderOptions: { css: {}, postcss: { plugins: [ require('postcss-px2rem')({ remUnit: 37.5 }) ] } } }, } 1234567891011121314

温馨提示： remUnit这个配置项的数值是多少呢？？？通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。

那为什么你在这里写成了37.5呢？？？

之所以设为37.5，是为了引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem ，将remUnit的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。

既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。

五、注意事项

1、对于行内样式，阿里手淘并不能将px转rem，所以对于需要自适应的样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。

2、字号不使用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; } }

123456789101112131415161718192021

3、简单来讲阿里手淘的原理就是网页随着屏幕大小等比例缩放而已，所以此方案只适用于纯手机端或者pc端的适配方案，当然手机端、pc端也可以同时适配，前提是页面布局不变。一般而言，手机端、pc端共用一个项目还是建议使用栅格布局、媒体查询控制。