一、安装插件

npm i lib-flexible -S

下载淘宝的flexible插件，-S为生产依赖

npm i px2rem-loader -D

下载将px转换成rem的插件，这样在写的时候就可以根据设计稿愉快的使用px啦，这个插件会自动帮我们转换

二、在入口文件main.js将lib-flexible插件引入

三、在vue.config.js中添加配置

module.exports = {chainWebpack: config => {config.module.rule("css").test(/\.css$/).oneOf("vue").resourceQuery(/\?vue/).use("px2rem").loader("px2rem-loader").options({remUnit: 192 // 设计稿大小比例 / 10});},
}

remUnit属性用于设置设计稿除以10之后的大小

四、修改flexible.js 文件

全局搜索flexible.js，将refreshRem函数中原本的540替换为width，这样就实现了宽度根据屏幕大小自动适配

五、查看效果

以上全部设置完成后，重新启动项目就可以看见效果啦

vue项目实现屏幕自适应相关推荐

vue 项目的屏幕自适应方案
方案一:使用 scale-box 组件属性: width 宽度默认 1920 height 高度默认 1080 bgc 背景颜色默认 "transparent" delay ...
vue项目中字体自适应屏幕(使用px2rem插件)
1.为什么使用rem做适配? 答:当你使用px做单位的时候,在不通分辨率的手机型号,他显示的大小就是设定的多少px,当手机尺寸大时,那么元素就会显得很小,当手机分辨率过小时,元素就会显得很大,因为我们 ...
vue项目登录页背景图百分百铺满屏幕宽高自适应
vue项目背景图百分百铺满屏幕宽高自适应 .login{background: url(../../../static/img/login/beijing@2x.png);background-siz ...
vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
vue项目网页自适应，等比例放大缩小
同样是,虽然标题写的vue项目适用,但其它前端框架应该也可以.其它框架我没什么经验,可以参考着看看,应该适用. 本文章不涉及第三方插件,纯js. 自适应这个问题,老早以前就有一个解决方式,css中的% ...
vue项目-点击添加或者修改按钮浏览器的屏幕变黑，再次点击屏幕之后浏览器恢复正常（火狐浏览器、ChromeCoreLauncher双核浏览器）
今天在写springboot+vue项目的时候发现了一个bug,之前写的项目就没有这种情况,bug如下: 点击添加或者修改按钮浏览器的屏幕变黑,再次点击屏幕之后浏览器恢复正常点击修改按钮屏幕变黑 ...
ant design vue table 高度自适应_2年Vue项目实战经验汇总！
前言 vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,由于其轻量和自底向上的渐进式设计思想,使其不仅仅被应用于PC系统,对于移动端,桌面软件(electronjs)等也有广泛的应用,与 ...
vue项目实现大屏展示自适应问题
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局. 一.安装 postcss-px ...
vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...

vue项目实现屏幕自适应

一、安装插件

二、在入口文件main.js将lib-flexible插件引入

三、在vue.config.js中添加配置

四、修改flexible.js 文件

五、查看效果

vue项目实现屏幕自适应相关推荐

最新文章

热门文章