您好,登錄后才能下訂單哦!
小編給大家分享一下CSS怎么實(shí)現(xiàn)響應(yīng)式布局,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
用CSS實(shí)現(xiàn)響應(yīng)式布局
響應(yīng)式布局感覺很高大上,很難,但實(shí)際上只用CSS也能實(shí)現(xiàn)響應(yīng)式布局
要用的就是CSS中的沒接查詢,下面就介紹一下怎么運(yùn)用:
使用@media 的三種方法
1.直接在CSS文件中使用:
@media 類型 and (條件1) and (條件二){ css樣式 } @media screen and (max-width:1024px) { body{ background-color: red; } }
2.使用@import導(dǎo)入
@import url("css/moxie.css") all and (max-width:980px);
3.也是最常用的方法--直接使用link連接,media屬性用于設(shè)置查詢方法
<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>
下面是一個(gè)簡(jiǎn)單的響應(yīng)式的布局HTMl代碼:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>響應(yīng)式</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%; }
當(dāng)窗口大于1024px 時(shí),指揮被壓縮,并不會(huì)發(fā)生其他變化:
當(dāng)窗口小于1024px,大于720px的時(shí)候,右側(cè)欄取消浮動(dòng),在下邊顯示:
當(dāng)窗口小于720px的時(shí)候,左中右三欄,全都取消浮動(dòng),寬度100%:
看完了這篇文章,相信你對(duì)“CSS怎么實(shí)現(xiàn)響應(yīng)式布局”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。