一.为什么要响应式布局
不同设备的屏幕大小不同，网页要在不同大小屏幕上正常显示就需要响应式布局（网页布局随屏幕大小改变）。
二.方法
-
超出则隐藏(overflow)文字折行(word-break/overflow-wrap)自适应(浮动/绝对定位/flexbox/table-cell/grid)
-
viewport：
<meta name="viewport" content="width=device-width,initial-scale=1.0"/> -
1 @media(max-xxxpx){ 2 .wrap{display:none;} 3 }
-
相对大小(%/vh/vw/rem)
-
vh/vw：viewport高度/宽度分为100份，xxvh占viewport高度xx份
-
rem
-
1 @media(max-xxxpx){ 2 /*r:root,以后样式大小以html的字体大小为根据，写作xxxrem,不同屏幕大小的html的字体大小不一样，则其他样式的大小也相应改变。还有一种是em,参考对象是父元素文本大小*/ 3 html{font-size:xxpx;} 4 }