一、媒體查詢（Media Queries）

基本概念
媒體查詢是 CSS3 中用于根據(jù)不同的設(shè)備特性（如屏幕寬度、高度、設(shè)備類型等）應(yīng)用不同樣式規(guī)則的技術(shù)。它允許你為特定的媒體類型（如屏幕、打印、手持設(shè)備等）和條件（如最小寬度、最大寬度等）定義樣式。
例如，你可以為屏幕寬度小于 768px 的設(shè)備（通常是手機(jī)）定義一組樣式，為屏幕寬度在 768px 到 1024px 之間的設(shè)備（平板電腦）定義另一組樣式。
語(yǔ)法結(jié)構(gòu)
媒體查詢的基本語(yǔ)法如下：

@media media - type and (media - feature - rule) {/* CSS樣式規(guī)則 */
}

其中，media - type可以是screen（用于屏幕設(shè)備）、print（用于打印設(shè)備）、handheld（用于手持設(shè)備）等。media - feature - rule是具體的媒體特性規(guī)則，如(max - width: 768px)表示最大寬度為 768px 的設(shè)備。
例如，以下代碼會(huì)在屏幕寬度小于或等于 600px 時(shí)將背景顏色設(shè)置為藍(lán)色：

@media screen and (max - width: 600px) {body {background - color: blue;}
}

常見(jiàn)的媒體特性
屏幕寬度相關(guān)
max - width：指定一個(gè)最大寬度值，當(dāng)屏幕寬度小于或等于這個(gè)值時(shí)，媒體查詢中的樣式規(guī)則生效。例如，(max - width: 480px)適用于屏幕寬度不超過(guò) 480px 的設(shè)備，常用于為手機(jī)等小屏幕設(shè)備設(shè)計(jì)樣式。
min - width：指定一個(gè)最小寬度值，當(dāng)屏幕寬度大于或等于這個(gè)值時(shí)，樣式規(guī)則生效。比如，(min - width: 768px)可以用于為平板電腦及更大屏幕設(shè)備設(shè)計(jì)樣式。
屏幕高度相關(guān)（相對(duì)較少使用，但在某些場(chǎng)景下很有用）
max - height和min - height的作用與寬度相關(guān)特性類似，只是針對(duì)屏幕的高度。例如，在設(shè)計(jì)一個(gè)高度受限的彈出窗口或者全屏應(yīng)用時(shí)，可以使用這些特性來(lái)確保樣式在不同高度的屏幕上都能正常顯示。
設(shè)備方向
orientation: portrait（縱向）和orientation: landscape（橫向）可以根據(jù)設(shè)備的方向應(yīng)用不同的樣式。例如，在手機(jī)從縱向切換到橫向時(shí)，可以改變布局，使內(nèi)容更好地適應(yīng)屏幕。

二、彈性布局（Flexbox）

基本概念
Flexbox 是一種用于在容器中布局子元素的 CSS 布局模型。它提供了一種靈活的方式來(lái)分配空間和對(duì)齊元素，使得布局能夠更好地適應(yīng)不同的屏幕尺寸。
使用 Flexbox，可以輕松地實(shí)現(xiàn)水平和垂直方向的對(duì)齊，以及子元素的自動(dòng)縮放和排列。
關(guān)鍵屬性
容器屬性
display: flex：將一個(gè)元素設(shè)置為 Flex 容器。一旦設(shè)置為 Flex 容器，其內(nèi)部的子元素（稱為 Flex 項(xiàng)目）就可以使用 Flexbox 的布局規(guī)則進(jìn)行排列。
flex - direction：用于指定 Flex 項(xiàng)目的排列方向?？梢允莚ow（水平方向，從左到右）、row - reverse（水平方向，從右到左）、column（垂直方向，從上到下）或column - reverse（垂直方向，從下到上）。
justify - content：用于在主軸（由flex - direction確定）上對(duì)齊 Flex 項(xiàng)目。常見(jiàn)的值有flex - start（默認(rèn)值，項(xiàng)目向主軸起點(diǎn)對(duì)齊）、flex - end（項(xiàng)目向主軸終點(diǎn)對(duì)齊）、center（項(xiàng)目在主軸上居中對(duì)齊）、space - between（項(xiàng)目在主軸上均勻分布，兩端對(duì)齊）和space - around（項(xiàng)目在主軸上均勻分布，每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等）。
align - items：用于在交叉軸（與主軸垂直的軸）上對(duì)齊 Flex 項(xiàng)目。值包括stretch（默認(rèn)值，項(xiàng)目會(huì)拉伸以填充交叉軸方向的容器空間）、flex - start、flex - end和center。
項(xiàng)目屬性
flex - grow：定義 Flex 項(xiàng)目在容器有剩余空間時(shí)的伸展比例。例如，如果有兩個(gè) Flex 項(xiàng)目，一個(gè)flex - grow為 1，另一個(gè)為 2，那么后者將占用剩余空間的三分之二，前者占用三分之一。
flex - shrink：與flex - grow相反，它定義了在容器空間不足時(shí) Flex 項(xiàng)目的收縮比例。
flex - basis：用于指定 Flex 項(xiàng)目在分配多余空間或收縮之前的初始大小。它可以是一個(gè)長(zhǎng)度值（如100px）或一個(gè)百分比。

