HTML 響應式網頁設計
響應式網頁設計是為了讓網頁在所有裝置上都能良好顯示！
響應式網頁設計將自動適應不同的螢幕尺寸和視口。
什麼是響應式網頁設計？
響應式網頁設計是使用 HTML 和 CSS 來自動調整、隱藏、收縮或放大網站，使其在所有裝置（桌面、平板電腦和手機）上看起來都很棒。
設定視口
要建立響應式網站，請在所有網頁中新增以下 <meta> 標籤
這將設定頁面的視口，它將為瀏覽器提供關於如何控制頁面尺寸和縮放的指示。
這是一個沒有視口 meta 標籤的網頁示例，以及同一個網頁有視口 meta 標籤的示例。
提示： 如果您在手機或平板電腦上瀏覽此頁面，可以點選上面的兩個連結檢視差異。
響應式圖片
響應式圖片是可以很好地適應任何瀏覽器尺寸的圖片。
使用 width 屬性
如果 CSS width 屬性設定為 100%，則影像將是響應式的，並會向上和向下縮放。
請注意，在上面的示例中，影像可以放大到大於其原始尺寸。在許多情況下，更好的解決方案是改用 max-width 屬性。
使用 max-width 屬性
如果 max-width 屬性設定為 100%，影像將向下縮放（如果需要），但絕不會放大到大於其原始尺寸。
根據瀏覽器寬度顯示不同的圖片
HTML <picture> 元素允許您為不同的瀏覽器視窗大小定義不同的影像。
調整瀏覽器視窗大小，檢視下方圖片如何根據寬度變化
示例
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
自己動手試一試 »
響應式文字大小
文字大小可以使用“vw”單位設定，表示“視口寬度”。
這樣，文字大小將跟隨瀏覽器視窗的大小。
你好世界
調整瀏覽器視窗大小，檢視文字大小如何縮放。
視口是瀏覽器視窗的大小。1vw = 視口寬度的 1%。如果視口寬 50 釐米，則 1vw 為 0.5 釐米。
媒體查詢
除了調整文字和影像大小外，在響應式網頁中還可以普遍使用媒體查詢。
使用媒體查詢，您可以為不同的瀏覽器尺寸定義完全不同的樣式。
示例：調整瀏覽器視窗大小，可以看到下面的三個 div 元素在大螢幕上水平顯示，在小螢幕上垂直堆疊。
示例
<style>
.left, .right {
float: left;
width: 20%; /* 預設寬度為 20% */
}
.main {
float: left;
width: 60%; /* 預設寬度為 60% */
}
/* 使用媒體查詢在 800px 處新增斷點： */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* 視口為 800px 或更小時，寬度為 100% */
}
}
</style>
自己動手試一試 »
提示： 要了解有關媒體查詢和響應式網頁設計的更多資訊，請閱讀我們的 RWD 教程。
響應式網頁 - 完整示例
響應式網頁應在大桌面螢幕和小手機螢幕上看起來都很棒。
響應式網頁設計 - 框架
所有流行的 CSS 框架都支援響應式設計。
它們是免費的，並且易於使用。
W3.CSS
W3.CSS 是一個現代化的 CSS 框架，預設支援桌面、平板電腦和移動裝置設計。
W3.CSS 比類似的 CSS 框架更小、更快。
W3.CSS 設計為不依賴 jQuery 或任何其他 JavaScript 庫。
W3.CSS 演示
調整頁面大小以檢視響應式效果！
London
倫敦是英格蘭的首都。
它是英國人口最多的城市，都會區擁有超過 1300 萬居民。
巴黎
巴黎是法國的首都。
巴黎地區是歐洲最大的聚居地之一，人口超過 1200 萬。
東京
東京是日本的首都。
它是大東京地區的核心，也是世界上人口最多的都會區。
示例
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
</head>
<body>
<div class="w3-container w3-green">
<h1>W3Schools 演示</h1>
<p>調整此響應式頁面大小！</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>倫敦</h2>
<p>倫敦是英格蘭的首都。</p>
<p>它是英國人口最多的城市，</p>
<p>都會區超過 1300 萬居民。</p>
</div>
<div class="w3-third">
<h2>巴黎</h2>
<p>巴黎是法國的首都。</p>
<p>巴黎地區是歐洲最大的聚居地之一，</p>
<p>人口超過 1200 萬。</p>
</div>
<div class="w3-third">
<h2>東京</h2>
<p>東京是日本的首都。</p>
<p>它是大東京地區的核心，</p>
<p>也是世界上人口最多的都會區。</p>
</div>
</div>
</body>
</html>
自己動手試一試 »
要了解有關 W3.CSS 的更多資訊，請閱讀我們的 W3.CSS 教程。
Bootstrap
另一個流行的 CSS 框架是 Bootstrap
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>調整此響應式頁面大小以檢視效果！</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>列 1</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>列 2</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>列 3</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
自己動手試一試 »
要了解有關 Bootstrap 的更多資訊，請訪問我們的 Bootstrap 教程。
