輕輕松松學CSS:利用媒體查詢創建回應式布局
媒體查詢，針對不同的媒體型別定制不同的樣式規則，在網站開發中，可以創建回應式布局，
一、初步認識媒體查詢在回應式布局中的應用
下面實體在螢屏可視視窗尺寸大于 480 像素時將選單浮動到頁面左側
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta charset="utf-8"> 6 <title>test</title> 7 <style> 8 .wrapper {overflow:auto;} 9 10 #main {margin-left: 4px;} 11 #leftsidebar {float: none;width: auto;} 12 #menulist {margin:0;padding:0;} 13 14 .menuitem { 15 background:#CDF0F6; 16 border:1px solid #d4d4d4; 17 border-radius:4px; 18 list-style-type:none; 19 margin:4px; 20 padding:2px; 21 } 22 23 @media screen and (min-width: 480px) { 24 #leftsidebar {width:200px;float:left;} 25 #main {margin-left:216px;} 26 } 27 </style> 28 </head> 29 <body> 30 31 <div class="wrapper"> 32 <div id="leftsidebar"> 33 <ul id="menulist"> 34 <li class="menuitem">Menu-item 1</li> 35 <li class="menuitem">Menu-item 2</li> 36 <li class="menuitem">Menu-item 3</li> 37 <li class="menuitem">Menu-item 4</li> 38 <li class="menuitem">Menu-item 5</li> 39 </ul> 40 </div> 41 <div id="main"> 42 <h1>重置瀏覽器視窗查看效果！</h1> 43 <p>在螢屏可視視窗尺寸大于 480 像素時將選單浮動到頁面左側，</p> 44 </div> 45 </div> 46 47 </body> 48 </html>View Code
關鍵代碼：
1 @media screen and (min-width: 480px) { 2 #leftsidebar {width: 200px; float: left;} 3 #main {margin-left:216px;} 4 }
screen，是最常見的媒體型別的一種，用于電腦螢屏，平板電腦，智能手機等
and，運算子，表示同時具備的條件，敲代碼時兩邊一定有空格
min-width:定義輸出設備中的頁面最小可見區域寬度
以上代碼的意思就是在可見區域寬度大于等于480px時，leftsidebar與main左右排列（小于480px時，leftsidebar和main都是塊元素，當然是上下排列）
二、媒體查詢與bootstrap的姻緣
很多網頁都是基于網格設計的，回應式網格視圖通常是12列，寬度為100%，在瀏覽器視窗大小調整時會自動伸縮（和bootstrap的柵格系統是不是相似?）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta charset="utf-8"> 6 <title>test</title> 7 <style> 8 * { 9 box-sizing: border-box; 10 } 11 .row:after { 12 content: ""; 13 clear: both; 14 display: block; 15 } 16 [class*="col-"] { 17 float: left; 18 padding: 15px; 19 } 20 html { 21 font-family: "Lucida Sans", sans-serif; 22 } 23 .header { 24 background-color: #9933cc; 25 color: #ffffff; 26 padding: 15px; 27 } 28 .menu ul { 29 list-style-type: none; 30 margin: 0; 31 padding: 0; 32 } 33 .menu li { 34 padding: 8px; 35 margin-bottom: 7px; 36 background-color :#33b5e5; 37 color: #ffffff; 38 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 39 } 40 .menu li:hover { 41 background-color: #0099cc; 42 } 43 .aside { 44 background-color: #33b5e5; 45 padding: 15px; 46 color: #ffffff; 47 text-align: center; 48 font-size: 14px; 49 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 50 } 51 .footer { 52 background-color: #0099cc; 53 color: #ffffff; 54 text-align: center; 55 font-size: 12px; 56 padding: 15px; 57 } 58 /* For mobile phones: */ 59 [class*="col-"] { 60 width: 100%; 61 } 62 @media only screen and (min-width: 600px) { 63 /* For tablets: */ 64 .col-m-1 {width: 8.33%;} 65 .col-m-2 {width: 16.66%;} 66 .col-m-3 {width: 25%;} 67 .col-m-4 {width: 33.33%;} 68 .col-m-5 {width: 41.66%;} 69 .col-m-6 {width: 50%;} 70 .col-m-7 {width: 58.33%;} 71 .col-m-8 {width: 66.66%;} 72 .col-m-9 {width: 75%;} 73 .col-m-10 {width: 83.33%;} 74 .col-m-11 {width: 91.66%;} 75 .col-m-12 {width: 100%;} 76 } 77 @media only screen and (min-width: 768px) { 78 /* For desktop: */ 79 .col-1 {width: 8.33%;} 80 .col-2 {width: 16.66%;} 81 .col-3 {width: 25%;} 82 .col-4 {width: 33.33%;} 83 .col-5 {width: 41.66%;} 84 .col-6 {width: 50%;} 85 .col-7 {width: 58.33%;} 86 .col-8 {width: 66.66%;} 87 .col-9 {width: 75%;} 88 .col-10 {width: 83.33%;} 89 .col-11 {width: 91.66%;} 90 .col-12 {width: 100%;} 91 } 92 </style> 93 </head> 94 <body> 95 96 <div class="header"> 97 <h1>header</h1> 98 </div> 99 100 <div class="row"> 101 <div class="col-3 col-m-3 menu"> 102 <ul> 103 <li>The Flight</li> 104 <li>The City</li> 105 <li>The Island</li> 106 <li>The Food</li> 107 </ul> 108 </div> 109 110 <div class="col-6 col-m-9"> 111 <h1>The City</h1> 112 <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 113 </div> 114 115 <div class="col-3 col-m-12"> 116 <div class="aside"> 117 <h2>What?</h2> 118 <p>Chania is a city on the island of Crete.</p> 119 <h2>Where?</h2> 120 <p>Crete is a Greek island in the Mediterranean Sea.</p> 121 <h2>How?</h2> 122 <p>You can reach Chania airport from all over Europe.</p> 123 </div> 124 </div> 125 126 </div> 127 128 <div class="footer"> 129 <p>Resize the browser window to see how the content respond to the resizing.</p> 130 </div> 131 132 </body> 133 </html>View Code
針對桌面設備(電腦):
第一和第三部分跨越 3 列，中間部分跨域 6 列
針對平板設備:
第一部分跨域 3列，第二部分跨越 9 列，第三部分跨域 12 列
<div class="row"> <div class="col-3 col-m-3">...</div> <div class="col-6 col-m-9">...</div> <div class="col-3 col-m-12">...</div> </div>
針對手機設備：上下排列
[class*="col-"] { width: 100%; }
提示：上邊的代碼中關鍵的部分還有：
1 [class*="col-"]{ 2 float:left; 3 } 4 *{ 5 box-sizing:border-box; 6 }
具體原因不再解釋，讀者有興趣可以看我的博客里關于浮動和盒子模型部分
上邊這個例子和bootstrap更接近了一步
我們再來說說什么是bootstrap？Bootstrap是非常受歡迎的回應式前端框架，它是基于HTML、JavaScript、CSS的，它簡潔靈活，使Web開發更加快捷
下面舉一個簡單例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>Bootstrap Example</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> 8 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 9 <script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> 10 </head> 11 <body> 12 13 <div class="container"> 14 <div class="jumbotron"> 15 <h1>My First Bootstrap Page</h1> 16 <p>Resize this responsive page to see the effect!</p> 17 </div> 18 <div class="row"> 19 <div class="col-sm-4"> 20 <h3>Column 1</h3> 21 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 22 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 23 </div> 24 <div class="col-sm-4"> 25 <h3>Column 2</h3> 26 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 27 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 28 </div> 29 <div class="col-sm-4"> 30 <h3>Column 3</h3> 31 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 32 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 33 </div> 34 </div> 35 </div> 36 37 </body> 38 </html>View Code
bootstrap柵欄系統css中的col-sm-*的意義：
.col-sm- 小螢屏 平板 (≥768px)
當width>=768px時，Column1、Column2、Column3左中右三列（一行內）
當width<768px時，Column1、Column2、Column3上中下三行排列
由此可見，Bootstrap就是利用了CSS的媒體查詢才實作的回應式布局（當然更復雜的功能還得用到JavaScript）！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/907.html
標籤：Html/Css
上一篇：CSS實作文字聚光燈效果
下一篇：css選擇器之基本選擇器