vue前端页面自适应解决方案

目录

1.用百分比

2.用rem 、resize

3.媒体查询语句

4.flex布局

---

1.用百分比

2.用rem 、resize

rem 的原理是根据父容易的fontsize 来计算rem的单位长度。可以通过监听window 的resize ，动态修改fontsize、进而影响rem、最终打到自适应的效果

// resize.js
const scaleListener = () => {
  window.addEventListener('resize', resize)
  console.log('scaleListening......')
}
const resize = () => {
  // 与原来 1080 的比值
  let scale = window.innerHeight / 1080
  document.documentElement.style.fontSize = `${16 * scale}px` 
  console.log('resize')
}
export {
  scaleListener
}

// APP.vue

3.媒体查询语句

@media screen and (max-width: 300px) {

html {

width: 300px;

font-size: 12px;

}

}

@media screen and (min-width: 500px) {

html {

width: 500px;

font-size: 20px;

margin: 0 auto; /* 让窗口水平居中展示 */

}

}

4.flex布局

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。