|
|
|
|
|
|
如何使用媒體查詢media使頁面響應不同的屏幕尺寸
作者:admin 時間:2022-8-17 17:29:25 瀏覽:媒體查詢(Media query)用于使頁面響應所有不同的屏幕尺寸，從而增加用戶體驗。移動設備、平板電腦和計算機等不同設備具有不同的屏幕尺寸，因此確保用戶擁有完美體驗非常重要。
桌面模式
上面的網站是桌面視圖。背景顏色設置為dodgerblue，文本顏色設置為白色。
在響應模式
上述網站處于響應式（媒體查詢）視圖中。背景顏色從深藍色變為淺黃色，文本顏色從白色變為黑色。
如何在你的網站上使用媒體查詢
用法：
@media [screen type] and ( expression ){ }screen-type 可以是這些中的任何一個： print、screen、speech、all。默認情況下，這將是all。
為了有效地利用媒體查詢，我們必須使用元標記。
用法：
<meta name=”viewport” content=”width=device-width ,initial-scale=1.0">
這包含在 <head> 標簽內。
添加視口(viewport)元標記
width=device-width 屬性設置確保頁面內容始終適合屏幕的寬度。由于用戶水平滾動不方便，我們必須確保內容始終適合設備的寬度，因為垂直滾動更容易。
在媒體查詢中，我們可以使用多個選擇器并分配不同的屬性。因此，當滿足媒體查詢條件時，執行其中的所有屬性。
我們也可以將媒體查詢用作 OR 條件，為了實現這一點，我們應該提到用逗號分隔的多個條件。因此，當任何一個條件為真時，它的內部將被執行。
多條件媒體查詢用and連接
響應頁面
總計
本文介紹了如何在你的網站上使用媒體查詢，通過媒體查詢，頁面可以響應不同的屏幕尺寸，響應式網頁就是這樣實現的。
相關連接
相關文章
x
