Media query 詳解
阿新 • • 發佈：2019-01-22
最近更新文章不及時,在此說聲抱歉,關於 media query 在網路上實際已經有很多成型的文章,但是在編者檢視之後,發現並沒有特別基礎的入門教程,所以今天上午特意去對知識進行了整理,於是就有了下面的這篇文章,希望在閱讀過這篇文章之後,能夠幫助到你,感謝.
������5月24是作者的生日呦,希望大家多多留言點贊!������
0.前言
很多時候,前期使用 HTML 和 CSS 設計的樣式非常精美,但是經常會因為對方的裝置,瀏覽器等的原因,解析度達不到要求,最後導致使用者看到的介面非常醜陋,很多內容位置發生改變.
為了解決這個問題,,從 CSS 2.1 開始就定義了各種媒體型別(如顯示器,便攜瀏覽器等),允許設計者針對不用的媒體裝置進行不同的 CSS 樣式設計.
1.語法
語法規則如下:
@media not|only 裝置型別 [and 裝置特性] *
在上面的語法中,[and 裝置特性] 部分可以出現 0 ~ N 次,通過使用多個 [and 裝置特性] 可以對多個裝置特性進行匹配.
media query 語法格式中支援裝置如下:
| - | - |
|---|---|
| all | 適用於所有的裝置 |
| aural | 適用於語音和音訊合成器 |
| braille | 適用於觸覺反饋裝置 |
| embossed | 適用於凸點文字(盲文)印刷裝置 |
| handheld | 適用於小型或者手提裝置 |
| 適用於印表機 | |
| projection | 適用於投影影象,如幻燈片 |
| sceen | 適用於計算機顯示器(最常用的一個) |
| tty | 適用於使用固定間距字元格的裝置,如電傳打字機和終端. |
| tv | 適用於電視類裝置 |
media query 語法格式中裝置特性如下:
| 特性 | 合理的特性值 | 是否支援 max/min | 說明 |
|---|---|---|---|
| width | 帶單位的長度值,如100px | 是 | 匹配瀏覽器寬度 |
| height | 帶單位的長度值,如100px | 是 | 匹配瀏覽器高度 |
| aspect-ratio | 比例值,如 16/9 | 是 | 匹配瀏覽器的寬度值和高度值的比例 |
| device-width | 帶單位的長度值,如100px | 是 | 匹配裝置解析度的寬度值 |
| device-height | 帶單位的長度值,如100px | 是 | 匹配裝置解析度的高度值 |
| device-aspect-ratio | 比例值,如 16/9 | 是 | 匹配裝置解析度的寬度值與高度值的比例 |
| color | 整數值 | 是 | 匹配裝置使用多少位的色深,比如真彩色是32,如果不是彩色裝置則為 0 |
| color-index | 整數值 | 是 | 匹配色彩表中的顏色數 |
| monochrome | 整數值 | 是 | 匹配單色幀緩衝器中每畫素的位(bit)數,如果不是單色裝置,這個數值為 0 |
| resolution | 解析度,如300dpi | 是 | 匹配裝置的物理解析度 |
| scan | 只能是 progressive 或者 interlace | 否 | 匹配裝置的掃描方式,其中 progressive 代表逐行掃描, interlace 代表隔行掃描 |
| grid | 只能是 0 或 1 | 否 | 匹配裝置是否基於柵格,1代表基於柵格,0代表其他型別 |
我們發現是不是很牛 X ,幾乎裝置所有物理特性我們都可以獲取到,這樣我們是不是也可以根據我們獲取到的特性的內容,我們可以去針對不同的內容去進行設定了?那我們現在就根據上面的特性來去做幾個簡單的例子.
2.示例
首先我們先來看一個基礎案例,就是我們通過我們改變瀏覽器的大小,來讓我們瀏覽器中的文字也隨之變化,給使用者一種,我們的介面內容是可以隨著瀏覽器的改變而改變的感覺.
2.1 案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body {
height:100%;
}
html{font-size:10px}
h2 {
font-size:1.9rem;
}
/*媒體查詢*/
@media screen and (min-width:321px) and (max-width:375px){
html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){
html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){
html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){
html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){
html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){
html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
</style>
</head>
<body>
<div>
<h2>我是李先生</h2>
<span>李鵬</span>
<span>2016年05月24日</span>
</div>
</body>
</html>大家可以看到,我在程式碼中首先獲取的 裝置型別 是我們的螢幕.
之後我們通過 and 裝置特性 對不同情況下的文字大小進行了修改,如下圖.
@media screen and (min-width:321px) and (max-width:375px){
html{font-size:11px}}
2.2 案例二
讓我們的網頁中的內容結構隨著我們的介面大小而不斷改變,具體樣例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*設定預設的 CSS 樣式*/
.container{
text-align: center;
margin: 10px auto;
width: 750px;
}
.container>div{
border: 1px solid rgba(0,0,0,0.3);
text-align: left;
/*設定 HTML 元件的 width 屬性包括邊框*/
box-sizing: border-box;
background-color: #96FF6B;
padding: 5px;
}
div .left{
width: 300px;
height: 230px;
float: left;
}
div .main{
width: 450px;
height: 230px;
float: left;
/*這裡不採用 clearfix 的用法了,直接 clear */
clear:right;
}
div .right{
width: 750px;
float: left;
}
@media screen and (min-width: 1000px){
.container{
text-align: center;
margin: 10px auto;
width: 960px;
}
.container>div{
border: 1px solid rgba(0,0,0,0.3);
/*設定 HTML 元件的 width 屬性包括邊框*/
box-sizing: border-box;
background-color: #96FF6B;
padding: 5px;
}
div .left{
width: 240px;
height: 240px;
float: left;
}
div .main{
width: 460px;
height: 240px;
float: left;
}
div .right{
width: 260px;
height: 240px;
float: left;
}
}
@media screen and (min-width: 180px) and (max-width: 500px){
.container{
text-align: center;
margin: 10px auto;
width: 450px;
}
.container>div{
border: 1px solid rgba(0,0,0,0.3);
/*設定 HTML 元件的 width 屬性包括邊框*/
box-sizing: border-box;
background-color: #96FF6B;
padding: 5px;
}
div .left{
width: 450px;
height: 240px;
float: left;
}
div .main{
width: 450px;
height: 240px;
float: left;
}
div .right{
width: 450px;
height: 240px;
float: left;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h2>我是你們的李先生呀</h2>
<ul>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
</ul>
</div>
<div class="main">
<h2>我是你們的李先生呀</h2>
<p>MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP</p>
</div>
<div class="right">
<h2>我是你們的李先生呀</h2>
<ul>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
</ul>
</div>
</div>
</body>
</html>具體效果展示如下:
