【前端】页面自适应

响应式布局-flex

• em 相对父元素的font-size
• rem 相对长度单位，相对于根元素font-size计算值的倍数
• vw(viewport width) 视窗宽度，1vw = 视窗宽度的1%
• vh(viewport height) 视窗高度，1vh = 视窗高度的1%

方案

1. 整体布局：flex+百分比，从内到外都用百分比
2. css最小宽高设置：min-width、min-height，在页面过小时增加滚动条
3. box-sizing: border-box
4. css字体设置：rem
5. margin/padding : vh、vw
6. echarts图表字体：自定义一个fontSize(num)函数，在大屏调好合适的数，在option配置参数时使用fontSize(num)

//util.js
export const fontSize=function(num){
  let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = clientWidth / 1920;
  return num*fontSize;

}


//index.vue
import {fontSize,distance} from '@/util/util.js'
let option = {
......
            title: {
              color: "#dcdcdc",
              fontSize: fontSize(12),
            },
......
        }

7. 监测页面变化：mounted挂载window.onresize方法

 mounted() {
      const that=this
      window.addEventListener("resize",()=>{
        that.init()
      })
      this.init()
    },

或

mounted() {
      this.screenWidth = document.body.clientWidth;
      this.screenHeight = document.body.clientHeight;
      window.onresize = () => {
        return (() => {
          this.screenWidth = document.body.clientWidth;
          this.screenHeight = document.body.clientHeight;
        })();
      };
    }

响应式布局-栅格系统

bootstrap框架

媒体查询技术

width/height: 浏览器宽高
max-width： 表示小于最大宽度时生效
min-width： 表示大于最小宽度时生效
device-width/device-height: 设备屏幕分辨率宽高
resolution: 设备分辨率
orientation：portrait(纵向),高度大于等于宽度时，landscape(横向),高度小于宽度时

/*当浏览器宽度大于等于700px且为横向时CSS代码生效*/
@media (min-width: 700px) and (orientation: landscape) {
 ...
 }
 /*当浏览器宽度小于等于500px或者手持设备且为横向时生效*/
 @media (max-width: 500px), handheld and (orientation: landscape) {
 ...
 }

/*link 引入方式*/
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
/*@media导入*/
@media screen and (max-width: 990px){
    .container{
        background: red;
    }
}