HTML & CSS - 如何讓頁(yè)面成為響應(yīng)式設(shè)計(jì)？

時(shí)間：2023-09-02 22:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-02 22:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

HTML & CSS - 如何讓頁(yè)面成為響應(yīng)式設(shè)計(jì)？：現(xiàn)在的用戶會(huì)用不同的設(shè)備來(lái)瀏覽同一個(gè)頁(yè)面，所以如何讓頁(yè)面適應(yīng)不同的屏幕尺寸是很重要的一件事。本文將會(huì)介紹如何讓頁(yè)面成為響應(yīng)式設(shè)計(jì)。

文章的英文版請(qǐng)戳我的 Medium. To read the article in English, please visit my Medium.

---

1. 媒體查詢 @media

1.1 媒體類型

媒體類型告訴瀏覽器這段代碼使用在什么類型的媒體上的（例如印刷品或屏幕）。媒體類型可以指定為：

1. all： 適用于所有媒體類型。
2. print： 適用于打印預(yù)覽模式。
3. screen： 適用于電腦屏幕、平板、手機(jī)等。
4. speech： 適用于讀出頁(yè)面內(nèi)容的屏幕閱讀器。

1.2 媒體特征規(guī)則

1. 寬和高： 為了讓布局響應(yīng)不同的屏幕尺寸，我們可以用寬（width、 min-width、 max-width）、高（height、 min-height、 max-height）和寬高比（aspect-ratio、 min-aspect-ratio、 max-aspect-ratio）。一旦屏幕尺寸滿足了寬和高的規(guī)則，在其中定義的樣式就會(huì)被應(yīng)用。
2. orientation（朝向）： orientation 屬性可以檢測(cè)設(shè)備是 portrait （豎放，高 >= 寬）或 landscape （橫放， 寬 >= 高）。
3. 像素（resolution、 min-resolution、 max-resolution）： 這個(gè)特征可以用來(lái)測(cè)試輸出設(shè)備的像素密度。像素密度的單位是 dpi （每英寸點(diǎn)數(shù)），你可以用 DPI I love 或 DPI Checker 來(lái)查看你當(dāng)前設(shè)備的像素密度。
4. 使用指點(diǎn)設(shè)備： hover 可以根據(jù)用戶的主要輸入機(jī)制是否可以在元素上懸停， any-hover 可以用來(lái)測(cè)試是否有任意可用的輸入機(jī)制可以在元素上懸停，它們的值可以是 none （沒(méi)有輸入機(jī)制可以方便地懸浮，或不存在定點(diǎn)輸入機(jī)制）或 hover （輸入機(jī)制可以方便地在元素上懸?。?。這兩個(gè)媒體特征適用于移動(dòng)端和 PC 端通用一個(gè)按鈕，但 PC 端需要一個(gè)懸停效果。 pointer 可以測(cè)試用戶的主要輸入機(jī)制是否擁有定點(diǎn)裝置以及它的精確度， any-pointer 可以測(cè)試用戶是否用于任意定點(diǎn)裝飾以及它的精確度，它們的值可以是 none（沒(méi)有可用的定點(diǎn)設(shè)備）、 coarse （有一個(gè)精度有限的定點(diǎn)裝置） 或 fine （有一個(gè)精確的定點(diǎn)裝置）。
5. prefers-color-scheme： prefers-color-scheme 可以檢測(cè)用戶是否有將系統(tǒng)的主題色設(shè)置為 light （亮色）或 dark （暗色）。

1.3 邏輯算符

為了將不同的媒體查詢結(jié)合或是創(chuàng)建立查詢列表，我們可以使用一些邏輯算符。

1. and： 結(jié)合多個(gè)媒體查詢，需要每個(gè)媒體查詢都返回 true。
2. not： 反轉(zhuǎn)整個(gè)媒體查詢的含義。?? 如果用到了 not，需要同時(shí)定義一個(gè)媒體類型。
3. only： 只有整個(gè)查詢符合時(shí)才會(huì)應(yīng)用樣式。 ?? 如果用套了 only，需要同時(shí)定義一個(gè)媒體類型。
4. , （逗號(hào)）： 將多個(gè)媒體查詢結(jié)合成一個(gè)用逗號(hào)分隔的列表，只要列表中的之中一個(gè)媒體查詢返回 true，整個(gè)媒體查詢就會(huì)返回 true。

1.4 媒體查詢

現(xiàn)在，讓我們來(lái)創(chuàng)建一些 CSS 媒體查詢。

