一.移動端的特點
1.移動端和PC端網(wǎng)頁不同點
- PC屏幕大，網(wǎng)頁固定版心
- 手機屏幕小， 網(wǎng)頁寬度多數(shù)為100%
2.谷歌模擬器
使用谷歌模擬器調(diào)試移動端網(wǎng)頁
步驟:用谷歌瀏覽器打開寫好的代碼html文件>>>右鍵點擊檢查>>>在設備工具欄中選擇移動端設備/型號進行模擬調(diào)試
3.分辨率
屏幕尺寸：指的是屏幕對角線的長度，單位一般為英寸；
物理分辨率/設備分辨率：指的就是當前屏幕所擁有的物理像素點的個數(shù)?。?！它是不可被軟件(驅(qū)動)改變，出廠就固定了的；
邏輯分辨率：指的就是設備寬度和高度，單位為像素，設計圖會根據(jù)邏輯分辨率去設計頁面，它是可以被軟件/驅(qū)動所更改的
物理像素點：顯示圖像最小單位
-
PPI：單位英寸內(nèi)所擁有的物理像素點的個數(shù)，像素密度，密度越大，屏幕越清晰
移動端主流設備分辨率:
2.png
制作網(wǎng)頁參考的是邏輯分辨率
4.視口
目標：使用meta標簽設置視口寬度，制作適配不同設備寬度的網(wǎng)頁
添加理想視口標簽: meta:vp
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- viewport 視口
- width=device-width 設備寬度和視口(頁面)寬度相等
- initial-scale=1.0 表示寫多少像素,在頁面中就展示多少像素 不縮放
- minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用戶縮放頁面，防止頁面布局被打亂
5.二倍圖
一個像素需要兩個物理像素來顯示就是二倍圖
移動端大多使用二倍圖,為了高分辨率下圖片不會模糊失真
二.百分比布局
目標： 能夠使用百分比布局開發(fā)網(wǎng)頁
- 百分比布局， 也叫流式布局
- 效果： 寬度自適應，高度固定
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
footer {
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
background-color:pink;
}
footer a {
/* 設置寬高,一行顯示多個 添加浮動 */
/* 浮動元素具有行內(nèi)塊特點 */
float: left;
/* 百分比布局:寬度設置百分比,高度設置具體像素值 */
width: 20%;
height: 50px;
}
footer a img {
width: 100%;
height: 50px;
}
</style>
</head>
<body>
<footer>
<a href="#"><img src="./1.png" alt=""></a>
<a href="#"><img src="./2.png" alt=""></a>
<a href="#"><img src="./3.png" alt=""></a>
<a href="#"><img src="./4.png" alt=""></a>
<a href="#"><img src="./5.png" alt=""></a>
</footer>
</body>
三.Flex布局
1.Flex布局/彈性布局：
- 是一種瀏覽器提倡的布局模型
- 布局網(wǎng)頁更簡單、靈活
- 避免浮動脫標的問題
2.作用
- 基于 Flex 精確靈活控制塊級盒子的布局方式，避免浮動布局中脫離文檔流現(xiàn)象發(fā)生。 - Flex布局非常適合結(jié)構(gòu)化布局
3.設置方式
- 父元素添加 display: flex，子元素可以自動的擠壓或拉伸
4.組成部分
- 彈性容器:添加display:flex的盒子
特點:寬度和父元素一樣,高度由內(nèi)容撐開 - 彈性盒子 :彈性容器最近一級的子元素
特點:
1.默認寬度由內(nèi)容撐開,默認高度為父元素高度(側(cè)軸方向默認是拉伸的)
2.沒有 塊級,行內(nèi),行內(nèi)塊元素之分,通通都是彈性盒子 可直接設置寬高 一行顯示多個 - 主軸: justify-content
- 側(cè)軸 / 交叉軸:align-items
5.主軸對齊方式
修改主軸對齊方式屬性: justify-content
.box {
/* 添加彈性布局 df */
display: flex;
/* 改變主軸對齊方式 */
/* flex-star 默認值, 從父元素左邊開始顯示 */
/* justify-content: flex-start; */
/* flex-end 顯示在彈性容器右側(cè) */
/* justify-content: flex-end; */
/* center 顯示在彈性容器中間,沿主軸居中 */
/* justify-content: center; */
/* space-around 讓空白空間環(huán)繞在彈性盒子的兩側(cè),第一個和最后一個彈性盒子離彈性容器的距離為彈性盒子與彈性盒子之間的距離的1/2 */
/* justify-content: space-around; */
/* space-between 讓空白空間分布在彈性盒子與彈性盒子之間 第一個和最后一個彈性盒子離彈性容器的距離為0 */
/* justify-content: space-between; */
/* space-evenly 彈性盒子離彈性容器之間的距離與彈性盒子與彈性盒子的距離相對 */
justify-content: space-evenly;
width: 1000px;
height: 600px;
background: orange;
}
6.側(cè)軸對齊方式
使用align-items調(diào)節(jié)元素在側(cè)軸的對齊方式
.box {
/* 添加彈性布局 */
display: flex;
/* 側(cè)軸對齊方式 ai*/
/* 默認值 flex-start 從起點開始排列 */
/* align-items: flex-start; */
/* flex-end 從終點排列 */
/* align-items: flex-end; */
/* center 垂直居中 */
align-items: center;
/* 默認值 stretch 垂直拉伸:沿著側(cè)軸垂直方向拉伸彈性盒子的高度直到和父元素一樣高 */
/* align-items: stretch; */
width: 1000px;
height: 600px;
background: orange;
}
7.伸縮比
使用flex屬性修改彈性盒子伸縮比
屬性: flex:值(整數(shù))
伸縮比flex給彈性盒子添加
1.所以彈性盒子都添加flex,
- flex值相同均分彈性容器的寬度
- flex值不同則按例比分配
2.其他盒子的寬度固定,只有一個盒子設置flex:1 占據(jù)父元素剩余寬度
8.擴展
浮動不能配合彈性使用,定位可以和浮動一起使用
文字溢出兩行以省略號顯示:(要幾行,把2改成幾)
{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