三、網(wǎng)格布局（Grid Layout）

基本概念
CSS Grid 是一種二維布局系統(tǒng)，它允許你將頁(yè)面劃分為行和列，然后將元素放置在這些網(wǎng)格單元中。網(wǎng)格布局提供了強(qiáng)大的布局控制能力，能夠創(chuàng)建復(fù)雜的頁(yè)面布局，并且在響應(yīng)式設(shè)計(jì)中也非常有用。
關(guān)鍵屬性
容器屬性
display: grid：將一個(gè)元素設(shè)置為網(wǎng)格容器。
grid - template - rows和grid - template - columns：用于定義網(wǎng)格的行和列的大小。例如，grid - template - rows: 100px 200px;表示網(wǎng)格有兩行，第一行高度為 100px，第二行高度為 200px。grid - template - columns的用法類似。
grid - gap：用于設(shè)置網(wǎng)格單元之間的間隙大小?？梢苑謩e設(shè)置行間隙和列間隙，如grid - row - gap和grid - column - gap，也可以使用grid - gap同時(shí)設(shè)置行和列的間隙（grid - gap: 10px 20px;表示行間隙為 10px，列間隙為 20px）。
項(xiàng)目屬性
grid - row - start、grid - row - end、grid - column - start和grid - column - end：這些屬性用于指定項(xiàng)目在網(wǎng)格中的位置，即項(xiàng)目從哪一行 / 列開(kāi)始，到哪一行 / 列結(jié)束。例如，grid - row - start: 2; grid - row - end: 4;表示項(xiàng)目跨越從第二行到第四行（不包括第四行）的網(wǎng)格單元。
grid - area：這是一個(gè)簡(jiǎn)寫屬性，可以同時(shí)指定項(xiàng)目的行和列位置。例如，grid - area: 2/1/4/3;表示項(xiàng)目從第二行第一列開(kāi)始，到第四行第三列結(jié)束。

四、相對(duì)單位（如 vw、vh、% 等）

## vw 和 vh（視口單位）
vw（viewport width）表示視口寬度的 1%，vh（viewport height）表示視口高度的 1%。例如，如果一個(gè)元素的寬度設(shè)置為50vw，那么它的寬度將是視口寬度的 50%。
這些單位在創(chuàng)建全屏幕或基于視口比例的布局時(shí)非常有用。比如，你可以使用vh來(lái)設(shè)置一個(gè)元素的高度，使其始終占據(jù)屏幕高度的一定比例，這樣在不同高度的屏幕上也能保持一致的視覺(jué)效果。
百分比（%）單位
百分比單位是相對(duì)于父元素的尺寸來(lái)計(jì)算的。例如，在一個(gè)容器中，如果一個(gè)子元素的寬度設(shè)置為50%，那么它的寬度將是父元素寬度的一半。
在響應(yīng)式設(shè)計(jì)中，百分比單位可以用于創(chuàng)建靈活的布局。比如，在一個(gè)多列布局中，各列的寬度可以使用百分比來(lái)定義，這樣當(dāng)父容器的寬度發(fā)生變化時(shí)（如在不同屏幕尺寸下），列寬也會(huì)相應(yīng)地調(diào)整。
em 和 rem：
em 是相對(duì)于元素的字體大小，rem 是相對(duì)于根元素（通常是 ）的字體大小。使用它們可以創(chuàng)建基于字體大小的相對(duì)尺寸。
例如，font-size: 1.2em; 會(huì)使元素的字體大小為父元素字體大小的 1.2 倍；font-size: 1.2rem; 會(huì)使元素的字體大小為根元素字體大小的 1.2 倍。