1.1 手機優先 (Mobile-First)
Responsive design 是一種網頁開發方法，它可以讓網站適應不同大小的螢幕和設備，提供最佳的使用體驗。響應式設計的主要目標是讓網站對所有使用者來說都很方便和容易存取，無論他們使用的是什麼設備。
手機優先 的方法是從設計小螢幕的手機裝置開始，然後擴展到大螢幕的設計。這種方法有助於專注於網站上最重要的元素和功能。
手機優先的優點：
- 為手機用戶優化內容
- 簡化小螢幕上的設計和功能
- 透過減少內容的數量來提高性能
例子：
CSS
/* 手機裝置的基本樣式 */
body {
font-size: 16px;
margin: 0;
padding: 0;
}
/* 大螢幕的樣式 */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
1.2 漸進增強 (Progressive Enhancement)
漸進增強專注於為所有使用者提供基本功能，然後為更高級的瀏覽器和設備添加增強功能。這種方法確保了內容的可存取性，即使某些功能或樣式不被使用者的設備支援。
漸進增強的優點：
- 為所有使用者提供基本功能
- 改善現代設備使用者的體驗
- 降低因內容或功能遺失而造成的風險
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>漸進增強</title>
<style>
/* 所有瀏覽器的基本樣式 */
body {
font-family: Arial, sans-serif;
}
/* 現代瀏覽器的增強樣式 */
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div>內容 1</div>
<div>內容 2</div>
</div>
</body>
</html>
1.3 佈局的靈活性 (Fluid Layouts)
佈局的靈活性意味著使用可以適應不同螢幕尺寸的靈活元素。這可以包括使用靈活的容器，這些容器會根據螢幕的大小自動調整尺寸。
佈局靈活性的優點：
- 改善不同設備上的內容顯示
- 更好地適應螢幕尺寸的變化
- 提高內容使用的便利性和可存取性
例子：
HTML
<div class="container">
<div class="item-1">內容項目 1</div>
<div class="item-2">
Etiam scelerisque lectus nulla, eget convallis orci convallis vel. Etiam sed interdum sem. Nunc vestibulum lectus nibh, in volutpat velit fermentum eget. Mauris in risus tincidunt, sodales odio et, rutrum ligula. In iaculis congue ex in laoreet. Sed id eros porttitor, finibus diam ultrices, consectetur leo. Fusce aliquam, nibh ac sollicitudin viverra, felis libero fringilla orci, nec auctor elit sapien non arcu. Proin dolor mi, iaculis ut velit id, vestibulum consectetur metus. Duis venenatis felis a diam elementum, eget ullamcorper leo scelerisque. Sed tempus euismod urna et tristique. Duis at odio quis libero commodo ullamcorper id vel odio. Maecenas volutpat rhoncus sodales. Mauris eget nunc accumsan, rhoncus massa at, placerat lorem.
Etiam ullamcorper elementum tellus non euismod. Mauris euismod mi nisi, sed egestas ligula varius sed. Nunc tortor elit, hendrerit sed gravida in, tempus nec augue. Aliquam vitae condimentum velit. Sed id massa ac felis tempor elementum. Aenean at nulla ipsum. Fusce sed cursus tortor. Duis sodales rhoncus eros, non aliquam ante ultricies ut. Pellentesque auctor ultricies aliquet. In laoreet enim dolor, vel consectetur sapien laoreet eu.
In efficitur pharetra ex convallis egestas. Praesent egestas, sapien fermentum consectetur vestibulum, quam dui pharetra urna, vitae finibus arcu lacus quis mauris. Quisque consectetur lorem sapien, nec pulvinar elit varius vitae. Cras elementum risus lacus, a interdum tellus euismod ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas pharetra, odio vel facilisis venenatis, ipsum leo viverra ligula, ut venenatis enim ipsum ut lectus. Fusce cursus mollis congue.
</div>
</div>
CSS
.container {
width: 100%;
padding: 20px;
box-sizing: border-box;
color: white;
}
.item-1 {
min-height: 50px;
width: calc(100% / 3);
float: left;
background: purple;
}
.item-2 {
background: gray;
}
1.4 內容層次結構 (Content Hierarchy)
內容層次結構對響應式設計非常重要，因為它有助於以可訪問和清晰的方式組織資訊在任何裝置上顯示。這包括正確使用標題、段落、列表和其他元素來建立清晰且合乎邏輯的結構。
內容層次結構的優點：
- 改善資訊的可讀性和理解性
- 提高所有使用者的內容可訪問性
- 便於網站的導航和互動
例子：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>內容層次結構</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
p {
font-size: 1em;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>主要標題</h1>
<h2>子標題</h2>
<p>
這是跟隨在子標題後的段落範例。文字應該對所有使用者來說都能輕鬆閱讀和理解。
</p>
</body>
</html>
GO TO FULL VERSION