-
移動(dòng)端特點(diǎn)(了解即可)
1.移動(dòng)端和PC端網(wǎng)頁(yè)不同點(diǎn):
PC屏幕大，網(wǎng)頁(yè)固定版心
手機(jī)屏幕小， 網(wǎng)頁(yè)寬度多數(shù)為100%
2.谷歌模擬器:
利用谷歌模擬器可以在電腦里面邊寫代碼邊調(diào)試移動(dòng)端網(wǎng)頁(yè)效果
3.分辨率:
屏幕尺寸：指的是屏幕對(duì)角線的長(zhǎng)度，單位一般為英寸；
物理分辨率/設(shè)備分辨率：指的就是當(dāng)前屏幕所擁有的物理像素點(diǎn)的個(gè)數(shù)?。。∷遣豢杀卉浖?驅(qū)動(dòng))改變，出廠就固定了的；
邏輯分辨率：指的就是設(shè)備寬度和高度，單位為像素，設(shè)計(jì)圖會(huì)根據(jù)邏輯分辨率去設(shè)計(jì)頁(yè)面，它是可以被軟件/驅(qū)動(dòng)所更改的
物理像素點(diǎn)：顯示圖像最小單位
PPI：?jiǎn)挝挥⒋鐑?nèi)所擁有的物理像素點(diǎn)的個(gè)數(shù)，像素密度，密度越大，屏幕越清晰
提醒：制作網(wǎng)頁(yè)參考的是邏輯分辨率
4.視口
手機(jī)屏幕尺寸都不同， 網(wǎng)頁(yè)寬度應(yīng)該設(shè)為100%，讓網(wǎng)頁(yè)的寬度和邏輯分辨率尺寸相同。(默認(rèn)情況下，網(wǎng)頁(yè)的寬度和邏輯分辨率不同，默認(rèn)網(wǎng)頁(yè)寬度是980px。)
問題：如何讓網(wǎng)頁(yè)寬度和設(shè)備寬度(分辨率)相同。
解決辦法：添加視口標(biāo)簽。
視口：顯示HTML網(wǎng)頁(yè)的區(qū)域，用來(lái)約束HTML尺寸。
語(yǔ)法：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
說明：
width=device-width ---- 設(shè)備的寬度和視口(頁(yè)面)寬度相等
initial-scale=1.0 ---- 表示現(xiàn)在寫多少像素，在頁(yè)面之中就展示多少像素，不允許縮放
minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用戶縮放頁(yè)面，防止頁(yè)面布局被打亂
5.二倍圖
使用二倍圖目的: 為了在高分辨率下圖片不會(huì)模糊失真
-
百分比布局
百分比布局， 也叫流式布局
效果： 寬度自適應(yīng)，高度固定。
-
Flex布局
1.說明
Flex布局， 又叫彈性布局：
是一種瀏覽器提倡的布局模型
布局網(wǎng)頁(yè)更簡(jiǎn)單、靈活
避免浮動(dòng)脫標(biāo)的問題
2.作用：
基于 Flex 精確靈活控制塊級(jí)盒子的布局方式，避免浮動(dòng)布局中脫離文檔流現(xiàn)象發(fā)生，F(xiàn)lex布局非常適合結(jié)構(gòu)化布局。
3.彈性布局相對(duì)于浮動(dòng)布局：
①?zèng)]有需要清除浮動(dòng)；
②布局更加的靈活
4.設(shè)置方式：
父元素添加 display: flex，子元素可以自動(dòng)的擠壓或拉伸
5.組成部分：
①?gòu)椥匀萜鳎涸O(shè)置了display: flex的父盒子，默認(rèn)寬度和父元素寬度一樣，默認(rèn)的高度由內(nèi)容所撐開
②彈性盒子：彈性容器的最近一級(jí)子元素(僅限于親兒子子元素)
- 默認(rèn)的寬度由內(nèi)容所撐開，默認(rèn)的高度為父元素的高度(側(cè)軸方向默認(rèn)是拉伸)；
- 沒有塊級(jí)，行內(nèi)，行內(nèi)塊元素之分，統(tǒng)統(tǒng)都是彈性盒子(可以直接設(shè)置寬高，一行顯示多個(gè))；
- 默認(rèn)不換行，寧愿犧牲自己的寬度，都不會(huì)自動(dòng)換行
③主軸：調(diào)節(jié)主軸的對(duì)齊方式來(lái)設(shè)置盒子之間的間距。(寫在父盒子里面)
④側(cè)軸 / 交叉軸：調(diào)節(jié)側(cè)軸的對(duì)齊方式來(lái)設(shè)置盒子之間的間距。(寫在父盒子里面)
6.主軸對(duì)齊方式：
修改主軸對(duì)齊方式屬性: justify-content
屬性值:
①flex-start: 默認(rèn)值，從父元素的左邊開始顯示
書寫: justify-content: flex-start;
②flex-end: 讓彈性盒子整體，顯示在彈性容器的右側(cè)
書寫: justify-content: flex-end;
③center: 讓彈性盒子整體，顯示在彈性容器的中間
書寫: justify-content: center;
④space-around 讓空白空間環(huán)繞在彈性盒子的兩側(cè)，第一個(gè)和最后一個(gè)彈性盒子離彈性容器的距離為彈性盒子與彈性盒子之間的距離的1/2
書寫: justify-content: space-around;
⑤space-between 讓空白空間分布在彈性盒子與彈性盒子之間---第一個(gè)和最后一個(gè)彈性盒子離彈性容器的距離為0
書寫: justify-content: space-between;
⑥space-evenly 彈性盒子離彈性容器之間的距離與彈性盒子與彈性盒子之間的距離相等
書寫: justify-content: space-evenly;
7.側(cè)軸對(duì)齊方式：
修改側(cè)軸對(duì)齊方式屬性:
align-items： 添加到彈性容器，控制所有彈性盒子的整體排布
align-self： 單獨(dú)控制某個(gè)彈性盒子在側(cè)軸的對(duì)齊方式（添加到彈性盒子）
注意：
align-self的屬性值和align-items是一樣的
屬性值:
注意:
stretch 垂直拉伸：沿著側(cè)軸(垂直)方向拉伸彈性盒子的高度直到父元素一樣高(讓子盒子和父盒子一樣高)，但此時(shí)的彈性盒子不能設(shè)置高度(高度空著不寫,也不能寫為0)
8.伸縮比:
使用flex屬性修改彈性盒子伸縮比
屬性： flex : 值;
取值分類： 數(shù)值(整數(shù))
伸縮比：flex 給彈性盒子添加
①所有的彈性盒子都添加相同的flex值，均分彈性容器的寬度；如果flex值不同，根據(jù)比例進(jìn)行分配
②其他的盒子寬度固定，只有一個(gè)盒子設(shè)置了flex:1 --- 占據(jù)父元素剩余的所有寬度
注意： flex值只占用父盒子剩余尺寸
9.總結(jié)
彈性容器設(shè)置的屬性： display: flex，justify-content，align-items
彈性盒子設(shè)置的屬性：align-self，flex
-
補(bǔ)充
1.單詞
2.每日一句鼓勵(lì)自己的話:
很多時(shí)候不是你做不到,而是你放棄了