/* 屏幕寬度 >= 600px */@media screen and (min-width: 600px) { div { background: lightblue; }}/* 只在打印預(yù)覽模式 */@media only print { h1 { font-size: 30px; }} 如果想要看更多關(guān)于媒體查詢的示例代碼，可以戳我的 CodePen。

可以用 CSS Media Queries 來(lái)查看當(dāng)前設(shè)備滿足的媒體查詢。

引用

媒體查詢?nèi)腴T指南 - 學(xué)習(xí) Web 開(kāi)發(fā) | MDN

CSS Media Queries

找到Web：CSS 媒體查詢（any-hover any-pointer）

---

2. 視口 <meta> 標(biāo)簽

視口時(shí)用戶在頁(yè)面中的可視區(qū)域。 HTML 有 name=viewport 的 <meta> 標(biāo)簽可以控制視口的尺寸。

我們?cè)诖a中最常見(jiàn)的視口 <meta> 標(biāo)簽是：

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 上面代碼中告訴瀏覽器頁(yè)面的寬度和設(shè)備寬度一致（通過(guò) width=device-width），且設(shè)置頁(yè)面初始加載的縮放比為 1 （通過(guò) initial-scale=1.0）。

我們常見(jiàn)被放在 content 屬性里的屬性有：

1. width： width 屬性設(shè)置了視口的寬度。它的值可以是一個(gè)特定的數(shù)字（1 到 10000 之間）或 device-width。
2. height： height 屬性設(shè)置了視口的高度。它的值可以是一個(gè)特定的數(shù)字（1 到 10000 之間）或 device-height。
3. initial-scale： initial-scale 屬性設(shè)置也頁(yè)面初始加載的縮放比。它的值是 0.1 到 10 之間的特定數(shù)字。
4. minimum-scale： minimum-scale 屬性設(shè)置了頁(yè)面最小的縮放比。 它的值是 0.1 到 10 之間的特定數(shù)字。
5. maximum-scale： maximum-scale 屬性設(shè)置了頁(yè)面最大的縮放比。它的值是 0.1 到 10 之間的特定數(shù)字。
6. user-scalable： user-scalable 屬性控制了頁(yè)面是否允許放大和縮小的操作。它的值可以是 yes （允許放大和縮小的操作）或 no （不允許放大和縮小的操作）。

可以用 What is my viewport 查看你當(dāng)前設(shè)備的視口數(shù)據(jù)。

如果想要更完整地了解視口 <meta> 標(biāo)簽，可以看看 MDN - Viewport meta tag 和 W3Schools - Responsive Web Design - The Viewport。

---

3. 響應(yīng)式布局技術(shù)

3.1 彈性盒子布局

在彈性布局模型中，彈性容器的子元素可以在任何方向上排布，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿未使用的空間，也可以收縮尺寸以避免父元素溢出。

定義一個(gè)彈性盒子需要：

1. 將容器設(shè)置為 display: flex; 。
2. 設(shè)置彈性容器和元素的樣式。

以下是一些用來(lái)設(shè)置彈性容器樣式的常用屬性：

1. flex-direction： flex-direction 屬性定義了主軸的方向。它的值可以是 row （如果是 ltr 就是從左到右，如果是 rtl 就是從右到左）、 row-reverse、 column （如果是 ltr 就是從上到下，如果是 rtl 就是從下到上）或 column-reverse 。
2. flex-wrap： flex-wrap 屬性指定了 flex 元素單行顯示（no-wrap）還是多行顯示（wrap 或 wrap-reverse）。
3. justify-content： justify-content 屬性定義了如何分配順著彈性容器主軸的元素之間及其周圍的空間。它的值可以是 flex-start （根據(jù) flex-direction 定義的方向，從行首開(kāi)始排列） 、 flex-end、 center、 space-between （在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素與行首對(duì)齊，每行最后一個(gè)元素與行尾對(duì)齊）、 space-around （在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素到行首的距離和每行最后一個(gè)元素到行尾的距離將會(huì)是相鄰元素之間距離的一半）或 space-evenly （flex 項(xiàng)都沿著主軸均勻分布在指定的對(duì)齊容器中。相鄰 flex 項(xiàng)之間的間距，主軸起始位置到第一個(gè) flex 項(xiàng)的間距，主軸結(jié)束位置到最后一個(gè) flex 項(xiàng)的間距，都完全一樣）。
4. align-items： align-items 屬性設(shè)置彈性項(xiàng)目在其包含塊中在交叉軸方向上的對(duì)齊方式。

