vue-cli3.0移动端屏幕适配

最新推荐文章于 2024-01-14 21:22:28 发布

原创最新推荐文章于 2024-01-14 21:22:28 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

vue学习专栏收录该内容

56 篇文章

订阅专栏

本文介绍使用 Vue CLI3.0 进行移动端屏幕适配的方法，包括 vh 和 rem 两种适配方案。vh 方案通过 postcss-px-to-viewport 插件将 px 单位转换为 vw 或 vh，而 rem 方案结合 postcss-pxtorem 和 lib-flexible 实现。文章详细解释了配置 package.json 文件的方法及参数含义。

vue-cli3.0移动端屏幕适配

vm vh适配方案
npm i postcss-px-to-viewport -save -dev
配置package.json

"postcss": {
        "plugins": {
            "autoprefixer": {},
            "postcss-px-to-viewport": {
                "viewportWidth": 750,
                "minPixelValue": 1
            }
        }
    }

配置项：
“viewportWidth”: 750, // 设计稿的宽度
“unitPrecision”: 3, // px转成vw、vh后小数点保留的位数
“minPixelValue”: 1, // 不转化为vw的最小px值

rem 适配方案
postcss-pxtorem + lib-flexible
1。yarn add lib-flexible
2。入口文件main.js中：import ‘lib-flexible/flexible.js’

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 5.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}