vue页面自适应?快使用rem
作为一个前端菜鸡,我已经不是第一次碰到自适应的问题了,ui给1440的图,难道就只适配1440?1920等等都要适配
作为一个前端菜鸡,我已经不是第一次碰到自适应的问题了,ui给1440的图,难道就只适配1440?起码是pc端都要适应,根据盒子的宽高比自适应,我们又不能重新根据窗口大小重新写样式,太太太浪费时间了
这时候我想到了rem,所谓rem是根据html的字体大小计算的,一般浏览器默认html{font-size:16px};也就是说 1rem=16px,那么如果一个盒子在设计图中的尺寸是200px200px,那么这个盒子转换为rem为单位就是(200/16)rem(200/16)rem,到这里还是不能进行适配啊,只能根据浏览器窗口大小改变html的字体大小来保证rem的大小不变,在我们写html时我们的确可以这么干,不过在vue中我们就可以用一些工具。我们可以根据设计图(以1440举例),可以正常使用设计图的尺寸(px),插件可以根据窗口大小自动转换成rem,而且转化成rem的大小在不同窗口下是不变的,所以插件是改变了基准(比如1440时是16px,那么1920时差不多就是21.3px)
先看效果吧(第一张是1440的,第二张是786的)
下面讲讲实现方法
1.首先安装插件
npm install postcss-px2rem px2rem-loader --save
2.写自适应的js
在src中新建utils目录下新建rem.js适配文件,然后在main.js中引用
//rem.js
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 1440宽的缩放比例,可根据设计图需要修改。
const scale = document.documentElement.clientWidth / 1440
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
//main.js
import '@/utils/rem'
3.在vue.config.js中配置
//vue.confiig.js
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize,需要和rem.js中相同
remUnit: 16
})
// 使用等比适配插件
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}
4.在组件中使用
在代码中的css
//正常根据设计图写css盒子大小就行,会自动转换成rem
.login-box {
width: 430px;
height: 430px;
background: #ffffff;
box-shadow: 0px 0px 6px rgba(52, 38, 0, 0.1);
opacity: 1;
border-radius: 16px;
position: absolute;
right: 230px;
top: 72px;
padding: 60px 50px 0;
box-sizing: border-box;
}
在F12中的css
5.注意点
(1)我们配置好vue.config.js一定要重启项目才会生效
(2)我们有时候在css中会使用计算(calc),但是在用了插件可能不会生效
正确写法:
height: calc(~"100% - 72px");
(3)记得滚动条也是算宽度的,所以别忘了总体页面的宽度要考虑滚动条的宽度,我当时忘了考虑,为了下面不出现横向滚动条,我是把滚动条宽度置0了,但一样可以滑动向下只是看不到滚动条了(比较省事偷懒的办法)
//App.vue
<style>
::-webkit-scrollbar {
width: 0;
}
</style>
(4)样式不生效的时侯记得加上!import试试,比如我修改了nprogress进度条的颜色
#nprogress .bar {
background: #05ae44 !important;
}
(5)写行内样式是不会被转成rem的,如果个别元素不想自适应可以写行内样式,但如果想自适应不要写行内样式
<div style="width:100px;"></div>
(6)某些css样式不想被转换为rem的也不想写行内样式的可以在css的后面加上/no/
padding: 45px 0; /*no*/
就到这里啦,欢迎留言
更多推荐
所有评论(0)