vue项目移动端适配解决方法（最新）

最新推荐文章于 2024-03-09 19:55:54 发布

清虚桂意

最新推荐文章于 2024-03-09 19:55:54 发布

阅读量2.3k

点赞数

分类专栏： vue vant 项目经验文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45031595/article/details/120541456

版权

vue 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

项目经验

10 篇文章 0 订阅

订阅专栏

vant

2 篇文章 0 订阅

订阅专栏

参考文档

vant组件库移动适配方案
 有待验证，看起来比较靠谱

vue项目移动端适配解决方法

使用 rem 单位进行适配，推荐使用以下两个工具：
lib-flexible
postcss-pxtorem

注意：因为lib-flexible主要用于手机自适应，当屏幕尺寸大于540px时，它设置html标签的font-size固定为54px，并不能根据屏幕尺寸调整html标签的font-size的大小，所以如果还想适配电脑端可以修改源码
vue项目移动端、pc端适配方案（px转rem）

1，安装 lib-flexible 和 postcss-pxtorem

npm install lib-flexible --save

npm install postcss postcss-pxtorem --save-dev

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

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

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

2，引入lib-flexible

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

import 'lib-flexible'

注意事项 由于lib-flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 public/index.html 中的这个标签删除！！！

3，配置postcss-pxtorem

在项目根目录创建postcss.config.js

具体配置内容如下：

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

注意：这样当遇到vant组件，rootValue值为37.5，而其他我们自己的样式文件rootValue值为75，这样当设计稿为750px时就可以一比一写样式了。

4，postcss-pxtorem切换版本

当进行项目启动，会发现报错，查了原因可能是版本不匹配。
所以切换postcss-pxtorem的版本

npm i postcss-pxtorem@5.1.1 --save-dev

到此，项目的移动适配就完成了。

注意事项

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;
      }   
}

清虚桂意

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
vue项目移动端适配解决方法（最新）

参考文档vant组件库移动适配方案有待验证，看起来比较靠谱vue项目移动端适配解决方法使用 rem 单位进行适配，推荐使用以下两个工具：lib-flexiblepostcss-pxtorem注意：因为lib-flexible主要用于手机自适应，当屏幕尺寸大于540px时，它设置html标签的font-size固定为54px，并不能根据屏幕尺寸调整html标签的font-size的大小，所以如果还想适配电脑端可以修改源码vue项目移动端、pc端适配方案（px转rem）1，安装 lib-fle
复制链接

扫一扫