前端頁面自適應參考網頁

rem 單位（高度） 寬度100%

設置viewport進行縮放

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設置html的字體大小就可以控制rem的大小

html{font-size:20px; } .btn {width: 6rem;height: 3rem;line-height: 3rem;font-size: 1.2rem;display: inline-block;background: #06c;color: #fff;border-radius: .5rem;text-decoration: none;text-align: center; }

彈性布局flex

display:flex / display:inline-flex

屬性：
1.flex-direction 決定主軸的方向（即項目的排列方向）row|column（列、行）
2.flex-wrap 如果一條軸線排不下，如何換行（默認情況，項目都排在一條線）

.box{flex-wrap: nowrap （默認不換行）| wrap （換行，第一行在上方）| wrap-reverse （換行，第一行在下方）; }

3.flex-flow 是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
4.justify-content 項目在主軸上的對齊方式。

.box {justify-content: flex-start | flex-end | center | space-between | space-around; } 4.1 flex-start（默認值）：左對齊 4.2 flex-end：右對齊 4.3 center： 居中 4.4 space-between：兩端對齊，項目之間的間隔都相等。 4.5 space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

5.align-items flex-start | flex-end | center | baseline | stretch(默認) 用于控制項目在縱軸排列方式
6.align-content 取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默認);
用于控制多行項目的對齊方式，如果項目只有一行則不會起作用；默認stretch，

總結

以上是生活随笔為你收集整理的前端页面自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。