基本布局

PC端

盒子模型 定高 定宽

display:inline-block

移动Web

定高，宽度百分比

flex(响应式)

media query 媒体查询(响应式)

@media 媒体类型 and (媒体特性){

  css样式

}

媒体类型: screen print  媒体特性: max-width  max-height

media quary 也可以写在link标签中

media quary要加移动端

rem布局

其实rem布局的本质是等比缩放，一般是基于宽度

rem就相当于字体单位

相当于浏览器默认字体大小  

字体单位: 值根据html根元素大小而定，同样可以作为宽度，高度等单位

适配原理: 将px替换成rem，动态修改html的font-size适配

1 rem = 浏览器默认大小 16px

? = 160px  10 = 160px

设置浏览器默认字体大小的话  对应的1rem就等于默认的字体大小

一般情况下 基准值/10

//根据屏幕宽度控制html的font-size

//获取视窗宽度 //兼容获取宽度

let htmlWidth= document.documentElement.clientWidth|| document.body.clientWidth;

console.log(htmlWidth);

//获取视窗高度

let htmlDom= document.getElementsByTagName('html')[0];

htmlDom.style.fontSize= htmlWidth/10 + 'px';