解决页面高度和宽度问题

大纲

1.宽度界面制定基准宽度
2.screenHeight 和 clientHeight 区别
3.高度页面进入以后监听height属性

1.宽度界面制定基准宽度

因为是左右布局的管理界面，使用做菜单固定，右菜单最小值方法。

注意flex的宽度属性

// flex-basis 属性，结合 flex-grow 和 flex-shrink
flex-basis：xxx    // 基准宽度
flex-shrink：0     // 缩小比例 设置为0 不进行缩小
flex-grow：1       // 放大比例 存在剩余空间放大

注意： flex:1 是 flex-grow、flex-shrink和flex-basis三个属性的缩写

flex-grow : 1;   // div以与窗口大小相同的比例增长
flex-shrink : 1; // div以与窗口大小相同的比例缩小
flex-basis : 0;  // div没有起始值，将根据可用的屏幕大小占用屏幕

2.screenHeight 和 clientHeight 区别

参考：https://blog.csdn.net/u011860431/article/details/99736364

页面可视区域

//  例：document.documentElement.clientHeight
clientHeight //--------------- 网页的高度
scrollHeight //--------------- 元素从内容区域到底部横轴方向滚动条的区域（若没有滚动条则是到菜单栏顶部的高度）
scrollTop //------------------ 滚动了多高
offsetHeight //--------------- 网页内容区到滚动条的顶部高（没有则到菜单栏的高）
window.screen.height //------- 屏幕分辨率高

浏览器窗口

window.innerWidth //---- 浏览器窗口宽度，不包含工具栏，菜单等，仅仅是可视区域dom的width
window.innerHeight //--- 浏览器窗口高度，不包含工具栏，菜单等，仅仅是可视区域dom的height

3.高度页面进入以后监听height属性

如何理解 JS-(()=>{})()、(function(){})()

mounted () {
    
    
  window.onresize = () => (() => {
    
     // onresize 事件会在窗口或框架被调整大小时发生
    let H = document.documentElement.clientHeight
    console.log(H, 'HHHHHHHHH')
  })()
}