vue中适配移动端布局方案

我这一生如履薄冰~

已于 2024-04-18 14:42:58 修改

阅读量999

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 postcss

于 2023-02-28 22:19:27 首次发布

本文链接：https://blog.csdn.net/to_prototy/article/details/129270263

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章介绍了在Vue中开发H5移动端项目时如何进行适配。传统方法是通过js动态设置html字体大小，使用rem单位。而现代解决方案则利用amfe-flexible插件，配合postcss-pxtorem和autoprefixer自动转换px到rem，简化了适配过程，实现了页面的自适应布局。

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

用vue开发一个h5移动端项目需要做适配

传统方法

在public文件夹下html页面加入js，css中样式用到px的地方改为rem(真实宽高/一个固定比例)

<!--适配-->
<script type="text/javascript">
    var html = document.querySelector('html');
    changeRem();
    window.addEventListener('resize', changeRem);

    function changeRem() {
        var width = html.getBoundingClientRect().width;
        html.style.fontSize = width / 19.2 + 'px';
        console.log(html.style.fontSize)
    }
</script>

解决方案

1.第一步：安装三个插件

npm install amfe-flexible -D

npm install postcss-pxtorem -D

npm install autoprefixer -D

2.第二步：在main.js文件中导入amfe-flexible

import 'amfe-flexible'

第三步：vue.config.js中配置

const { defineConfig } = require("@vue/cli-service");
const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");

module.exports = defineConfig({
  // 配置css前缀,px转rem
  css: {
    loaderOptions: {
      postcss: {
		postcssOptions:{
		  plugins: [
		    autoprefixer(),
		    pxtorem({
		      rootValue: 192,  //根据设计稿宽度/10
		      propList: ["*"]
		    })
		  ]
		}
      }
    }
  }
});

第四步：页面使用

在css中可以直接写px,会被转化为rem，不用去计算rem值，从而做到自适应伸缩。