Vant2实现自适应字体大小

最新推荐文章于 2024-07-03 16:05:40 发布

m0_67193261

最新推荐文章于 2024-07-03 16:05:40 发布

阅读量3.7k

点赞数

文章标签：前端 html css vue

本文链接：https://blog.csdn.net/m0_67193261/article/details/126717414

版权

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

摘要由CSDN通过智能技术生成

用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-siz