H5适配解决方案

1.H5适配解决方案

1.1 百分比

%

缺点：相对于父级width

1.2 em和rem

em:相对于父级元素的font-size

rem:相对于根字号，也就是html根标签的font-size

1.3 媒体查询

@media (max-width: 12450px) { 
  
   //css样式
}

1.4 flex布局

思考一下：flex布局与响应式布局的区别？

flex:不会破坏布局结构

flex:1 1 1
响应式布局：会破坏布局，改变显示的内容，重要内容优先显示，其他内容可能放在下面或显隐藏掉

https://www.ruanyifeng.com/blog/2015/07/flex-examples.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

1.5 vw,vh,vmax,vmin

vw:动态根据当前屏幕可视区的宽度  1vw相当于可视区宽度的1%
vh:动态根据当前屏幕可视区的高度   1vh相当于可视区高度的1%
vmax:动态根据当前屏幕可视区的宽度和高度选取取最大者    1vmax相当于可视区宽度和高度选取取最大者 的1%
vmin:动态根据当前屏幕可视区的宽度和高度选取取最小者    1vmmin相当于可视区宽度和高度选取取最小者 的1%

1.6适配在项目