我們與網絡互動的方式發生了翻天覆地的變化，而且還會不斷變化。
過去，大多數人使用台式電腦上網。但如今，人們正在使用各種各樣的裝置，包括筆記本電腦、平闆電腦和智能手機。這導緻對響應式網頁設計的需求不斷增長。
響應式網頁設計是一種設計方法，可確定網站在所有裝置上看起來都不錯并且功能正常。這是通過使用流暢的布局和媒體查詢來使網站适應不同的螢幕尺寸來完成的。
使用響應式網頁設計有很多好處。首先，它為每個人提供了更好的使用者體驗。當網站響應時，使用者可以從任何裝置通路它，而無需放大或水準滾動。這使得閱讀内容和浏覽網站變得更加容易。
建立在筆記本電腦上看起來不錯并且不考慮其他使用者裝置的網站的日子已經一去不複返了。
是以你可以說響應式網頁設計是一種建議設計和開發應該根據螢幕尺寸、平台和方向響應使用者的行為和環境的方法。
在本教程中，我将解釋一些您在建構響應式網站時應該記住的最重要的細節
（前端教程：https://www.java567.com/search.html?sWord=%E5%89%8D%E7%AB%AF&v=2306013）
建構響應式網站時應用的 5 條原則
在建構下一個網站以使其響應時，您應該考慮許多原則。以下是我認為特别重要的五個。
我不會詳細介紹其中的每一個。這更像是一個概述，可以在您建構時牢記在心。
使用媒體查詢
建立響應式網站的最基本方法之一是使用媒體查詢。媒體查詢可幫助您為您的網站定義不同的斷點。
響應式設計中的斷點是網站内容和設計将以某種方式進行調整以提供最佳使用者體驗的“點”。這些斷點可幫助您根據使用者螢幕的大小指定要使用的不同 CSS 屬性。
斷點的常見示例包括 480px、768px、1024px 和 1280px。 但是您不能為所有不同的螢幕定義斷點。是以，開發人員通過定義兩個（移動桌面）到三個（移動平闆電腦桌面）不同的斷點來工作。然後連同我們将在下面讨論的其他屬性，您可以為每個斷點定義各種樣式。
以下是建構網站時如何使用媒體查詢的典型示例。我假設您想建構一個主布局和一個旁路布局。
代碼應如下所示：
.wrapper{
width:100%;
display:flex;
}
.main {
width:80%;
height:100px;
background:blue;
display:flex;
justify-content: center;
align-items: center;
}
.aside{
height:100px;
background:red;
width:20%;
display:flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="wrapper">
<main class="main">
<h1>MAIN</h1>
</main>
<aside class="aside">
<h1>ASIDE</h1>
</aside>
</div>
</body> 但是您必須考慮到一些使用者可能會嘗試在智能手機上檢視網站，因為智能手機的螢幕比您的桌面系統小得多。
為了即使在螢幕較小的裝置上也能看起來不錯，您可以使用媒體查詢來完全删除旁邊的欄，或者您可以将它放在主要内容區域的下方。
這取決于您和您認為您的使用者可能希望看到的内容或旁邊的資訊類型。這隻是為了幫助您考慮各種選擇——記住您是一個問題解決者，解決問題的方法很少。是以選擇最适合你的。
對于較小的螢幕，在此示例中，我們将使用媒體查詢将旁邊欄放在主區域下方。
在建構網站時，在開始編碼之前應該問一個問題。您是先為移動裝置還是桌面裝置建構？這個問題非常重要，因為它将決定你如何建構你的 CSS。
我個人喜歡先移動，因為我知道大多數人會在智能手機上檢視我的網站，是以我想先完善它。我知道這場辯論已經持續了一段時間，但這取決于您和您網站的需求。
使用媒體查詢，我們會這樣做來更改代碼的布局，以便它在智能手機和桌面上看起來都不錯：
<style>
.wrapper > div {
display:flex;
justify-content: center;
align-items: center;
}
.main {
width:100%;
height:100px;
background:blue;
}
.aside{
height:100px;
background:red;
width:100%;
}
@media (min-width:600px) {
.wrapper{
width:100%;
display:flex;
}
.main {
width:80%;
}
.aside{
width:20%;
}
}
</style>
<body>
<div class="wrapper">
<div class="main">
<h1>MAIN</h1>
</div>
<div class="aside">
<h1>ASIDE</h1>
</div>
</div>
</body> 這裡有幾件事需要注意（但同樣，這并不是關于媒體查詢的深入教程，是以我們不會深入細節）。
使用媒體查詢時，您可以定義min-width或max-width。
在 min-width 容器内編寫的代碼是我們想要應用到該寬度及以上的代碼——在這種情況下，對于 wrapper ，僅當使用者螢幕的寬度為**600px 或以上時才應用 display flex 。當螢幕達到 600px 及以上尺寸時， 其他樣式（如主寬度和側寬度）也會調整其各自的尺寸。**也就是說，您在此媒體查詢之外定義的樣式将一直有效，直到它看到 600 像素及以上的螢幕。
在 600px，它會覆寫這些樣式，它在媒體查詢塊中執行此操作，然後進行必要的更改。
使用靈活的布局
布局是網站最基本的部分之一。這是您網站的結構，您可以根據需要以不同的方式布置内容。
由于這是您網站中最重要的部分之一，是以您希望以一種不會堵塞的方式建立您的布局，并且對于移動裝置、平闆電腦和桌上型電腦等主螢幕尺寸看起來不會顯得雜亂無章。
通過使用 Flexbox、Grid 等 CSS 屬性，您可以輕松實作這一目标。
CSS Grid：CSS Grid 是一個二維布局系統，用于建立響應式網頁設計。
它允許您在網格中定義行和列，然後在這些網格單元格中放置和對齊内容。
網格通常用于更複雜的布局，例如具有多行和多列的布局。它使您可以細粒度地控制内容在網格單元格中的放置和間隔方式，甚至可以用于重疊内容。
使用網格布局，您可以在使用媒體查詢時輕松地重新排列您的網站。
Flexbox：CSS Flexbox 是一個一維布局系統，用于建立靈活且響應迅速的網頁設計。
它允許您定義一個靈活的容器，然後沿單個軸（水準或垂直）對齊和分布該容器内的項目。
Flexbox 最适用于需要沿單個軸排列項目的更簡單的布局。它允許您輕松控制這些項目的間距和對齊方式，并且可用于水準和垂直布局。
使用靈活的機關
Web 開發中的另一個基本概念是單元。根據您使用的機關類型，它可以使您的網站看起來有序或無序。
您可以使用不同的機關來定義，例如，框或圓的大小。雖然有多種機關可供選擇（如 rem、cm、px、英寸等），但它們可大緻分為兩種類型：
- 相對機關：這些是根據螢幕尺寸更改值的機關。這種單元沒有固定的尺寸，但可以根據裝置的尺寸輕松擴充或對比。示例包括百分比、rem（根元素的字型大小）或 em。
- 絕對機關：無論螢幕大小如何，這些機關的值都保持不變。無論螢幕大小，占用的空間始終保持不變
選擇根據螢幕尺寸或其承載的内容自動擴充或調整大小的機關應該是你的首選（除非絕對必要，然後你可以選擇絕對機關）。
一個典型的例子是當您希望 div（框）始終跨越整個螢幕時使用百分比值。或者，當您希望無論螢幕大小如何都保持相同大小時，您可以使用px 值。
更新和更容易使用的機關包括 rem 和 em。讓我們先看一個不應該做什麼的例子：
<style>
.main {
width:500px;
height: 500px;
background-color: red;
}
</style>
<div class="main">
<h1>MAIN</h1>
</div> 上面的代碼是一個盒子，裡面有一些文本。像這樣設定在你的大螢幕上看起來不錯，但是當你将它與你在智能手機上看到的進行比較時，就會出現水準溢出。作為 Web 開發人員，您不希望這樣（除非絕對必要）。
建立更好的東西可能是這樣的：
<style>
.main {
width:50%;
height:100px;
background-color: red;
}
</style>
<div class="main">
<h1>MAIN</h1>
</div>
從上面的代碼可以看出，我們用類 main 定義了 div，具有相對寬度。也就是說，根據您的螢幕尺寸，此處的框将占總螢幕尺寸的 50%。這真的很好，因為現在您不必擔心使用者的螢幕尺寸，因為無論尺寸如何，框始終是螢幕的一半。
CSS 位置屬性
您還可以使用 CSS 中的各種定位屬性來幫助您建構響應式網站。一些示例包括相對的、絕對的、靜态的、粘性的和固定的。
CSS 中的 position 屬性可幫助您輕松地從正常流中移動不同的元素，具體取決于您設定的屬性。
然後使用 top、bottom、left 和 right 屬性定位這些元素。但是除非先設定 position 屬性，否則這些屬性将不起作用。它們的工作方式也因位置值而異。
- 靜态：靜态位置是任何元素在浏覽器上的預設位置，是以 top、left、right 和 bottom 屬性對其不起作用。當您希望在使用另一個定位屬性移動元素後将其傳回到其初始位置時，可以使用此屬性。
<html>
<style>
.position{
background:red;
padding:5px;
position:static;
top:10px;
left:20px;
}
.wrapper{
background:yellow;
padding:5px;
}
</style>
<body>
<div class="main">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
<div class="wrapper">
<div class="position">
This is positioned static
</div>
</div>
</body>
</html> 正如您從上面看到的，我們添加了 position static 以及其他屬性，但沒有任何反應。這不是因為代碼不工作——這隻是 position static 的行為。添加或删除位置 static 對代碼沒有任何影響，這是它應該在的位置。
- 相對：相對位置屬性相對于該元素的初始位置定位元素。下面的代碼将更好地解釋這一點：
<html>
<style>
.position{
background:red;
padding:5px;
position:relative;
top:10px;
left:20px;
}
.wrapper{
background:yellow;
padding:5px;
}
</style>
<body>
<div class="main">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
<div class="wrapper">
<div class="position">
This is positioned relative
</div>
</div>
</body>
</html> 從上面的代碼中可以看出，相對位置隻會根據您設定的值将元素圍繞其實際位置移動。是以它是相對于它的實際位置：
- 固定：我們使用固定位置将元素保持在螢幕上的特定點，而不管頁面的内容如何。固定位置是相對于螢幕大小的，也就是說當你設定一個top值的時候，它會從你螢幕的頂部開始計算。這是一個例子。我将減少我正在使用的虛拟内容。
<html>
<style>
.position{
background:red;
padding:5px;
position:fixed;
top:10px;
left:20px;
}
.wrapper{
background:yellow;
padding:5px;
}
</style>
<body>
<div class="main">
This is a really long text
</div>
<div class="wrapper">
<div class="position">
This is positioned fixed
</div>
</div>
</body>
</html> 這個位置固定的元素完全離開了原來的位置。然後，根據 top 和 left 的值，将它與螢幕頂部對齊一定距離。如果内容是可滾動的，元素仍将保留在那裡。
- 絕對：絕對屬性相對于父元素定位元素。是以，如果它位于另一個具有 position 屬性而不是 static 的元素内，它将相對于該元素定位。如果沒有這樣的元素，它将相對于螢幕頂部定位。
<html>
<style>
.position{
background:red;
padding:5px;
position:absolute;
top:7px;
left:20px;
}
.wrapper{
background:yellow;
position:fixed;
top:30px;
padding:30px;
}
</style>
<body>
<div class="main">
this is dummy content
</div>
<div class="wrapper">
<div class="position">
This is positioned
</div>
</div>
</body>
</html> 從上面的代碼和圖檔可以看出，位置是相對于父元素的位置——在本例中，它是固定的包裝器。
使圖像響應
圖像非常特别，這就是為什麼我也在這裡添加一個部分。
您可以使用上面列出的各種方法使圖像響應 - 但由于圖像的性質，如果您不小心，它們很容易被裁剪或扭曲。
如果您希望圖像具有響應性，則在處理圖像時可以執行以下幾項操作
使用 SVG 圖像：SVG 代表可縮放矢量圖形。它是一種圖像格式，使用矢量圖形建立可縮放圖像，可以在不降低品質的情況下調整大小。
與由單個像素組成的光栅圖像（例如 jpg、png 等）不同，SVG 圖像由數學方程定義，可以無限放大或縮小而不會失去清晰度。
一些開發人員更喜歡使用 SVG 而不是其他類型的圖像，因為：
- 可擴充性——SVG 是無限可擴充的，這意味着它們可以用于各種不同的尺寸和分辨率，而不會降低品質。
- 較小的檔案大小——SVG 圖像通常比其他類型的圖像（例如 JPEG 或 PNG）具有更小的檔案大小。
Object-fit：object-fit 屬性用于指定應如何調整 img 的大小以适合其容器。此屬性告訴内容以多種方式填充容器，例如“保持縱橫比”或“拉伸并占用盡可能多的空間”。
包起來
在本文中，我希望我已幫助您了解建構響應式網站時所需的基本元件。
響應式網站是必需的，對于每個 Web 開發人員來說，能夠輕松建構響應式 Web 應用程式至關重要。
在本文中，我讨論了響應式網站的 5 個主要建構塊，它們是：
- 媒體查詢
- 靈活的布局
- 靈活的機關
- 定位元素
- 圖檔
希望您可以開始在自己的項目中使用它們。
（前端教程：https://www.java567.com/search.html?sWord=%E5%89%8D%E7%AB%AF&v=2306013）