資訊專欄INFORMATION COLUMN
摘要：媒體查詢的用法媒體查詢包含一個(gè)可選的媒體類型和，滿足規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為或。還有一個(gè)與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。
媒體查詢的用法 media 媒體查詢包含一個(gè)可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為true或false。如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設(shè)備類型，并且所有的表達(dá)式的值都是true，那么該媒體查詢的結(jié)果為true.
500px-800px之間的設(shè)備 @media screen and (min-width: 500px) and (max-width: 800px) { ... }
最小寬度500 @media screen and (min-width: 500px){... }
在非打印設(shè)備下 @media not print and (max-width: 1200px)
使用方式： 實(shí)例 html：
響應(yīng)式設(shè)計(jì)
頭部
左邊
中間
右邊
底部
css1：
.body{
margin:0;
}
.top,.zhong,.xia{
width:100%;
margin:0 auto;
}
.top{
height:100px;
background:#00f;
}
.zhong{
overflow:hidden;
}
.xia{
height:100px;
background:#ff0;
}
.left,.zhon,.right{
float:left;
}
.left{
width:100%;
height:200px;
background:#0f0;
}
.zhon{
width:100%;
height:350px;
background:#f00;
}
.right{
width:100%;
height:200px;
background:#00f;
}
css2：
.body{
margin:0;
}
.top,.zhong,.xia{
width:100%;
margin:0 auto;
}
.top{
height:100px;
background:#00f;
}
.zhong{
overflow:hidden;
}
.xia{
height:100px;
background:#ff0;
}
.left,.zhon,.right{
float:left;
}
.left{
width:30%;
height:200px;
background:#0f0;
}
.zhon{
width:70%;
height:350px;
background:#f00;
}
.right{
width:100%;
height:200px;
background:#00f;
}
css3:
.body{
margin:0;
}
.top,.zhong,.xia{
width:100%;
margin:0 auto;
}
.top{
height:100px;
background:#00f;
}
.zhong{
overflow:hidden;
}
.xia{
height:100px;
background:#ff0;
}
.left,.zhon,.right{
float:left;
background:#0f0;
}
.left{
width:20%;
height:200px;
}
.zhon{
width:45%;
height:350px;
margin:0 20px;
}
.right{
width:25%;
height:200px;
}
運(yùn)行結(jié)果：
1、
2、
3、
總結(jié)：.媒體查詢Media Queries能在不同的條件下使用不同的樣式，使頁(yè)面在不同在終端設(shè)備下達(dá)到不同的渲染效果；到目前為止，CSS3 Media Queries得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支持之外，在所有現(xiàn)代瀏覽器中都可以完美支持。還有一個(gè)與眾不同的是，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113537.html
摘要：媒體查詢的用法媒體查詢包含一個(gè)可選的媒體類型和，滿足規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為或。還有一個(gè)與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。 媒體查詢的用法 media 媒體查詢包含一個(gè)可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為true或false。如...
摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁(yè)面元素位置發(fā)生改變，但在每個(gè)靜態(tài)布局中，頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。即創(chuàng)建多個(gè)流體式布局，分別對(duì)應(yīng)一個(gè)屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 即傳統(tǒng)Web設(shè)計(jì)，網(wǎng)頁(yè)上的所有元素的尺寸一律使用px作為單位。 1、布局特點(diǎn) 不管瀏覽器尺寸具體是多少，網(wǎng)頁(yè)布局始終按照最初寫代碼時(shí)的布局來(lái)顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)...
摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁(yè)面元素位置發(fā)生改變，但在每個(gè)靜態(tài)布局中，頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。即創(chuàng)建多個(gè)流體式布局，分別對(duì)應(yīng)一個(gè)屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 即傳統(tǒng)Web設(shè)計(jì)，網(wǎng)頁(yè)上的所有元素的尺寸一律使用px作為單位。 1、布局特點(diǎn) 不管瀏覽器尺寸具體是多少，網(wǎng)頁(yè)布局始終按照最初寫代碼時(shí)的布局來(lái)顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)...
摘要：本文主要介紹一些響應(yīng)式布局容易忽略但又很重要的知識(shí)點(diǎn)。單位不僅僅可以用來(lái)設(shè)置字號(hào)，還可以設(shè)置任何盒模型的屬性，比如有一點(diǎn)優(yōu)勢(shì)就是可以和媒體查詢配合，實(shí)現(xiàn)響應(yīng)式布局運(yùn)用場(chǎng)景如果我們做的頁(yè)面只在移動(dòng)端訪問(wèn)，這是因?yàn)椴患嫒莸桶姹镜臑g覽器。 一、前言 響應(yīng)式Web設(shè)計(jì)可以讓一個(gè)網(wǎng)站同時(shí)適配多種設(shè)備和多個(gè)屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。...
閱讀 1794·2023-04-25 22:42
閱讀 2218·2021-09-22 15:16
閱讀 3495·2021-08-30 09:44
閱讀 493·2019-08-29 16:44
閱讀 3316·2019-08-29 16:20
閱讀 2521·2019-08-29 16:12
閱讀 3394·2019-08-29 16:07
閱讀 673·2019-08-29 15:08
