聊聊最近接觸的媒體查詢！

時間 2020-07-23

標籤聊聊最近接觸媒體查詢简体版

原文原文鏈接

1.首先什麼是媒體查詢？css

媒體查詢可讓咱們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）爲其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。使用媒體查詢，能夠在不改變頁面內容的狀況下，爲特定的一些輸出設備定製顯示效果。html

通俗點說就是利用媒體查詢咱們可讓一套代碼兼容不一樣的屏幕如電腦、pad、手機登。ide

2。媒體查詢怎麼用？spa

在介紹怎麼用媒體查詢以前，咱們先說下媒體查詢操做的是什麼？答案就是樣式屬性如width、height、font-size、color等。在什麼裏面可使用媒體查詢呢？首先咱們想到的確定是css中，其次就是也能夠在JS裏面去使用。
接下來咱們先看看在css中怎麼使用。上代碼scala

<!DOCTYPE html>orm

<html>htm

<head>對象

<style>

#box { //設備屏幕寬度尺寸小於768px時，這段樣式會起做用

width: 100px;

height: 100px;

font-size: 16px;

color: gold;

background-color:gray;

}

@media only screen and (min-width: 768px) {

#box { //設備屏幕寬度尺寸大於768px時，這段樣式會起做用

width:300px;

height:300px;

font-size: 24px;

color: white;

background-color:black;

}

</style>

</head>

<body>

</body>

</html>

咱們來看看這句代碼@media only screen and (min-width: 768px) ，這就是在CSS中使用媒體查詢的常見語法注意括號中的min-width: 768px，就是這段樣式起做用的條件即這段樣式起做用的最小屏幕寬度，屏幕寬度小於它是不起做用的。除了min-width,也可使用max-width來做爲條件。

說到這裏可能有的人就會問那若是我想要這段樣式在特定的寬度區間內起做用該怎麼寫呢？很簡單

@media screen and (min-width:320px) and (max-width:720px) ，即當設備屏幕寬度在320px——720px之間時，樣式纔會生效。

細心地同窗可能注意到這句代碼：

咱們先看下它裏面的幾個屬性：

width=device-width:寬度等於當前設備的寬度（height相似於width）

initial-scale=1：初始的縮放比例（默認爲1）

maximum-scale=1：容許用戶縮放到得最大比例（默認爲1）

user-scalable=no：用戶不能手動縮放

其實這段代碼做用就是讓當前viewport的寬度等於設備的寬度,同時縮放比例爲1.0.

看到這裏可能就有什麼說：「哇，媒體查詢好簡單啊！」我只想說一句 too young too simple!!!

爲何呢，由於這種單頁面樣式寫起來的確很簡單，可是在真正的項目中，css文件可能會有幾個甚至十幾個，這時候問題來了！當咱們再用這種寫法去寫的時候你會鬱悶死，由於一樣的寫法在單頁面樣式裏面起做用而在大的項目代碼中可能就會失效！！！！對，就是你滿心歡喜的寫了一大堆，長舒一口氣，哇終於寫完了！可是.....然並卵，你會發現沒起做用。這時候就懵逼了（我就遇到過..........），緣由也很簡單，css樣式是有優先級的，也就是

@media only screen and (min-width: 768px) {

#box { //設備屏幕寬度尺寸大於768px時，這段樣式會起做用

width:300px;

height:300px;

font-size: 24px;

color: white;

background-color:black;

}

這裏面的樣式會比這個頁面不用媒體查詢寫的樣式優先級要低，所以設備在解析的時候會優先查找到沒有用媒體查詢寫的樣式，這時候怎麼辦呢？好，他不是有優先級嗎，咱們讓他處在同一個優先級上也就是這樣寫：

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

#box { //設備屏幕寬度尺寸小於768px時，這段樣式會起做用

width:300px;