|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
如何使用媒體查詢(xún)media使頁(yè)面響應(yīng)不同的屏幕尺寸
作者:admin 時(shí)間:2022-8-17 17:29:25 瀏覽:媒體查詢(xún)(Media query)用于使頁(yè)面響應(yīng)所有不同的屏幕尺寸，從而增加用戶(hù)體驗(yàn)。移動(dòng)設(shè)備、平板電腦和計(jì)算機(jī)等不同設(shè)備具有不同的屏幕尺寸，因此確保用戶(hù)擁有完美體驗(yàn)非常重要。
桌面模式
上面的網(wǎng)站是桌面視圖。背景顏色設(shè)置為dodgerblue，文本顏色設(shè)置為白色。
在響應(yīng)模式
上述網(wǎng)站處于響應(yīng)式（媒體查詢(xún)）視圖中。背景顏色從深藍(lán)色變?yōu)闇\黃色，文本顏色從白色變?yōu)楹谏?/p>
如何在你的網(wǎng)站上使用媒體查詢(xún)
用法：
@media [screen type] and ( expression ){ }screen-type 可以是這些中的任何一個(gè)： print、screen、speech、all。默認(rèn)情況下，這將是all。
為了有效地利用媒體查詢(xún)，我們必須使用元標(biāo)記。
用法：
<meta name=”viewport” content=”width=device-width ,initial-scale=1.0">
這包含在 <head> 標(biāo)簽內(nèi)。
添加視口(viewport)元標(biāo)記
width=device-width 屬性設(shè)置確保頁(yè)面內(nèi)容始終適合屏幕的寬度。由于用戶(hù)水平滾動(dòng)不方便，我們必須確保內(nèi)容始終適合設(shè)備的寬度，因?yàn)榇怪睗L動(dòng)更容易。
在媒體查詢(xún)中，我們可以使用多個(gè)選擇器并分配不同的屬性。因此，當(dāng)滿(mǎn)足媒體查詢(xún)條件時(shí)，執(zhí)行其中的所有屬性。
我們也可以將媒體查詢(xún)用作 OR 條件，為了實(shí)現(xiàn)這一點(diǎn)，我們應(yīng)該提到用逗號(hào)分隔的多個(gè)條件。因此，當(dāng)任何一個(gè)條件為真時(shí)，它的內(nèi)部將被執(zhí)行。
多條件媒體查詢(xún)用and連接
響應(yīng)頁(yè)面
總計(jì)
本文介紹了如何在你的網(wǎng)站上使用媒體查詢(xún)，通過(guò)媒體查詢(xún)，頁(yè)面可以響應(yīng)不同的屏幕尺寸，響應(yīng)式網(wǎng)頁(yè)就是這樣實(shí)現(xiàn)的。
相關(guān)連接
- 站長(zhǎng)推薦