以下是一些用來(lái)設(shè)置彈性元素樣式的常用屬性：

1. flex-basis： flex-basis 屬性指定了 flex 元素在主軸方向上的初始大小。
2. flex-grow： flex-grow 屬性設(shè)置了 flex 項(xiàng)主尺寸的 flex 增長(zhǎng)系數(shù)。
3. flex-shrink： flex-shrink 屬性指定了 flex 元素的收縮規(guī)則。

<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div></div>


.flex-container { width: 200px; border: 1px solid blue; display: flex; flex-wrap: wrap; justify-content: center;}.flex-item { width: 50px; height: 50px; background: pink; margin: 10px;} 如果想要看關(guān)于彈性盒子布局的示例代碼，可以戳我的 CodePen - flex 和 CodePen - flex-flow。

如果想要更完整地了解彈性盒子布局，可以看看 MDN - CSS 彈性盒子布局和 CSS-TRICKS - A Complete Guide to Flexbox。

3.2 網(wǎng)格布局

網(wǎng)格是由一系列水平及垂直的線構(gòu)成的一種布局模式。根據(jù)網(wǎng)格，我們能夠?qū)⒃O(shè)計(jì)元素進(jìn)行排列，幫助我們?cè)O(shè)計(jì)一系列具有固定位置以及寬度的元素的頁(yè)面，使我們的網(wǎng)站頁(yè)面更加統(tǒng)一。
一個(gè)網(wǎng)格通常具有許多的列（column）與行（row），以及行與行、列與列之間的間隙，這個(gè)間隙一般被稱為溝槽（gutter）。

定義一個(gè)網(wǎng)格布局需要：

1. 將容器設(shè)置為 display: grid;。
2. 設(shè)置網(wǎng)格容器和元素的樣式。

以下是一些用來(lái)設(shè)置網(wǎng)格容器樣式的常用屬性：

1. grid-template： grid-template 是 grid-template-rows （基于網(wǎng)格行，定義網(wǎng)格線的名稱和網(wǎng)格軌道的尺寸大?。?、 grid-template-columns （基于網(wǎng)格列，定義網(wǎng)格線的名稱和網(wǎng)格軌道的尺寸大?。┖?grid-template-areas （網(wǎng)格區(qū)域在 CSS 中的特定命名）屬性的簡(jiǎn)寫(xiě)屬性。
2. gap： gap 是 row-gap （設(shè)置行元素之間的間隙大?。┖?column-gap （設(shè)置元素列之間的間隙大?。傩缘暮?jiǎn)寫(xiě)屬性。
3. justify-items： justify-items 屬性定義了元素沿行軸線的對(duì)齊方式。它的值可以是 start （與單元格的起始邊緣對(duì)齊所有項(xiàng)）、 end、 center 或 stretch （填滿單元格的全部寬度）。
4. align-items： align-items 屬性定義了元素沿列軸線的對(duì)齊方式。它的值可以是 start、 end、 center、 stretch 或 baseline。

以下是一些用來(lái)設(shè)置網(wǎng)格元素樣式的常用屬性：

1. grid-column： grid-column 是 grid-column-start 和 grid-column-end 屬性的簡(jiǎn)寫(xiě)屬性，通過(guò) <start-line> / <end-line> 定義了網(wǎng)格元素的位置。
2. grid-row： grid-row 是 grid-row-start 和 grid-row-end 屬性的簡(jiǎn)寫(xiě)屬性，通過(guò) <start-line> / <end-line> 定義了網(wǎng)格元素的位置。
3. grid-area： grid-area 屬性定義了網(wǎng)格元素的名字，這樣 grid-template-area 屬性可以通過(guò)這個(gè)名字引用這個(gè)元素。

<div class="grid-container"> <div class="grid-item1">1</div> <div class="grid-item2">2</div> <div class="grid-item3">3</div></div>


.grid-container { display: grid; border: 1px solid red; padding: 10px; grid-template: "a a ." 50px "a a ." 1fr ". b c" 70px ". b ." 20px / 150px 1fr 50px; /* grid-template-rows: 50px 1fr 70px 20px; grid-template-columns: 150px 1fr 50px; grid-template-areas: "a a ." "a a ." ". b c" ". b ."; */}.grid-item1 { grid-area: a; background: lightblue;}.grid-item2 { grid-area: b; background: orange;}.grid-item3 { grid-area: c; background: lightgreen;} 想要看更多關(guān)于網(wǎng)格布局的示例代碼，可以戳我的 CodePen - grid-template、 CodePen - grid-area, grid-column, grid-row 和 CodePen - grid。

