网页适配兼容问题

移动端适配
rem+flex+vw vh
rem: 1rem = 根元素字体大小的字高
em: 1em = 父元素或当前元素字高
vw: 视窗宽度的百分比 1vw=设备宽度的1%
方法一：



37.5是因为选择参考设计图的宽度是375

方法二：
html {
/* 参考设计图宽度750*/
font-size: calc(100 / 750 * 100vw);
}

pc端适配
%+媒体查询
最大尺寸 大于最大尺寸 内容层不变 留白变大
最大尺寸 最小尺寸之间 内容层百分比布局
最小尺寸 小于最小尺寸内容不变 产生滚动条
480 - 750 -1136 - 1440 - 1920 - 2440
响应式(移动pc适配)
媒体查询
栅格 bootstrap 官网首页