資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 HTML 中使用媒體查詢實現移動優先方法？
構建響應式網頁設計是必備技能，每個開發者都必須瞭解如何構建一個完全響應式、無錯誤的網站。它在不同螢幕寬度裝置上的顯示效果不同，在不同裝置上開啟時不會出現奇怪的顯示或溢位。瞭解如何從方法到構建，直至設計完成且無錯誤和調整的移動優先設計至關重要。
響應式網站必須在所有裝置上提供良好的使用者體驗、使用者介面和設計，內容相同。要構建一個完全響應式的網站，可以使用 CSS **媒體查詢**。媒體查詢允許您為網頁上的每個元素編寫不同的 CSS，以適應不同的螢幕尺寸，從而在不同的裝置上以不同的方式顯示相同的佈局和內容。
構建無錯誤的完全響應式網站，您可以遵循兩種不同的方法。這些方法列在下面：
**桌面優先設計方法** - 在這種構建響應式網站的方法中，您將首先構建整個網站的桌面版本，這意味著這種方法中的 CSS 首先為桌面編寫，然後為其他裝置編寫。
**移動優先設計方法** - 如名稱所示，移動優先方法將首先為移動裝置構建網站，然後使用 CSS 媒體查詢將移動設計的 CSS 覆蓋為寬度更大的裝置。
現在讓我們瞭解構建響應式網頁設計的首選方法，即使用程式碼示例進行實際實現的 **移動優先** 方法。
正如我們已經討論的那樣，在這種方法中將首先構建移動設計。因此，我們將首先編寫移動設計的 CSS，然後使用媒體查詢為更大的螢幕裝置編寫 CSS。
讓我們透過一個程式碼示例來詳細瞭解它。
步驟
**步驟 1** - 在第一步中，我們將定義所有必需的 HTML 元素，例如 <img>、<p>、<h> 等，並使用合適的類為它們在不同螢幕上提供響應能力。
**步驟 2** - 在下一步中，我們將在文件的 <head> 標記內定義一個 <style> 標記，以首先編寫特定於移動裝置的 CSS。
**步驟 3** - 在最後一步中，我們將使用媒體查詢編寫其他螢幕裝置的 CSS，以覆蓋一些針對更大螢幕的移動樣式。
示例
下面的示例將解釋如何使用媒體查詢在 HTML 中編寫移動優先方法的 CSS：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta content = "width=device-width, initial-scale = 1" name = "viewport" />
<style>
/* CSS that will be applied on for mobile and Tablet devices */
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
p.para-text {
border: 2px solid black;
padding: 20px;
margin-bottom: 10px;
}
img {
width: 300px;
}
/* CSS that will be applied on devices with bigger screens */
@media screen and (min-width: 770px) {
.container {
flex-direction: row;
align-items: center;
column-width: 200px;
justify-content: space-evenly;
column-gap: 10px;
}
p.para-text {
border: 2px solid green;
padding: 30px;
}
img {
width: 200px;
}
}
</style>
</head>
<body>
<center>
<h2> Using media queries in a mobile-first approach in HTML </h2>
<p> The below web page will adjust itself for different screen width devices. </p>
<div class = "container">
<img src = "https://tutorialspoint.tw/cg/images/logo.png" alt="Tutorialspoint Logo">
<p class = "para-text"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
</div>
</center>
</body>
</html>
在上面的示例中，我們改變了在不同螢幕上顯示內容的方式。在移動裝置和平板電腦上，內容以單列對齊，每個元素的寬度都為全寬。而在更大的裝置或桌面裝置上，內容在一行中可見，每個內容容器元素都有不同的列。在這個例子中，不僅內容的對齊方式隨不同的螢幕裝置而變化，包含文字內容的容器的邊框顏色也會發生變化。我們遵循移動優先方法來實現所有這些。
在這篇文章中，我們學習瞭如何在移動優先方法中使用媒體查詢來構建響應式網站。我們已經討論並詳細瞭解了它的使用方法，並透過程式碼示例進行了實際的實現，並查看了結果，即當內容在具有不同螢幕尺寸的不同裝置上呈現時，內容層次結構將如何變化。
134 次瀏覽
