html中响应式查询,css 响应式（媒介查询）
1.CSS 來實現(xiàn)響應(yīng)式
CSS實現(xiàn)響應(yīng)式網(wǎng)站的布局要用到的就是CSS中的媒體查詢接下來來簡單介紹一下：
@media 類型 and (條件1) and (條件二){css樣式}
我們只需用到width衍生出的max-width這個屬性，定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾葋砜刂圃摳淖兊臉邮郊纯伞?/p>
html代碼如下：
響應(yīng)式頭部
左部中部右部底部demo01.css樣式如下：
body{
margin:0;
text-align:center;
}
.header{
height:100px;
background-color:red;
}
.container{
height:400px;
background-color:pink;
}
.clearfix:after{
display:block;
content:"";
visibility:hidden;
height:0;
clear:both;
}
.footer{
height:100px;
background-color:blue;
}
.left{
width:20%;
background-color:orange;
float:left;
height:300px;
}
.center{
width:55%;
background-color:gray;
float:left;
height:300px;
margin:0 2.5%;
}
.right{
width:20%;
background-color:yellow;
float:left;
height:300px;
}
demo02的樣式如下：
body{
margin:0;
text-align:center;
}
.header{
height:100px;
background-color:red;
}
.container{
height:400px;
background-color:pink;
}
.clearfix:after{
display:block;
content:"";
visibility:hidden;
height:0;
clear:both;
}
.footer{
height:100px;
background-color:blue;
}
.left{
width:30%;
background-color:orange;
float:left;
height:300px;
}
.center{
width:70%;
background-color:gray;
float:left;
height:300px;
}
.right{
width:100%;
background-color:yellow;
height:300px;
}
demo03的樣式：
body{
margin:0;
text-align:center;
}
.header{
height:100px;
background-color:red;
}
.container{
background-color:pink;
}
.clearfix:after{
display:block;
content:"";
visibility:hidden;
height:0;
clear:both;
}
.footer{
height:100px;
background-color:blue;
}
.left{
width:100%;
background-color:orange;
height:300px;
}
.center{
width:100%;
background-color:gray;
height:300px;
}
.right{
width:100%;
background-color:yellow;
height:300px;
}
效果圖：
窗口大于1024px時顯示的樣子
當大于640小于980時，右側(cè)欄在底部
當小于480時，導(dǎo)航欄折疊，body三部分豎直排列顯示，若窗口持續(xù)縮小，不在發(fā)生變化，區(qū)域被壓縮
效果總圖：
持續(xù)更新，歡迎大家！
總結(jié)
以上是生活随笔為你收集整理的html中响应式查询,css 响应式（媒介查询）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5常用的属性标签,HTML5常用
- 下一篇： 学计算机怎么收费呢,学计算机怎么收费服务