前端頁(yè)面自適應(yīng)參考網(wǎng)頁(yè)

rem 單位（高度） 寬度100%

設(shè)置viewport進(jìn)行縮放

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

rem是通過(guò)根元素進(jìn)行適配的，網(wǎng)頁(yè)中的根元素指的是html我們通過(guò)設(shè)置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 決定主軸的方向（即項(xiàng)目的排列方向）row|column（列、行）
2.flex-wrap 如果一條軸線排不下，如何換行（默認(rèn)情況，項(xiàng)目都排在一條線）

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

3.flex-flow 是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。
4.justify-content 項(xiàng)目在主軸上的對(duì)齊方式。

.box {justify-content: flex-start | flex-end | center | space-between | space-around; } 4.1 flex-start（默認(rèn)值）：左對(duì)齊 4.2 flex-end：右對(duì)齊 4.3 center： 居中 4.4 space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。 4.5 space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。