移動(dòng)端特點(diǎn)

移動(dòng)端與pc端網(wǎng)頁(yè)的差別

pc端屏幕大,有固定版心.
移動(dòng)端多數(shù)是手機(jī),屏幕小,網(wǎng)頁(yè)多數(shù)為百分比布局

分辨率

屏幕尺寸
指的是對(duì)角線的長(zhǎng)度,一般用英寸度量

分辨率分類:

1. 物理分辨率是生產(chǎn)屏幕時(shí)就固定的，它是不可被改變的
2. 邏輯分辨率是由軟件（驅(qū)動(dòng)）決定的

視口

meta標(biāo)簽設(shè)置視口寬度，制作適配不同設(shè)備寬度的網(wǎng)頁(yè)

默認(rèn)網(wǎng)頁(yè)寬度是980px

需求：網(wǎng)頁(yè)寬度和設(shè)備寬度(分辨率)相同。
解決辦法：添加視口標(biāo)簽。
視口：顯示HTML網(wǎng)頁(yè)的區(qū)域，用來(lái)約束HTML尺寸。

視口代碼

視口代碼示例.png

viewport：視口
width=device-width：視口寬度 = 設(shè)備寬度
initial-scale=1.0：縮放1倍（不縮放）

二倍圖

能夠使用像素大廚軟件測(cè)量二倍圖中元素的尺寸

flex布局

優(yōu)勢(shì):

1. 是瀏覽器提倡的布局模型
2. 布局網(wǎng)頁(yè)更靈活, 簡(jiǎn)單
3. 避免浮動(dòng)脫標(biāo)的問(wèn)題

作用:

1. 基于 Flex 精確靈活控制塊級(jí)盒子的布局方式，避免浮動(dòng)布局中脫離文檔流現(xiàn)象發(fā)生。
2. Flex布局非常適合結(jié)構(gòu)化布局

設(shè)置方式:

父元素添加 display: flex，子元素可以自動(dòng)的擠壓或拉伸

組成:

flex模型構(gòu)成.png

justify-content屬性調(diào)節(jié)元素在主軸的對(duì)齊方式

可用屬性值:
flex-start: 默認(rèn)值, 起點(diǎn)開(kāi)始依次排列
flex-end: 終點(diǎn)開(kāi)始依次排列
center: 沿主軸居中排列
space-around: 彈性盒子沿主軸均勻排列, 空白間距均分在彈性盒子兩側(cè)
space-between: 彈性盒子沿主軸均勻排列, 空白間距均分在相鄰盒子之間
space-evenly: 彈性盒子沿主軸均勻排列, 彈性盒子與容器之間間距相等

align-items調(diào)節(jié)元素在側(cè)軸的對(duì)齊方式

注意點(diǎn):
align-items（添加到彈性容器）
align-self： 控制某個(gè)彈性盒子在側(cè)軸的對(duì)齊方式（添加到彈性盒子）

可用屬性:
flex-start: 默認(rèn)值, 起點(diǎn)開(kāi)始依次排列
flex-end: 終點(diǎn)開(kāi)始依次排列
center: 沿側(cè)軸居中排列
stretch: 默認(rèn)值, 彈性盒子沿著主軸線被拉伸至鋪滿容器

flex屬性修改彈性盒子伸縮比

flex : 值(整數(shù))
注意 : 只占用父盒子剩余尺寸