2021-05-19 分類: 網(wǎng)站建設
以@開頭的CSS語法稱為查詢,CSS3引入了@media查詢。CSS其實就是通過選擇器決定何時啟用一些屬性配置。這種思想不僅僅可以用在界面上,也可以用在工程設計上。例如有許多種操作,命中不同規(guī)則時啟用不同的操作;有許多種配置,在不同環(huán)境下啟用不同的配置。@media就是用來在不同界面環(huán)境下啟用不同的配置。
先舉個例子:當屏幕寬度小于300像素時,背景色為淺藍色。
@media screen and (max-width: 300px) { body { background-color:lightblue; }}
使用 @media 查詢,可以針對不同的媒體類型定義不同的樣式。其中媒體類型包括:打印機、屏幕設備、語音設備三種。我們只需要關注屏幕設備即可。
@media 可以針對不同的屏幕尺寸設置不同的樣式。當你重置瀏覽器大小的過程中,頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
CSS 語法
@media mediatype and|not|only (media feature) { CSS-Code;}
你也可以針對不同的媒體使用不同 stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
media支持的設備類型現(xiàn)在有效的只有三種,其它的都已經(jīng)廢棄了。
resolution 定義設備的分辨率。如:96dpi, 300dpi, 118dpcm
max-resolution 定義設備的大分辨率。
min-resolution 定義設備的最小分辨率。
max-monochrome 定義在一個單色框架緩沖區(qū)中每像素包含的大單色原件個數(shù)。
min-monochrome 定義在一個單色框架緩沖區(qū)中每像素包含的最小單色原件個數(shù)
monochrome 定義在一個單色框架緩沖區(qū)中每像素包含的單色原件個數(shù)。如果不是單色設備,則值等于0
orientation 定義輸出設備中的頁面可見區(qū)域高度是否大于或等于寬度。
scan 定義電視類設備的掃描工序。
grid 用來查詢輸出設備是否使用柵格或點陣。
viewport 是用戶網(wǎng)頁的可視區(qū)域。
viewport 翻譯為中文可以叫做"視區(qū)"。
手機瀏覽器是把頁面放在一個虛擬的"窗口"(viewport)中,通常這個虛擬的"窗口"(viewport)比屏幕寬,這樣就不用把每個網(wǎng)頁擠到很小的窗口中(這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局),用戶需要通過平移和縮放來看網(wǎng)頁的不同部分。
一個常用的針對移動網(wǎng)頁優(yōu)化過的頁面的 viewport meta 標簽大致如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
新聞名稱:手機端網(wǎng)頁開發(fā)的兩個重要設置
URL網(wǎng)址:http://redsoil1982.com.cn/news17/114217.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設計公司、定制網(wǎng)站、企業(yè)建站、自適應網(wǎng)站、網(wǎng)站收錄、服務器托管
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容