响应式布局

一.为什么要响应式布局

不同设备的屏幕大小不同，网页要在不同大小屏幕上正常显示就需要响应式布局（网页布局随屏幕大小改变）。

二.方法

  • 超出则隐藏(overflow)文字折行(word-break/overflow-wrap)自适应(浮动/绝对定位/flexbox/table-cell/grid)

  • viewport：<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

  • media query

1 @media(max-width:xxxpx){
2   .wrap{display:none;}
3 }

  • 相对大小(%/vh/vw/rem)

    • vh/vw：viewport高度/宽度分为100份，xxvh占viewport高度xx份

    • rem

1 @media(max-width:xxxpx){
2 /*r:root,以后样式大小以html的字体大小为根据，写作xxxrem,不同屏幕大小的html的字体大小不一样，则其他样式的大小也相应改变。还有一种是em,参考对象是父元素文本大小*/
3   html{font-size:xxpx;}
4 }

  • Bootstrap的栅格布局

posted @ 2018-12-06 22:18  M-M-Monica  阅读(240)  评论(0)  编辑  收藏  举报