[學(xué)習(xí)筆記](méi)viewport定義，彈性布局，響應(yīng)式布局_html/css_WEB-ITnose

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 16:22:57

[學(xué)習(xí)筆記](méi)viewport定義，彈性布局，響應(yīng)式布局_html/css_WEB-ITnose

[學(xué)習(xí)筆記](méi)viewport定義，彈性布局，響應(yīng)式布局_html/css_WEB-ITnose:一，移動(dòng)端寬度設(shè)置viewport視圖窗口，<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">，視窗寬度=設(shè)備寬度，默認(rèn)縮放=1，不允許用戶縮放。二，flexbox，彈性盒子模

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀[學(xué)習(xí)筆記](méi)viewport定義，彈性布局，響應(yīng)式布局_html/css_WEB-ITnose:一，移動(dòng)端寬度設(shè)置viewport視圖窗口，<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">，視窗寬度=設(shè)備寬度，默認(rèn)縮放=1，不允許用戶縮放。二，flexbox，彈性盒子模

一，移動(dòng)端寬度設(shè)置
viewport視圖窗口，<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">，視窗寬度=設(shè)備寬度，默認(rèn)縮放=1，不允許用戶縮放。

二，flexbox，彈性盒子模型：
1，在元素的css中添加display:-webkit-flex就可以轉(zhuǎn)換成彈性盒模型了，然后在多個(gè)子元素的CSS中添加flex:1/2/3，就可以讓子元素按定義的比例1/2/3分配填滿父元素。
2，混合劃分：

子元素可以是固定寬度，也可以是定義flex值，靈活運(yùn)用，常見(jiàn)于

圖片采用固定寬度防止縮放失真，然后右邊的文字采用彈性布局設(shè)置flex:1。
3，不定寬高的水平、垂直居中

CSS3方案：

.myoff-wrapper{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
}

更好的flexbox方案：設(shè)置父元素，讓子元素水平居中

.parent{
display:-webkit-flex;
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
}

更多應(yīng)用：

三，響應(yīng)式布局：在不同設(shè)備不同分辨率下都有良好的用戶體驗(yàn)

響應(yīng)式布局方法是依靠媒體查詢實(shí)現(xiàn)的：

媒體查詢類(lèi)型：screen(屏幕)、print(打印機(jī))、handheld(手持設(shè)備)、all(通用)
常用媒體查詢參數(shù)：width,height,device-width,device-height,orientation(檢查設(shè)備處于橫向lanscape還是豎屏portrait)

em:根據(jù)父元素的font-size為相對(duì)單位；
rem:根據(jù)html的font-size為相對(duì)單位。