Demo —— 響應式布局
響應式布局實例演示
What is 響應式布局？
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。
優點：面對不同分辨率設備靈活性強，能夠快捷解決多設備顯示適應問題。
缺點：兼容各種設備工作量大，效率低下；代碼累贅，會出現隱藏無用的元素，加載時間加長；其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果；一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況。
響應式布局的引入方法（即，使用媒體查詢的三種方式）
1、直接在CSS中使用
@media 類型（常選all/screen） and（條件1） and（條件2）{ CSS選擇器{ CSS屬性：屬性值； } }
2、使用link鏈接CSS，media屬性可以設置媒體查詢方式 （常用）
eg. <link rel="stylesheet" type="text/css" href="css/02-響應式布局.css" media="all and (max-width:800px)"/>
3、使用Import導入，直接在url( )後面空格，間接媒體查詢方式
eg. @import url("css/XXX.css") all and (max-width:800px); 條件符合後在鏈接CSS文件
響應式布局典型 Demo —— HTML部分
首先，新建一個HTML 文件，命名Demo.html. 接著，新建一個CSS文件，文件名與HTML文件相同，Demo.css
在HTML文件，head標簽中引入viewport視口功能，如下：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
接著，將HTML文件與CSS文件關聯 ：<link rel="stylesheet" type="text/css" href="css/Demo.css"/>
在HTML文件，body標簽中寫入結構語句：
<body> <header id="header"> <ul> <li>header1</li> <li>header2</li> <li>header3</li> <li>header4</li> <li>header5</li> </ul> <div> icon </div> </header> <section id="main"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </section> <footer id="foot"> footer </footer> </body>
響應式布局典型 Demo —— CSS部分首先，在PC端我想實現如下效果，顯示header1-5導航欄，隱藏右上角小div：
在CSS文件中，我先寫入PC端的CSS樣式，在PC端的基礎上進行pad、手機端的更改，代碼如下：
*{ /* 使用通用選擇器進行整體共有樣式設置 */ margin: 0px; padding: 0px; font-size: 48px; text-align: center; box-sizing: border-box; } #header, #main, /*給頭部/主體/底部同時設置寬/高/背景色, 水平垂直居中 */ #foot{ height: 100px; width: 1200px; background-color: pink; line-height: 100px; margin: 0 auto; min-width: 300px; } #header ul{ width: 80%; } #header ul li{ float: left; width: 20%; list-style: none; font-size: 20px; } #header div{ /* li 全部浮動,父盒子ul塌陷,相當於不存在了，div才能浮動到ul右側*/ display: none; width: 50px; height: 50px; background-color: yellow; float: right; line-height: 50px; font-size: 20px; margin-top: 25px; margin-right: 25px; } #main{ height: 520px; /* 給主體設置高度/文字垂直居中/上下邊框*/ line-height: 520px; border-bottom: 10px solid white; border-top: 10px solid white; }
/* 將主體分成三部分,左:中:右=1:2:1 分別設置不同背景色 浮動*/ #main .left{ width: 25%; height: 500px; background-color: greenyellow; float: left; } #main .center{ width: 50%; height: 500px; background-color: orange; border-right: 10px solid white; border-left: 10px solid white; float: left; } #main .right{ width: 25%; height: 500px; background-color: paleturquoise; float: left; }
接下來，進行響應式的設置，我直接在CSS中引入媒體查詢。
然後是Pad端（假設屏幕最大寬度900px），主體右端隱藏，類似於新浪微博的顯示方式，有興趣的可以看看，效果圖如下：
CSS樣式如下：
@media screen and (max-width: 1200px) { /* PC端頭部/主體/底部寬度100%顯示*/ #header, #main, #foot{ width: 100%; } } /*pad端主體只顯示左:中近似=1:2,center左邊有border部分，右border隱藏*/ @media screen and (max-width:900px ) { #main .right{ display: none; } #main .left{ width: 35%; } #main .center{ width: 65%; border-right: hidden; } }
最後是手機端(假設最大寬度550px)，我想實現的效果是header1-5導航欄隱藏，右側小div顯示，主體部分的左中右改為上中下顯示，顯示效果如下：
手機端CSS樣式代碼如下：
/*手機端整體高度增大,主體左中右浮動取消, 寬度都為100%*/ @media screen and (max-width: 550px) { #main{ height: 920px; } #main .left{ float: none; width: 100%; height: 250px; line-height: 250px; } /* center左右border改為上下border,為了不擠壓內容（IE盒子）,主體總寬度加20px*/ #main .center{ float: none; width: 100%; height: 400px; line-height: 400px; border-left: hidden; border-bottom: 10px solid white; border-top: 10px solid white; } #main .right{ /*主體右端重新顯示*/ display: block; float: none; width: 100%; height: 250px; line-height: 250px; } } #header ul{ /*頭部導航欄ul隱藏,右上角小div由隱藏改為顯示 */ display: none; } #header div{ display: block; }
到這裏 我的響應式布局就介紹完了，是不是很神奇，很有趣，也很容易理解呢？
喜歡請收藏呦~
Demo —— 響應式布局