vue项目使用element-ui如何自使用不同设备的屏幕

最新推荐文章于 2024-05-31 14:18:09 发布

tian_jiangnan

最新推荐文章于 2024-05-31 14:18:09 发布

阅读量4.5k

点赞数 2

分类专栏： vue项目

本文链接：https://blog.csdn.net/tian_jiangnan/article/details/105965307

版权

本文介绍了在Vue项目中，结合Element-UI库如何实现不同设备屏幕的适配。通过安装px2rem-loader，修改webpack配置，将px转为rem单位，并在main.js中监听窗口尺寸变化动态调整html的font-size，以实现响应式布局。适配过程中，需理解rem的工作原理。

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

使用vue-cli脚手架搭建项目，并且使用第三方的UI库（比如vant，mint ui）的时候，因为第三方库用的都是用px单位，无法使用rem适配不同设备的屏幕。

1、安装插件

npm install px2rem-loader --save-dev

2、修改配置文件

在build的utils.js文件里面添加如下配置信息

//自适应各类屏幕
var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75     // (这里是指设计稿的宽度为 750 / 10)
  }
}
//自适应各类屏幕

3、然后在generateLoaders函数里面插入px2remLoader

4、把px转换成rem的配置完成后，还需要在入口文件（main.js）里面配置一段代码，此代码的目的是监听window窗口大小的变化，从而动态改变html根节点的font-s

关注

专栏目录