html中响应式查询,css 响应式（媒介查询）
1.CSS 來實現響應式
CSS實現響應式網站的布局要用到的就是CSS中的媒體查詢接下來來簡單介紹一下：
@media 類型 and (條件1) and (條件二){css樣式}
我們只需用到width衍生出的max-width這個屬性，定義輸出設備中的頁面可見區域寬度來控制該改變的樣式即可。
html代碼如下：
響應式頭部
左部中部右部底部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時，右側欄在底部
當小于480時，導航欄折疊，body三部分豎直排列顯示，若窗口持續縮小，不在發生變化，區域被壓縮
效果總圖：
持續更新，歡迎大家！
總結
以上是生活随笔為你收集整理的html中响应式查询,css 响应式（媒介查询）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5常用的属性标签,HTML5常用
- 下一篇： 学计算机怎么收费呢,学计算机怎么收费服务