首頁 > web前端 > html教學 > 介紹一下什麼是媒體查詢

介紹一下什麼是媒體查詢

王林
發布: 2020-10-21 17:46:51
轉載
3275 人瀏覽過

介紹一下什麼是媒體查詢

學習媒體查詢的核心是什麼?

#(推薦教學:html影片教學

實作頁面在不同裝置下正常預覽[判斷目前裝置]

媒體類型

#將不同的裝置分割成不同的型別

# all (所有的裝置) 

print (列印裝置)

screen (電腦螢幕,平板電腦,智慧型手機) 

媒體功能

用來描述設備的特性,例如寬度,高度...

width 網頁顯示區域完全等於設定的寬度

height 網頁顯示區域完全等於設定的高度

max-width / max-height 網頁顯示區域小於等於設定的寬度

min-width / min-width 網頁顯示區域大於等於設定的寬度

orientation : portrait (垂直螢幕模式)  | landscape (橫向螢幕模式)

語法關鍵字

目的將媒體類型和媒體功能連結到一塊,進行裝置偵測

and 可以將多個媒體特性連結到一塊,相當於且

not 排除某個媒體特性相當於非,可以省略

only 指定某個特定的媒體類型, 可以省略

語法

外接式語法

1

<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">

登入後複製

1

2

3

4

5

6

7

8

9

- 内嵌式语法

      @media only screen  and (max-width: 420px) {

        body {

            background-color: red;

        }

      }

       

      备注: 多个条件联写

      @media only screen and (width: 320px) and (height: 568px) {}

登入後複製

相關推薦:html教學

以上是介紹一下什麼是媒體查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
html5 - 響應式WEB,媒體查詢的問題。
來自於 1970-01-01 08:00:00
0
0
0
javascript - 想透過js判斷css的媒體查詢 出錯
來自於 1970-01-01 08:00:00
0
0
0
SASS樣式優先於媒體查詢
來自於 1970-01-01 08:00:00
0
0
0
Parcel 錯誤地重寫了媒體查詢
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板