1.視口
視口標簽
視口元標簽（Viewport Meta Tag）用于控制網頁在移動設備上的視口行為，確保頁面能夠正確縮放和調整。通常在HTML的<head>部分添加如下代碼：
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
| 屬性 | 解釋說明 |
|---|---|
| width | 寬度設置的是viewport寬度，可以設置device-width特殊值 |
| initial-scale | 初始縮放比，大于0的數字 |
| maximum-scal | 最大縮放比，大于0的數字 |
| minimum-scale | 最小縮放比，大于0的數字 |
| user-scalable | 用戶是否可以縮放，yes或no（1或0） |
標準的viewport設置：
- 視口寬度和設備保持一致
- 視口的默認縮放比例1.0
- 不允許用戶自行縮放
- 最大允許的縮放比例1.0
- 最小允許的縮放比例1.0
2.二倍圖
在網頁開發中，尤其是在設計高分辨率屏幕（如Retina顯示屏）上使用的圖像時，使用二倍圖（2x圖像）是一個常見的做法。二倍圖的概念主要是為了適應高分辨率屏幕，確保圖像在這些屏幕上看起來清晰銳利。以下是關于CSS二倍圖的一些關鍵點和使用方法：
什么是二倍圖？
二倍圖（@2x images）是指其分辨率是標準分辨率圖像的兩倍的圖像。例如，如果標準圖像的尺寸是100x100像素，那么二倍圖的尺寸則是200x200像素。
為什么需要二倍圖？
高分辨率屏幕（如Retina屏）上的像素密度比普通屏幕高，這意味著同樣大小的區域上有更多的像素。如果直接在高分辨率屏幕上使用標準分辨率的圖像，這些圖像可能會顯得模糊不清。因此，使用二倍圖可以確保圖像在高分辨率屏幕上看起來更加清晰銳利。
背景縮放 background-size
background-size: 背景圖片寬度 背景圖片高度;
- 單位： 長度|百分比|cover|contain;
- cover把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。
- contain把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域
3.flex布局
基本概念
Flexbox布局包括兩個主要組件：容器（container）**和**項目（items）。容器是Flexbox布局的父元素，項目是其直接子元素。
設置Flex容器
通過將容器的display屬性設置為flex或inline-flex來啟用Flexbox布局：
.container {display: flex; /* 或者 inline-flex */
}1.父項常見屬性
flex-direction：定義主軸（main axis）的方向及項目的排列方向。
row（默認值）：從左到右。row-reverse：從右到左。column：從上到下。column-reverse：從下到上。
.container {flex-direction: row;
}justify-content：定義項目在主軸上的對齊方式。
flex-start（默認值）：從起點對齊。flex-end：從終點對齊。center：居中對齊。space-between：兩端對齊，項目間隔均勻（先兩邊貼邊，再平分剩余空間）。space-around：項目周圍間隔均勻（平分剩余空間）。space-evenly：項目之間的間隔均勻。
.container {justify-content: center;
}
flex-wrap：控制項目是否在主軸上溢出時換行。
nowrap（默認值）：不換行（此時若是容納不下，則會縮小子盒子的寬度）。wrap：換行。wrap-reverse：反向換行。
.container {flex-wrap: wrap;
}
align-items：定義項目在側軸上的對齊方式，在子項為單項（單行）的時候使用。
stretch（默認值）：如果項目未設置高度或設置為auto，則拉伸項目以填充容器。flex-start：對齊到側軸的起點。flex-end：對齊到側軸的終點。center：居中對齊。baseline：項目的第一行文字基線對齊。
.container {align-items: center;
}
align-content：設置側軸上的子元素的排列方式（多行）。如果只有一根軸線，此屬性不起作用。（在有換行的時候使用）
stretch（默認值）：軸線填充側軸。flex-start：對齊到從側軸的起點。flex-end：對齊到側軸的終點。center：居中對齊。space-between：子項在側軸先分布在兩頭，再平分剩余空間。space-around：子項在側軸平分剩余空間。space-evenly：軸線之間的間隔均勻。
.container {align-content: space-between;
}flex-flow：是flex-direction和flex-wrap的簡寫。
.container {flex-flow: row wrap;
}
2.子項常見屬性
flex：是flex-grow、flex-shrink和flex-basis的簡寫。
flex-grow: 1：表示該項目可以占據父容器中剩余的空間。如果有多個項目的flex-grow值都設置為1，這些項目將平分剩余的空間。例如，如果一個容器中有兩個項目，它們的flex-grow都為1，那么它們將平分多余的空間。flex-shrink: 1：表示當父容器的空間不足時，該項目可以縮小。如果所有項目的flex-shrink值都為1，這些項目將等比例地縮小以適應父容器的空間。flex-basis: 0%：表示項目的初始大小為 0。這意味著項目的大小完全由flex-grow屬性決定，并且沒有初始空間分配。
.item {flex: 1 1 100px;
}
align-self：允許單個項目在側軸上有不同的對齊方式，覆蓋align-items屬性。默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。
auto（默認）：繼承父容器的align-items值。flex-start：項目在交叉軸的起點對齊。flex-end：項目在交叉軸的終點對齊。center：項目在交叉軸的中心對齊。baseline：項目的文本基線對齊。stretch：如果項目未設置高度或高度為auto，則項目拉伸以填充容器。
.item {align-self: flex-end;
}
order：定義項目的排列順序。默認值為0，值越小越靠前。
.item {order: 1;
}
4.rem布局
1.rem單位
REM單位是相對于根元素（通常是 <html> 元素）的字體大小來計算的。如果根元素的字體大小為16px，那么1rem就等于16px。如果根元素的字體大小為20px，那么1rem就等于20px。
/* 根html 為 12px */
html {font-size: 12px;
}
/* 此時 div 的字體大小就是 24px */
div {font-size: 2rem;
}
2.媒體查詢
媒體查詢（Media Queries）是CSS3中引入的一種強大的技術，它允許根據設備特性（如屏幕寬度、設備類型、屏幕分辨率等）來應用不同的CSS樣式。這使得網站能夠在不同設備上提供適當的布局和樣式，從而實現響應式設計。
基本語法
@media mediatype and (media feature) {/* CSS rules */
}
- mediatype：媒體類型，如
screen（屏幕）、print（打印機）、all等。 - 關鍵字:
and not only - media feature：媒體特性，如
width、min-width、max-width等。 - CSS rules：根據媒體查詢條件應用的CSS規則。
關鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件。
and：可以將多個媒體特性連接到一起，相當于“且”的意思。
not：排除某個媒體類型，相當于“非”的意思，可以省略。
only：指定某個特定的媒體類型，可以省略。
常用的媒體特性
width和height：設備寬度和高度。min-width和min-height：最小設備寬度和高度。max-width和max-height：最大設備寬度和高度。orientation：設備方向，如portrait（縱向）和landscape（橫向）。aspect-ratio：設備寬高比。device-aspect-ratio：設備的物理寬高比。resolution：設備分辨率。
引入資源
可以在引入css文件的時候加上媒體查詢，表示在該條件下引用這個css文件
語法規范：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
示例：
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">
介紹)
 A~D)