如果想要更完整地了解網(wǎng)格布局，可以看看 MDN - 網(wǎng)格和 CSS-TRICKS - A Complete Guide to CSS Grid。

3.3 多列布局

定義多列布局并對(duì)它們應(yīng)用樣式可以用到以下屬性：

1. columns： columns 是 column-count （定義元素的列數(shù)）和 column-width （定義每一列的理想寬度）屬性的簡(jiǎn)寫(xiě)屬性。
2. column-gap： column-gap 屬性設(shè)置了元素列之間的間隔大小。
3. column-rule： column-rule 是 column-rule-width （設(shè)置兩列之間的線條寬度）、 column-rule-style （設(shè)置兩列之間的線條樣式）和 column-rule-color （設(shè)置兩列之間的線條顏色）屬性的簡(jiǎn)寫(xiě)屬性。

.article { columns: 3; /* column-count: 3; */ column-rule: 3px dotted blue; /* column-rule-width: 3px; column-rule-style: dotted; column-rule-color: blue; */ column-gap: 20px;} 如果想看更多關(guān)于多列布局的示例代碼，可以戳我的 CodePen。

如果想要更完整地了解多列布局，可以看看 MDN - 多列布局。

---

4. 響應(yīng)式排版

我們最常用的長(zhǎng)度單位就是 px， 是瀏覽器中準(zhǔn)確的絕對(duì)長(zhǎng)度單位。響應(yīng)式排版會(huì)使用到相對(duì)長(zhǎng)度單位讓長(zhǎng)度可以響應(yīng)不同的字體大小或視口大小。

以下是一些我們最常用的相對(duì)長(zhǎng)度單位：

1. em： 在 font-size 中使用是相對(duì)于父元素的字體大小，在其他屬性中使用是相對(duì)于自身的字體大小。
2. rem： 根元素的字體大小。
3. vw： 視窗寬度的 1%。
4. vh： 視窗高度的 1%。

如果想看關(guān)于相對(duì)長(zhǎng)度單位更多的示例代碼，可以戳我的 CodePen。

這里有一些把 px 轉(zhuǎn)化為 rem 的有效工具：

1. PX to REM converter
2. px to rem （Visual Studio Code 插件）
3. px to rem & rpx & vw (cssrem) （Visual Studio Code 插件）

---

5. 響應(yīng)式圖片

為了讓給你圖片可以適配各種不同的屏幕以及設(shè)備，運(yùn)用響應(yīng)式圖片必不可少。

5.1 使用 HTML srcset 屬性或 CSS image-set() 函數(shù)

<img> 標(biāo)簽支持 srcset 屬性來(lái)為不同像素的設(shè)備加載不同的圖片資源。

srcset 屬性的值是以逗號(hào)分隔的一個(gè)或多個(gè)字符串，每一個(gè)字符串的組杭州是：

1. 圖片文件路徑
2. 可選地，一個(gè)空格之后，附加以下的其一：
1. 一個(gè)寬度描述符（一個(gè)正整數(shù)后面緊跟字母 w）。該整數(shù)寬度處以 sizes 屬性給出的資源大小來(lái)計(jì)算得到的有效的像素密度，即換算成和 x 描述符等價(jià)的值。
2. 一個(gè)像素密度描述符（一個(gè)正浮點(diǎn)數(shù)后面緊跟字母 x）。 你可以用 JavaScript 的 window.devicePixelRatio 來(lái)查看你設(shè)備的像素密度。

<img src="https://www.shareicon.net/data/512x512/2016/06/01/576694_background_600x600.png" srcset="https://www.shareicon.net/data/64x64/2016/06/01/576694_background_600x600.png, https://www.shareicon.net/data/256x256/2016/06/01/576694_background_600x600.png 1.5x, https://www.shareicon.net/data/512x512/2016/06/01/576694_background_600x600.png 2x" alt="Blue Background"/>CSS 的 image-set() 函數(shù)讓瀏覽器從一組圖片資源中選擇最合適當(dāng)前像素屏幕的圖片。

.image { width: 100px; height: 100px; background-image: image-set( url("https://www.shareicon.net/data/64x64/2016/06/01/576694_background_600x600.png") 1x, url("https://www.shareicon.net/data/256x256/2016/06/01/576694_background_600x600.png") 1.5x, url("https://www.shareicon.net/data/512x512/2016/06/01/576694_background_600x600.png") 2x);}

