免費AI編程助手
當互聯(lián)網(wǎng)剛開始蓬勃發(fā)展時，網(wǎng)站訪問者使用臺式機或者寬屏筆記本電腦來訪問網(wǎng)站。然后當智能手機出現(xiàn)時，手機用戶不得不無休止地縮放和滾動才能訪問和查看相同網(wǎng)站的不同部分。值得慶幸的是，由于響應式網(wǎng)頁設計的革命性引入，如今情況已不再如此。在本文中，我將帶您了解響應式網(wǎng)頁設計的演變、使其成為可能的各種集成，以及如何開始在您的編碼項目中使用它以獲得更好的用戶體驗。
什么是響應式網(wǎng)頁設計？
響應式網(wǎng)頁設計使網(wǎng)頁可以在各種設備屏幕尺寸上正確呈現(xiàn)，而不會縮短或扭曲內容。
例如，這并不意味著網(wǎng)站在手機上的顯示方式與在筆記本電腦上的顯示方式完全相同。相反，它意味著網(wǎng)頁的內容適應不同的屏幕尺寸——從大屏幕（臺式機和筆記本電腦）到中屏幕（平板電腦）再到移動屏幕（各種屏幕尺寸的手機）。
它在保留相同內容的同時做到了這一切（只是可能以不同的方式排列以適應每個屏幕）。
響應式網(wǎng)頁設計的演變
過去，人們主要使用臺式機和筆記本電腦在線查看內容，因為網(wǎng)站僅針對這些屏幕進行了優(yōu)化。
但隨著越來越多的人開始使用手機上網(wǎng)，人們開始抱怨他們所看到的糟糕的顯示和布局。
這對網(wǎng)頁設計師和開發(fā)人員意味著一件事：網(wǎng)站也需要針對移動設備進行優(yōu)化！
在過去十年中，移動網(wǎng)站用戶數(shù)量首次開始超過臺式機和筆記本電腦。因此，從科技巨頭到小型企業(yè)，每個人都開始采用響應式網(wǎng)頁設計方法。
開發(fā)人員和設計師還創(chuàng)造了閃亮的新移動優(yōu)先設計。這意味著開發(fā)人員首先為移動設備制作網(wǎng)站，然后是桌面。
這通常意味著移動設備和更大屏幕的單獨網(wǎng)站，具有相同的服務器系統(tǒng)但不同的域。
例如，原始網(wǎng)站可能是examplewebsite.com，而移動版本可能是examplewebsite.mobi、 或m.examplewebsite.com。
用戶的設備將被現(xiàn)成的腳本檢測到，然后相應的域將被呈現(xiàn)。這種做法今天仍然存在。
除了雙域方法，網(wǎng)頁設計師和開發(fā)者可以先針對特定屏幕尺寸（可以是桌面、平板電腦或移動設備）創(chuàng)建一個網(wǎng)站，然后添加所謂的媒體查詢，使網(wǎng)站適應不同的屏幕尺寸。這是移動優(yōu)先的方法。
如何使您的網(wǎng)站響應
將響應式網(wǎng)頁設計方法集成到項目中包括代碼的每一部分——在 HTML<head>元素、HTML 結構、CSS 甚至 JavaScript 中。
我將盡可能清楚和詳細地描述這些過程。
在頭部設置視口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
由于 HTML 在定義網(wǎng)頁結構方面發(fā)揮著重要作用，因此它肯定與使網(wǎng)站響應（適應）不同屏幕尺寸有關。
您需要在要針對不同屏幕尺寸進行優(yōu)化的任何網(wǎng)頁的頭部部分中包含元視口空元素。
這告訴瀏覽器將網(wǎng)頁的寬度呈現(xiàn)為設備的確切寬度。因此，如果設備的寬度為 1200 像素，則網(wǎng)頁寬度將為 1200 像素。如果設備的寬度為 720 像素，則網(wǎng)頁寬度將為 720 像素，依此類推。
這可以防止手機用戶過去遇到的煩人的放大和縮小，這對用戶體驗不利。
以下是網(wǎng)站在沒有<meta>視口元素的小型手機上的外觀：
以下是帶有<meta>viewport 元素的同一個網(wǎng)站在小型手機上的顯示效果：
但是<meta>視口元素并不是讓網(wǎng)站適應不同屏幕尺寸所需的全部元素。還有更多。
CSS 媒體查詢
用于使站點具有響應性的最重要工具是 CSS3 媒體查詢。媒體查詢允許您以不同方式為多個屏幕編寫相同的 CSS 代碼。
通過媒體查詢，您可以告訴瀏覽器在特定屏幕上以特定方式顯示內容。
媒體查詢的基本語法如下所示：
@media screen and (max-width: 720px) {
/*CSS codes go here*/
}
這告訴瀏覽器在屏幕寬度低于 720 像素斷點時執(zhí)行媒體查詢中編寫的 CSS 代碼。斷點通常可以是 1200 像素到 320 像素之間的任何值。
在下面的代碼片段中，我指示瀏覽器在屏幕寬度低于 768 像素時將更改為background-color深灰色和color藍色。
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
delectus molestiae!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
consectetur molestias unde fugit dolorum alias temporibus expedita
doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
consequuntur placeat maiores voluptas, quos esse eum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>
</body>
@media screen and (max-width: 768px) {
body {
background-color: #333;
color: #3498db;
}
}
不同的設備還存在其他幾個斷點。
- 320 - 480px 適用于 iPhone 6、7 和 5 等小型手機
- 478 - 768px 適用于平板電腦和 iPad
- 1025 - 1200px 適用于桌面和大屏幕
一些超大屏幕和電視可能需要超過 1200 像素。
響應式文本
由于移動電話上的文本大小與桌面上的文本大小不同，因此必須使文本隨著設備屏幕寬度的減小而縮小。
您可以在每個屏幕的媒體查詢中執(zhí)行此操作。一種使其更容易的方法是使用相對單位（%、rem 和 em）而不是絕對單位，例如 px。
在下面的 HTML 和 CSS 代碼片段中，我指示瀏覽器在大屏幕上將文本的字體大小設置為 3rem，在寬度低于 768 像素的屏幕上設置為 1.5rem：
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
delectus molestiae!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
consectetur molestias unde fugit dolorum alias temporibus expedita
doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
consequuntur placeat maiores voluptas, quos esse eum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>
@media screen and (max-width: 768px) {
p {
font-size: 1.5rem;
}
}
響應式圖像
就像文本一樣，圖像也必須隨著屏幕寬度的減小而縮小。
圖像具有固定的寬度和高度，因此當它們大于視口寬度（屏幕寬度）時，用戶通常必須滾動才能看到整個內容，這會造成糟糕的用戶體驗。
開發(fā)人員通過為所有圖像設置 100% 的最大寬度并將它們顯示為塊級元素（默認情況下圖像是內聯(lián)元素）來解決這個問題。
您可以為代碼中的圖像單獨設置此項，但為了培養(yǎng) DRY（不要重復自己）原則，您應該在所有圖像的重置中進行設置。
img {
display: block;
max-width: 100%;
}
使圖像具有響應性的另一種方法是使用 HTML 中的圖片元素。使用此元素，您可以告訴瀏覽器顯示與不同設備上的寬度相關的不同圖像。
<picture>
<source
media="(max-width: 1100px)"
srcset="freecodecamp-large-logo.jpg"
/>
<source
media="(max-width: 900px)"
srcset="freecodecamp-medium-logo.jpg"
/>
<source media="(max-width: 760px)" srcset="freecodecamp-small-logo.jpg" />
<img
src="freecodecamp-large-logo.jpg"
alt="freeCodeCamp"
style="max-width: 100%"
/>
</picture>
- 在寬度為 1100px 及以下的屏幕上，將顯示 freecodecamp-large-logo
- 在寬度為 900px 及以下的屏幕上，將顯示 freecodecamp-medium-logo
- 在寬度為 760px 及以下的屏幕上，將顯示 freecodecamp-small-logo
如果屏幕寬度不滿足任何條件，則將顯示 freecodecamp-large-logo。
響應式布局
任何網(wǎng)頁的布局決定了內容在瀏覽器中的顯示方式。
過去，開發(fā)人員不得不使用表格，這并不容易控制。然后來了float和clearfix，這也很難管理。
CSS Grid 和 Flexbox 的引入徹底改變了布局，并為響應式設計提供了更多的相關性。
彈性盒
使用 CSS flexbox，響應式設計獲得了更多的相關性，因為有了它，您不必添加太多媒體查詢，這與使用浮動布局時不同。
當 flex 的顯示被分配給包含元素時，默認情況下元素方向在行上呈現(xiàn)。
您可以稍后使用媒體查詢將方向設置為具有 flex-direction 屬性的較小屏幕的列。必須將 flex-direction 屬性值顯式設置為列。
您還可以使用 flex-grow 和 flex-shrink 等屬性以您希望網(wǎng)頁內容呈現(xiàn)的方式進行布局。這兩個屬性使它們包含的元素隨著屏幕視口（寬度）的增加而增長，隨著視口的減少而縮小。多么酷??？
在下面的代碼片段中，不同文本塊在各自容器中的方向將在屏幕寬度大于 768 像素時為一行，在寬度小于 768 像素時為一列。
我能夠通過將 body 元素內的整個項目顯示為 flex 來做到這一點。
<body>
<div class="container-one">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
delectus molestiae!
</p>
</div>
<div class="container-two">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
consectetur molestias unde fugit dolorum alias temporibus expedita
doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
consequuntur placeat maiores voluptas, quos esse eum.
</p>
</div>
<div class="container-three">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>
</div>
</body>
body {
display: flex;
}
div {
border: 2px solid #2ecc71;
margin-left: 6px;
}
@media screen and (max-width: 768px) {
body {
flex-direction: column;
}
}
CSS 網(wǎng)格
CSS grid 或多或少是 flexbox 的一種混合且更強大的形式。許多人爭辯說，無論您使用 Flexbox 做什么，您都可以使用 Grid 以更少的代碼行完成。
使用 CSS 網(wǎng)格，您可以以更直接的方式創(chuàng)建靈活的網(wǎng)格，因為您可以使用設置為列或行的 grid-auto-flow 屬性定義所需的列和行。
您可以使用 Grid 以這種方式執(zhí)行我們在 Flexbox 示例中所做的相同操作：
body {
display: grid;
grid-auto-flow: column;
gap: 6px;
}
div {
border: 2px solid #2ecc71;
margin-left: 6px;
}
@media screen and (max-width: 768px) {
body {
grid-auto-flow: row;
}
}
您可以在 W3Cschool CSS 課程中了解有關 Flexbox 和 Grid 的更多信息。
結論
由于互聯(lián)網(wǎng)用戶現(xiàn)在更多地通過手機訪問網(wǎng)站而不是臺式機和筆記本電腦，因此響應式設計是制作現(xiàn)代網(wǎng)站的必經(jīng)之路。
了解響應式設計最佳實踐將使您與其他開發(fā)人員區(qū)別開來，因為您將能夠在相同的 HTML、CSS 和 JavaScript 文件中創(chuàng)建適應不同屏幕尺寸的網(wǎng)站。
我希望這篇文章為您提供了制作響應式真實網(wǎng)站所需的見解。
感謝您的閱讀。
