溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS怎么實現響應式布局，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
用CSS實現響應式布局
響應式布局感覺很高大上，很難，但實際上只用CSS也能實現響應式布局
要用的就是CSS中的沒接查詢，下面就介紹一下怎么運用：
使用@media 的三種方法
1.直接在CSS文件中使用：
@media 類型 and (條件1) and (條件二){
css樣式
}
@media screen and (max-width:1024px) {
body{
background-color: red;
}
}2.使用@import導入
@import url("css/moxie.css") all and (max-width:980px);3.也是最常用的方法--直接使用link連接，media屬性用于設置查詢方法
<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>
下面是一個簡單的響應式的布局HTMl代碼：
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>響應式</title> <link rel="stylesheet" type="text/css" href="index.css"/> <link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/> <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/> </head> <body> <div class="header">頭部</div> <div class="main clearfix"> <div class="left">左邊</div> <div class="center">中間</div> <div class="right">右邊</div> </div> <div class="footer">底部</div> </body> </html>
下面是CSS樣式：
*{
margin:0;
padding:0;
text-align:center;
color:yellow;
}
.header{
width:100%;
height:100px;
background:#ccc;
line-height:100px;
}
.main{
background:green;
width:100%;
}
.clearfix:after{
display:block;
height:0;
content:"";
visibility:hidden;
clear:both;
}
.left,.center,.right{
float:left;
}
.left{
width:20%;
background:#112993;
height:300px;
font-size:50px;
line-height:300px;
}
.center{
width:60%;
background:#ff0;
height:400px;
color:#fff;
font-size:50px;
line-height:400px;
}
.right{
width:20%;
background:#f0f;
height:300px;
font-size:50px;
line-height:300px;
}
.footer{
width:100%;
height:50px;
background:#000;
line-height:50px;
}<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>樣式代碼
.right{
float:none;
width:100%;
background:#f0f;
clear:both;
}
.left{
width:30%;
}
.center{
width:70%;
}
.main{
height:800px;
}<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>樣式代碼
.left,.center,.right{
float:none;
width:100%;
}當窗口大于1024px 時，指揮被壓縮，并不會發生其他變化：
當窗口小于1024px，大于720px的時候，右側欄取消浮動，在下邊顯示：
當窗口小于720px的時候，左中右三欄，全都取消浮動，寬度100%：
看完了這篇文章，相信你對“CSS怎么實現響應式布局”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
