這篇文章分享給大家的內容是關於css響應式的實現代碼及效果,內容很有參考價值,希望可以幫到有需要的小夥伴。
1.CSS 來實現響應式
CSS實現響應式網站的布局要用到的就是CSS中的媒體查詢接下來來簡單介紹一下:
我們只需用到width衍生出的max-width這個屬性,定義輸出裝置中的頁面可見地區寬度來控制該改變的樣式即可。
html代碼如下:
<!doctype html><html><head> <meta charset="utf-8"/> <title>響應式</title> <link rel="stylesheet" type="text/css" href="demo01.css" media="screen and (min-width:1024px)"/> <link rel="stylesheet" type="text/css" href="demo03.css" media="screen and (max-width:1024px) and (min-width:450px)"/> <link rel="stylesheet" type="text/css" href="demo02.css" media="screen and (max-width:450px)"/></head><body> <p class="header"> 頭部 </p> <p class="container clearfix"> <p class="left">左部</p> <p class="center">中部</p> <p class="right">右部</p> </p> <p class="footer">底部</p></body></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三部分豎直排列顯示,若視窗持續縮小,不在發生變化,地區被壓縮