响应式布局

• 在不同设备上正常使用
• 一般主要处理屏幕大小的问题
• 主要方法：
  • 隐藏+折行+自适应空间
  • rem/viewport/media query

rem

rem（font size of the root element）是指相对于根元素（即HTML元素）的字体大小的单位。
假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px

html{
  font-size: 10px;
}
p{
  width: 2rem; /* 2*10 = 20px;*/
  margin: 1rem;
}

当屏幕不同，通过媒题查询设置根字体大小，设计稿下i375px的html的font-size预设基准值为100px（方便计算）,即1rem = 100px

           @media only screen and (min-width: 320px) {
            html {
                font-size: 85.333px;
            }
        }
                //  only 提升兼容性
         @media only screen (min-width: 360px) {
            html {
                font-size: 96px;
            }
        }
           @media only screen (min-width: 375px) {
            html {
                font-size: 100px;
            }
        }
          @media only screen (min-width: 414px) {
            html {
                font-size: 110.4px;
            }
        }
      body {
            font-size: 14px; /* 设置字体 */
        }

缺点：

• 阶梯型

JS计算: 监听分辨率的变化来动态改变根元素的字体大小;

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';

• 缺点：html文件头部需插入一段js代

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
 // 三者还是有区别的

vw/vh

viewport

https://www.w3cplus.com/javascript/offset-scroll-client.html

• window.screen.height 屏幕高度
• window.innerHeight 网页视口高度
• document.body.clientHeight body高度

• vw : 1vw 等于视口宽度的1%
• vh : 1vh 等于视口高度的1%
• vmin
• vmax

px2rem，px2vw