1、自适应
1、rem.js—
//rem.js
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 1440宽的缩放比例,可根据设计图需要修改。
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
2、main.js里引入
//引入rem
import rem from "./utils/rem.js"
3、安装 postcss-pxtorem
cnpm install postcss-pxtorem -D
4、config。js
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize,需要和rem.js中相同
remUnit: 16
})
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
},
}
5、媒体查询
@media (min-width: 1440px) and (max-width: 1680px){}/*>=1440,<=1680》的设备*/
6、动态获取高度(据情况添加)
<div class="bototm-box" :style="'height:'+((screenHeight-127)/2)+'px;'">
<script>
var screenHeight = document.documentElement.clientHeight;
var screenWidth = document.documentElement.clientWidth;
return{
screenHeight: document.documentElement.clientHeight,
screenWidth: document.documentElement.clientWidth,
}
watch: {
//动态获取box高度
screenHeight(val) {
// 为了避免频繁触发resize函数导致页面卡顿,使用定时器
if (!this.timer) {
// 一旦监听到的screenWidth值改变,就将其重新赋给data里的screenWidth
this.screenHeight = val
this.timer = true
let that = this
setTimeout(function() {
// 打印screenWidth变化的值
console.log(that.screenHeight)
that.timer = false
}, 400)
}
},
//动态获取box宽度
screenWidth(val) {
if (!this.timer) {
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function() {
console.log(that.screenWidth)
that.timer = false
}, 400)
}
}
},
onload() {
resize = window.setInterval("resizenow();", 1000);
},
methods: {
resizenow() {
window.resizeTo(document.body.scrollWidth + 10, document.body.scrollHeight + 10);
if (++times > 10) {
clearInterval(resize);
}
},
get_bodyHeight() { //动态获取浏览器高度
const that = this
window.onresize = () => {
return (() => {
window.screenHeight = document.documentElement.clientHeight
that.screenHeight = window.screenHeight
})()
}
},
}
</script>
7、css里设置最大高度,超出则有滚动条效果;以及display设置
max-height:calc(100vh - 7.5625rem);//页面高度减去头部高度
overflow-x: hidden;//auto
overflow-y:scroll;//auto
display: flex;