nuxt移动端适配设置问题

最新推荐文章于 2024-10-08 10:59:48 发布

原创最新推荐文章于 2024-10-08 10:59:48 发布 · 1.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#nuxt #nuxt移动端端适配 #nuxt-vant

vue 同时被 3 个专栏收录

58 篇文章

订阅专栏

vant

9 篇文章

订阅专栏

nuxt

5 篇文章

订阅专栏

本文介绍了如何通过创建custom.js文件计算根字体大小，利用postcss-pxtorem插件将px转为rem，实现页面自适应设计。只需调整设计稿比例，即可保持1:10的rem转换率。

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

第一种：手动设置
以设计稿是375为例。
1 在plugins文件夹中新建一个fontsize.client.js文件，计算根字体大小
document.documentElement.style.fontSize=document.documentElement.clientWidth/3.75+"px"
2在nuxt.config.js文件中引入

plugins: [
    {
      // src: '@/plugins/lib-flexible.js',
      src: '@/plugins/fontsize.client.js',
      ssr:false
    },
]

3 安装postcss-pxtorem，用于转换px为rem
然后在nuxt.config.js文件中设置build选项

build: {
    vendor: ["axios"],
    postcss: {
      plugins: {
        "postcss-pxtorem": {
          rootValue: 100,  //这里是关键
          unitPrecision: 5,
          propList: ['*'],
          selectorBlackList: ['as-px'],
          replace: true,
          mediaQuery: false,
          minPixelValue: 3
        }
      }
    }
}

此时在页面中设置的px就会自动被转化为rem而且保持1:10的关系。
比如页面中设置的240px，就会自动转化为2.4rem
tip：
如果设计稿改成750.只需要改变fontsize.client.js中3.75为7.5即可