移動(dòng)端特點(diǎn)
移動(dòng)端與pc端網(wǎng)頁(yè)的差別
pc端屏幕大,有固定版心.
移動(dòng)端多數(shù)是手機(jī),屏幕小,網(wǎng)頁(yè)多數(shù)為百分比布局
分辨率
屏幕尺寸
指的是對(duì)角線的長(zhǎng)度,一般用英寸度量
分辨率分類(lèi):
- 物理分辨率是生產(chǎn)屏幕時(shí)就固定的，它是不可被改變的
- 邏輯分辨率是由軟件（驅(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尺寸蒋院。
視口代碼
viewport：視口
width=device-width：視口寬度 = 設(shè)備寬度
initial-scale=1.0：縮放1倍（不縮放）
二倍圖
能夠使用像素大廚軟件測(cè)量二倍圖中元素的尺寸
flex布局
優(yōu)勢(shì):
- 是瀏覽器提倡的布局模型
- 布局網(wǎng)頁(yè)更靈活, 簡(jiǎn)單
- 避免浮動(dòng)脫標(biāo)的問(wèn)題
作用:
- 基于 Flex 精確靈活控制塊級(jí)盒子的布局方式，避免浮動(dòng)布局中脫離文檔流現(xiàn)象發(fā)生莲绰。
- Flex布局非常適合結(jié)構(gòu)化布局
設(shè)置方式:
父元素添加 display: flex欺旧，子元素可以自動(dòng)的擠壓或拉伸
組成:
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)值, 彈性盒子沿著主軸線被拉伸至鋪滿(mǎn)容器
flex屬性修改彈性盒子伸縮比
flex : 值(整數(shù))
注意 : 只占用父盒子剩余尺寸
