對響應式web設計的方法實現
- 不言原創
- 2018-07-24 11:17:441657瀏覽
這篇文章分享給大家的內容是關於響應式web設計的方法實現，內容很有參考價值，希望可以幫到有需要的小夥伴。
媒體查詢的用法
media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規範的條件下，包含零個或多個表達式，這些表達式描述了媒體特徵，最終會被解析為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：
nbsp;html> <meta> <title>响应式设计</title> <link> <link> <link> <p>头部</p> <p> </p><p>左边</p> <p>中间</p> <p>右边</p> <p>底部</p>
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、
### ###總結：.媒體查詢Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端設備下達到不同的渲染效果；到目前為止，CSS3 Media Queries得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支援之外，在所有現代瀏覽器中都可以完美支援。還有一個與眾不同的是，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中加上前綴。 ######相關推薦：#########關於css響應式的實作程式碼及效果###############CSS實作響應式佈局的方法# ###########以上是對響應式web設計的方法實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn