Vant2实现自适应字体大小

最新推荐文章于 2024-04-16 17:36:38 发布

m0_67193261

最新推荐文章于 2024-04-16 17:36:38 发布

阅读量4.1k

点赞数

文章标签：前端 html css vue

本文链接：https://blog.youkuaiyun.com/m0_67193261/article/details/126717414

版权

在Vue2和Vant2环境下开发移动端项目，可通过两种方式实现字体大小的自适应：一是直接修改Vant的主题定制，覆盖默认字体大小；二是利用postcss-px-to-viewport插件，自动将px转换为vw单位，实现视口宽度相关的自适应效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用Vue2开发基于Vant2的移动端项目时，需要将默认的字体大小改成自适应的字体大小，方法如下：

方法一：修改Vant定制主题

1. 在项目的main.js中手动引入样式

import 'vant/lib/index.less'  // 引入全部样式

2. 在项目的vue.config.js中覆盖默认样式（没有该文件则在项目根目录新建）

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            'text-color': '#111',
            'border-color': '#eee',
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "your-less-file-path.less";`,
          },
        },
      },
    },
  },
};

原理简析：

Vant2定义了很多Less变量用于设置样式，只要修改这些变量就可以让页面应用你的样式，例如字体样式的默认值为：

@font-size-xs: 10px;（小号字默认10px）

@font-size-sm: 12px;（中号字默认12px）

@font-size-md: 14px;（大号字默认14px）

用vw修改为自适应的方法：

modifyVars: {
    'font-size-xs': '2vw',
    'font-size-sm': '3vw',  
    'font-size-md': '4vw'
},

方法二：使用postcss-px-to-viewport包（开发到后来才发现这个更方便）

该包会自动将px单位根据视口宽度转化为vw单位

安装：npm i postcss-px-to-viewport

配置：在项目根目录创建postcss.config.js:

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,  // 改为设计稿的视口宽度
    },
  },
};

参考资料：

postcss-px-to-viewport - npm

Vant 2 - Mobile UI Components built on Vue