首頁技術(shù)文章正文

什么是媒體查詢?怎樣使用媒體查詢?

更新時間:2021-06-01 來源:黑馬程序員 瀏覽量:

1577370495235_學IT就到黑馬程序員.gif

CSS的Media Query媒體查詢(也稱為媒介查詢)用來根據(jù)窗口寬度、屏幕比例和設備方向等差異來改變頁面的顯示方式。使用媒體查詢能夠在不改變頁面內(nèi)容的情況下,為特定的輸出設備制定顯示效果。

1)媒體查詢由媒體類型和條件表達式組成。常用的媒體查詢屬性如下。
2)設備寬高: device-width、device-height。
3)渲染窗口的寬和高:width、height。
4)設備的手持方向:orientation。
5)設備的分辨率:resolution。


媒體查詢的使用方法有兩種,即內(nèi)聯(lián)式和外聯(lián)式。下面通過代碼來對這兩種方式進行演示。利用媒體查詢實現(xiàn)當文檔寬度大于640px 時,則對CSS樣式進行修改。

(1)內(nèi)聯(lián)式是直接在CSS中使用,示例代碼如下。

<style>
 @media screen and (min-width:640px){
  css屬性: css屬性
 }
</style>


(2)外聯(lián)式是作為單獨的CSS文件從外部引入的,示例代碼如下。

<link href="style.css" media="screen and (min-width:640px)" ref="stylesheet">


在學習媒體查詢時,除了理解媒體查詢的基本概念以及語法格式外,還需要通過案例來練習媒體查詢的基本使用。





猜你喜歡:

如何下載和使用Normalize.css?【移動web頁面開發(fā)】

書寫CSS需要遵循哪些規(guī)則?它的結(jié)構(gòu)有什么特點?a>

CSS3盒子模型邊框怎樣實現(xiàn)圓角效果

黑馬程序員前端高級軟件工程師培訓

分享到:
在線咨詢 我要報名
和我們在線交談!