什麼是響應式網頁設計？
響應式網頁設計是透過使用 HTML 和 CSS 來自動調整網站大小。
響應式網頁設計是為了讓網站在所有裝置（桌面、平板電腦和手機）上都能良好顯示。
設定視口
在製作響應式網頁時，請將以下 <meta> 元素新增到所有網頁中
媒體查詢
媒體查詢在響應式網頁中扮演著重要的角色。
使用媒體查詢，您可以為不同的瀏覽器尺寸定義不同的樣式。
示例
調整瀏覽器視窗的大小，您會看到下面的三個元素在大螢幕上水平顯示，在小螢幕上垂直顯示
主內容
Right
示例
<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%;}
}
</style>
自己動手試一試 »
在 W3Schools 的 RWD 教程 中瞭解更多關於響應式網頁設計的內容
響應式圖片
響應式圖片是能夠很好地適應任何瀏覽器尺寸的圖片。
當 CSS 的 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>
自己動手試一試 »
響應式 W3.CSS
W3.CSS 是一個免費的 CSS 框架，它預設支援響應式設計。
W3.CSS 可以輕鬆開發在任何裝置上看起來都很棒的網站；桌面、筆記本、平板電腦或手機。
示例
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<body>
<div class="w3-center w3-padding-64 w3-light-grey">
<h1>我的 W3.CSS 頁面</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
Bootstrap 是一個非常流行的框架，它使用 HTML、CSS 和 jQuery 來製作響應式網頁。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>調整此響應式頁面大小以檢視效果！</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h2>倫敦</h2>
<p>倫敦是英格蘭的首都。</p>
<p>它是英國人口最多的城市，</p>
<p>其都會區人口超過 1300 萬。</p>
</div>
<div class="col-sm-4">
<h2>巴黎</h2>
<p>巴黎是法國的首都。</p>
<p>巴黎地區是歐洲最大的居住區之一，</p>
<p>人口超過 1200 萬。</p>
</div>
<div class="col-sm-4">
<h2>東京</h2>
<p>東京是日本的首都。</p>
<p>它是大東京地區的中心，</p>
<p>也是世界上人口最多的都市區。</p>
</div>
</div>
</div>
</body>
</html>
自己動手試一試 »
要了解更多關於 Bootstrap 的資訊，請訪問我們的 Bootstrap 教程。
