媒體查詢能使頁面在不同在終端裝置下達到不同的效果
媒體查詢會根據裝置的大小自動識別載入不同的樣式
1、設定meta標籤
使用裝置的寬度作為檢視寬度並禁止初始的縮放。在<head>標籤里加入這個meta標籤。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
引數解釋
①width=device-width：寬度等於當前裝置的寬度
②initial-scale：初始的縮放比列（預設設定為1.0）
③maximum-scale：允許使用者縮放到的最大比例（預設設定為1.0）
④user-scalable：使用者是否可以動手縮放（預設設定為no）
（<meta http-equiv="X-UA-Compatible" content="IE=edge">
①基本含義 ：
<meta http - equiv="X - UA - Compatible" content="IE = edge">是一個HTML後設資料（meta）標籤。它主要用於控制網頁在Internet Explorer（IE）瀏覽器中的相容性模式。
http - equiv屬性是“HTTP等價物”的意思。在這裡，它相當於傳送一個HTTP頭部資訊給瀏覽器。
X - UA - Compatible是這個頭部資訊的名稱，用於告訴瀏覽器如何渲染頁面。
content屬性的值`IE = edge`是具體的指令內容。
edge模式意味著讓IE瀏覽器以其最高可用的文件模式來渲染頁面，也就是使用最新的引擎來渲染網頁，而不是使用相容模式。
②相容性模式背景：
在IE瀏覽器中，為了相容舊版本的網頁，會有不同的文件模式。例如，IE可能會以IE5、IE7、IE8等舊的渲染模式來顯示頁面，這是為了讓那些針對舊版本瀏覽器設計的網站能夠正常顯示。
但是，當網頁開發者希望使用最新的瀏覽器特性和渲染引擎來展示頁面時，就可以使用<meta http - equiv="X - UA - Compatible" content="IE = edge">標籤，強制IE使用最新的模式進行渲染，以提供更好的效能和對現代Web標準的支援。
③實際應用示例：
假設你開發了一個使用HTML5和CSS3新技術的網頁，如帶有新的CSS彈性盒子佈局（display:flex）和HTML5語義化標籤（如<section>、<article>等）。如果沒有這個標籤，IE瀏覽器可能會以相容舊版本的模式渲染，導致這些新特性無法正常顯示。
比如在一個簡單的HTML檔案中：
<html>
<!DOCTYPE html>
<html> <head> <meta charset="UTF - 8">
<meta http - equiv="X - UA - Compatible" content="IE = edge">
<title>My Modern Web Page</title>
<style>
body { display: flex;
justify - content: center;
align - items: center;
height: 100vh;
} </style>
</head>
<body>
<h1>Hello, Modern Web!</h1>
</body>
</html>
在這個示例中，<meta http - equiv="X - UA - Compatible" content="IE = edge">標籤有助於確保IE瀏覽器能夠以其最新的渲染模式來處理頁面中的display:flex等現代CSS特性，從而讓頁面在IE瀏覽器中也能儘可能正確地顯示。
）
(<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
①含義解釋:
這是一個HTML的`<meta>`標籤，用於設定視口（viewport）的相關屬性。視口是使用者在瀏覽器中看到網頁內容的區域。
name="viewport"：表示這個`<meta>`標籤是用於定義視口的相關設定。
content屬性包含了一系列對視口的具體設定：
width=device - width：這意味著視口的寬度等於裝置的寬度。
例如，在移動裝置上，視口寬度會根據裝置的螢幕寬度進行調整，以確保網頁能夠在不同尺寸的裝置螢幕上合理地顯示。這樣可以使網頁更好地適應手機、平板等各種裝置的螢幕，避免出現橫向捲軸或者內容顯示過小等情況。
initial - scale = 1：初始縮放比例設定為1，即網頁在載入時按照原始大小的100%進行顯示。這個屬性用於控制頁面首次載入時的縮放程度。如果設定為0.5，頁面會以原始大小的一半顯示；設定為2則會以原始大小的兩倍顯示。
maximum - scale = 1：限制使用者最大的縮放比例為1，也就是使用者不能將頁面放大超過原始大小。這有助於保持頁面佈局的完整性，防止使用者過度放大導致頁面排版混亂。
user - scalable = no：表示禁止使用者手動縮放頁面。在某些情況下，比如網頁的佈局和設計對尺寸有嚴格要求，開發者可能不希望使用者隨意縮放頁面，就可以使用這個設定。
②實際應用場景和效果:
以一個響應式網頁設計為例，當你開發一個同時適用於桌面和移動裝置的網站時，設定width=device - width可以確保移動裝置上能夠正確地顯示網頁內容。比如，一個包含圖片和文字的新聞網站，在手機上瀏覽時，文字和圖片能夠自適應手機螢幕的寬度，不會出現內容被截斷或者需要左右滑動才能檢視全部內容的情況。
假設你有一個移動應用的網頁版，它的介面佈局有嚴格的要求，如一些按鈕的位置和大小是固定的，並且希望使用者按照設計好的佈局來檢視和操作。透過設定maximum - scale = 1和user - scalable = no，可以防止使用者放大頁面而導致按鈕位置錯亂，從而提供更一致的使用者體驗。
③與移動裝置開發的關係:
在移動裝置網頁開發中，這個`<meta>`標籤是非常重要的。因為移動裝置的螢幕尺寸多種多樣，透過正確設定視口屬性，可以讓網頁在不同的移動裝置上（如不同螢幕尺寸的手機和平板）都能有較好的顯示效果。這有助於提高網站的可用性和使用者滿意度，尤其是在移動網際網路時代，大量使用者透過手機訪問網站，對視口的合理設定可以使網站更好地適應這種趨勢。)
2、媒體查詢語法
手機螢幕： @media screen and （max-width:768px）{
/*裝置小於768px載入樣式*/
body{
backgroubd-color:red;
}
}
平板螢幕：@media screen and(max-width:992px)and(min-width:768px){
/*裝置小於768px但小於992px載入樣式*/
body{
backgroubd-color：pink;
}
}
電腦螢幕：@media screen and (min-width:992px){
/*裝置大於992px載入樣式*/
body{
background-color:green;
}
}
蘋果手機的畫素是390*2，他是雙倍畫素