5.2 使用 HTML srcset 和 sizes 屬性

把 srcset 和 sizes 屬性結(jié)合，我們可以定義在不同的屏幕下哪張圖片會(huì)是最適合被展示的。

sizes 屬性的值是以逗號(hào)分隔的一個(gè)或多個(gè)字符串，每一個(gè)資源大小包括：

1. 一個(gè)媒體條件。最后一個(gè)資源大小的媒體條件一定是被忽略的。
2. 一個(gè)資源尺寸的值。

<img src="https://www.shareicon.net/data/512x512/2016/06/01/576694_background_600x600.png" srcset="https://www.shareicon.net/data/64x64/2016/06/01/576694_background_600x600.png 100w, https://www.shareicon.net/data/256x256/2016/06/01/576694_background_600x600.png 200w" sizes="(max-width: 600px) 100px, 200px" alt="Blue Background"/>

5.3 用 CSS padding 和 background 屬性來(lái)按寬高比來(lái)裁剪圖片

一個(gè)需求常常會(huì)要求你按照一定的寬高比來(lái)裁剪圖片，一種實(shí)現(xiàn)方式就是使用 CSS padding 和 background 屬性。

<div class="image-continer"> <!-- 1:1 --> <div id="one-to-one"/></div><div class="image-container"> <!-- 3:4 --> <div id="three-to-four"/></div><div class="image-container"> <!-- 4:3 --> <div id="four-to-three"/></div>


.image-container { width: 200px;}/* 1:1 */#one-to-one { width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background: url(https://www.androidfreeware.net/img2/com-aestheticwallpaper-girlywallpaper-cute-panda-butterflies-kawaii-offlinewallpaper.jpg) center / cover no-repeat;}/* 3:4 */#three-to-four { width: 100%; height: 0; padding-bottom: 133.33%; overflow: hidden; background: url(https://www.androidfreeware.net/img2/com-aestheticwallpaper-girlywallpaper-cute-panda-butterflies-kawaii-offlinewallpaper.jpg) center / cover no-repeat;}/* 4:3 */#four-to-three { width: 100%; height: 0; padding-bottom: 75%; overflow: hidden; background: url(https://www.androidfreeware.net/img2/com-aestheticwallpaper-girlywallpaper-cute-panda-butterflies-kawaii-offlinewallpaper.jpg) center / cover no-repeat;}按比例展示圖片：因?yàn)榘凑瞻俜直葋?lái)設(shè)置 CSS padding 屬性的值時(shí)，百分比是相對(duì)于包含款的寬度，所以我們將寬度 width 設(shè)置成了想要的值，并將高度 height 設(shè)為了0，然后我們可以根據(jù)指定的寬高比將 padding 屬性設(shè)置成相應(yīng)的百分比值。

裁剪圖片：因?yàn)槲覀兪褂昧?<div> 標(biāo)簽來(lái)展示圖片，所以圖片資源被放在了 background 屬性里。我們可以使用 background-size 和 background-position 屬性來(lái)定義我們想展示圖片的哪一部分。

5.4 用 CSS aspect-ratio 和 object-fit 屬性來(lái)按寬高比來(lái)裁剪圖片

另一種實(shí)現(xiàn)按寬高比裁剪圖片的方式就是使用 CSS aspect-ratio 和 object-fit 屬性。aspect-ratio 屬性允許我們將圖片規(guī)定為任何縱橫比，而 object-fit 屬性允許我們?cè)趯捀弑葍?nèi)展示圖片的任何部分。

<!-- 16:9 --><img id="sixteen-to-nine" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80" />


/* 16:9 */#sixteen-to-nine { width: 200px; aspect-ratio: 16 / 9; object-fit: cover;}如果想要更完整地了解這兩個(gè)屬性，可以看看 MDN - aspec-ratio 和 MDN - object-fit。

引用

響應(yīng)式圖片 - 學(xué)習(xí) Web 開(kāi)發(fā) | MDN

https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/

Responsive Images Done Right: A Guide To <picture> And srcset — Smashing Magazine

html中如何讓圖片按比例響應(yīng)式縮放、并自動(dòng)裁剪的css技巧_51CTO博客_html設(shè)置圖片按比例縮放

---

6. 響應(yīng)式框架

線上也有很多響應(yīng)式框架可以直接引用進(jìn)你的項(xiàng)目中啦～

1. Bootstrap
2. Foundation
3. Skeleton
4. UIkit
5. Bulma
6. Semantic UI
7. Materialize
8. MUI (Material UI)