教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

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

更新時(shí)間:2021年06月01日13時(shí)44分 來(lái)源:傳智教育 瀏覽次數(shù):

傳智教育-一樣的教育，不一樣的品質(zhì)

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

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


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

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

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


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

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


在學(xué)習(xí)媒體查詢時(shí)，除了理解媒體查詢的基本概念以及語(yǔ)法格式外，還需要通過(guò)案例來(lái)練習(xí)媒體查詢的基本使用。






猜你喜歡：

怎樣實(shí)現(xiàn)不同元素類型的轉(zhuǎn)換？

CSS中overflow屬性是怎樣處理溢出內(nèi)容的？

Spring框架中都用到了哪些設(shè)計(jì)模式?

textarea控件創(chuàng)建文本輸入框

傳智教育前端與移動(dòng)開發(fā)培訓(xùn)

0 分享到：
和我們?cè)诰€交談！