一、media

以@開(kāi)頭的CSS語(yǔ)法稱為查詢，CSS3引入了@media查詢。CSS其實(shí)就是通過(guò)選擇器決定何時(shí)啟用一些屬性配置。這種思想不僅僅可以用在界面上，也可以用在工程設(shè)計(jì)上。例如有許多種操作，命中不同規(guī)則時(shí)啟用不同的操作；有許多種配置，在不同環(huán)境下啟用不同的配置。@media就是用來(lái)在不同界面環(huán)境下啟用不同的配置。

先舉個(gè)例子：當(dāng)屏幕寬度小于300像素時(shí)，背景色為淺藍(lán)色。

@media screen and (max-width: 300px) { body { background-color:lightblue;    }}

使用 @media 查詢，可以針對(duì)不同的媒體類型定義不同的樣式。其中媒體類型包括：打印機(jī)、屏幕設(shè)備、語(yǔ)音設(shè)備三種。我們只需要關(guān)注屏幕設(shè)備即可。
@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式。當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。

media基本語(yǔ)法

CSS 語(yǔ)法

@media mediatype and|not|only (media feature) { CSS-Code;}

你也可以針對(duì)不同的媒體使用不同 stylesheets :

media支持的設(shè)備

media支持的設(shè)備類型現(xiàn)在有效的只有三種，其它的都已經(jīng)廢棄了。

• all 用于所有設(shè)備
• aural 已廢棄。用于語(yǔ)音和聲音合成器
• braille 已廢棄。 應(yīng)用于盲文觸摸式反饋設(shè)備
• embossed 已廢棄。 用于打印的盲人印刷設(shè)備
• handheld 已廢棄。 用于掌上設(shè)備或更小的裝置，如PDA和小型電話
• print 用于打印機(jī)和打印預(yù)覽
• projection 已廢棄。 用于投影設(shè)備
• screen 用于電腦屏幕，平板電腦，智能手機(jī)等。
• speech 應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備
• tty 已廢棄。 用于固定的字符網(wǎng)格，如電報(bào)、終端設(shè)備和對(duì)字符有限制的便攜設(shè)備
• tv 已廢棄。 用于電視和網(wǎng)絡(luò)電視

media支持的設(shè)備詳情

顏色相關(guān)

• color 定義輸出設(shè)備每一組彩色原件的個(gè)數(shù)。如果不是彩色設(shè)備，則值等于0
• color-index 定義在輸出設(shè)備的彩色查詢表中的條目數(shù)。如果沒(méi)有使用彩色查詢表，則值等于0
• max-color 定義輸出設(shè)備每一組彩色原件的大個(gè)數(shù)。
• min-color 定義輸出設(shè)備每一組彩色原件的最小個(gè)數(shù)。
• max-color-index 定義在輸出設(shè)備的彩色查詢表中的大條目數(shù)。
• min-color-index 定義在輸出設(shè)備的彩色查詢表中的最小條目數(shù)。

寬度高度相關(guān)：

• device-height 定義輸出設(shè)備的屏幕可見(jiàn)高度。
• device-width 定義輸出設(shè)備的屏幕可見(jiàn)寬度。
• max-device-height 定義輸出設(shè)備的屏幕可見(jiàn)的大高度。
• max-device-width 定義輸出設(shè)備的屏幕大可見(jiàn)寬度。
• min-device-width 定義輸出設(shè)備的屏幕最小可見(jiàn)寬度。
• min-device-height 定義輸出設(shè)備的屏幕的最小可見(jiàn)高度。
• height 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度。
• width 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾取?/li>
• max-height 定義輸出設(shè)備中的頁(yè)面大可見(jiàn)區(qū)域高度。
• max-width 定義輸出設(shè)備中的頁(yè)面大可見(jiàn)區(qū)域?qū)挾取?/li>
• min-height 定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域高度。
• min-width 定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域?qū)挾取?/li>

寬高比：包括頁(yè)面寬高比和設(shè)備寬高比

• aspect-ratio 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾扰c高度的比率
• device-aspect-ratio 定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的比率。
• min-aspect-ratio 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾扰c高度的最小比率。
• min-device-aspect-ratio 定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的最小比率。
• max-aspect-ratio 定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的大比率。
• max-device-aspect-ratio 定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的大比率。

分辨率

resolution 定義設(shè)備的分辨率。如：96dpi, 300dpi, 118dpcm
max-resolution 定義設(shè)備的大分辨率。
min-resolution 定義設(shè)備的最小分辨率。

雜項(xiàng)

max-monochrome 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的大單色原件個(gè)數(shù)。
min-monochrome 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最小單色原件個(gè)數(shù)
monochrome 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備，則值等于0
orientation 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度是否大于或等于寬度。
scan 定義電視類設(shè)備的掃描工序。
grid 用來(lái)查詢輸出設(shè)備是否使用柵格或點(diǎn)陣。

二、viewport

什么是viewport

viewport 是用戶網(wǎng)頁(yè)的可視區(qū)域。

viewport 翻譯為中文可以叫做"視區(qū)"。

手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的"窗口"（viewport）中，通常這個(gè)虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個(gè)網(wǎng)頁(yè)擠到很小的窗口中（這樣會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局），用戶需要通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的不同部分。

設(shè)置viewport

一個(gè)常用的針對(duì)移動(dòng)網(wǎng)頁(yè)優(yōu)化過(guò)的頁(yè)面的 viewport meta 標(biāo)簽大致如下：

• width：控制 viewport 的大小，可以指定的一個(gè)值，如 600，或者預(yù)定義的值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時(shí)的 CSS 的像素）。
• height：和 width 相對(duì)應(yīng)，指定高度。
• initial-scale：初始縮放比例，也即是當(dāng)頁(yè)面第一次 load 的時(shí)候縮放比例。
• maximum-scale：允許用戶縮放到的大比例。
• minimum-scale：允許用戶縮放到的最小比例。
• user-scalable：用戶是否可以手動(dòng)縮放。

分享文章：手機(jī)端網(wǎng)頁(yè)開(kāi)發(fā)的兩個(gè)重要設(shè)置
分享URL：http://aaarwkj.com/news/114217.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、搜索引擎優(yōu)化、建站公司、品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)