資訊專欄INFORMATION COLUMN
摘要：媒體查詢的用法媒體查詢包含一個可選的媒體類型和，滿足規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為或。還有一個與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。
媒體查詢的用法 media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設備類型，并且所有的表達式的值都是true，那么該媒體查詢的結果為true.
500px-800px之間的設備 @media screen and (min-width: 500px) and (max-width: 800px) { ... }
最小寬度500 @media screen and (min-width: 500px){... }
在非打印設備下 @media not print and (max-width: 1200px)
使用方式： 實例 html：
響應式設計
頭部
左邊
中間
右邊
底部
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;
}
運行結果：
1、
2、
3、
總結：.媒體查詢Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端設備下達到不同的渲染效果；到目前為止，CSS3 Media Queries得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支持之外，在所有現(xiàn)代瀏覽器中都可以完美支持。還有一個與眾不同的是，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113537.html
摘要：媒體查詢的用法媒體查詢包含一個可選的媒體類型和，滿足規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為或。還有一個與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。 媒體查詢的用法 media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如...
摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁面元素位置發(fā)生改變，但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調整發(fā)生變化。即創(chuàng)建多個流體式布局，分別對應一個屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 即傳統(tǒng)Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規(guī)的pc的網站都是靜態(tài)...
摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁面元素位置發(fā)生改變，但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調整發(fā)生變化。即創(chuàng)建多個流體式布局，分別對應一個屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 即傳統(tǒng)Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規(guī)的pc的網站都是靜態(tài)...
摘要：本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號，還可以設置任何盒模型的屬性，比如有一點優(yōu)勢就是可以和媒體查詢配合，實現(xiàn)響應式布局運用場景如果我們做的頁面只在移動端訪問，這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕，可以讓網站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設備/瀏覽器能力）而變化。...
閱讀 1751·2023-04-25 22:42
閱讀 2202·2021-09-22 15:16
閱讀 3485·2021-08-30 09:44
閱讀 485·2019-08-29 16:44
閱讀 3303·2019-08-29 16:20
閱讀 2512·2019-08-29 16:12
閱讀 3387·2019-08-29 16:07
閱讀 665·2019-08-29 15:08
