国产一二三区在线,午夜一级毛片不卡,国产图色

輕輕松松學(xué)CSS:利用媒體查詢創(chuàng)建響應(yīng)式布局

　媒體查詢，針對不同的媒體類型定制不同的樣式規(guī)則。在網(wǎng)站開發(fā)中，可以創(chuàng)建響應(yīng)式布局。

一、初步認(rèn)識媒體查詢在響應(yīng)式布局中的應(yīng)用

下面實(shí)例在屏幕可視窗口尺寸大于 480 像素時將菜單浮動到頁面左側(cè)

 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 像素時將菜單浮動到頁面左側(cè)。</p>
44   </div>
45 </div>
46 
47 </body>
48 </html>

View Code

關(guān)鍵代碼：

1 @media screen and (min-width: 480px) {
2     #leftsidebar {width: 200px; float: left;}
3     #main {margin-left:216px;}
4 }

screen，是最常見的媒體類型的一種，用于電腦屏幕，平板電腦，智能手機(jī)等
and，操作符，表示同時具備的條件，敲代碼時兩邊一定有空格
min-width:定義輸出設(shè)備中的頁面最小可見區(qū)域?qū)挾?/span>
以上代碼的意思就是在可見區(qū)域?qū)挾却笥诘扔?80px時，leftsidebar與main左右排列（小于480px時，leftsidebar和main都是塊元素，當(dāng)然是上下排列）

二、媒體查詢與bootstrap的姻緣

很多網(wǎng)頁都是基于網(wǎng)格設(shè)計(jì)的，響應(yīng)式網(wǎng)格視圖通常是12列，寬度為100%，在瀏覽器窗口大小調(diào)整時會自動伸縮（和bootstrap的柵格系統(tǒng)是不是相似?）

  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

針對桌面設(shè)備(電腦):
第一和第三部分跨越 3 列。中間部分跨域 6 列

針對平板設(shè)備:
第一部分跨域 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>

針對手機(jī)設(shè)備：上下排列

[class*="col-"] {
    width: 100%;
}

提示：上邊的代碼中關(guān)鍵的部分還有：

1 [class*="col-"]{
2     float:left;
3 }
4 *{
5     box-sizing:border-box;
6 }

具體原因不再解釋，讀者有興趣可以看我的博客里關(guān)于浮動和盒子模型部分

上邊這個例子和bootstrap更接近了一步
我們再來說說什么是bootstrap？Bootstrap是非常受歡迎的響應(yīng)式前端框架，它是基于HTML、JavaScript、CSS的，它簡潔靈活，使Web開發(fā)更加快捷
下面舉一個簡單例子

 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柵欄系統(tǒng)css中的col-sm-*的意義：
.col-sm- 小屏幕平板 (≥768px)
當(dāng)width>=768px時，Column1、Column2、Column3左中右三列（一行內(nèi)）
當(dāng)width<768px時，Column1、Column2、Column3上中下三行排列

由此可見，Bootstrap就是利用了CSS的媒體查詢才實(shí)現(xiàn)的響應(yīng)式布局（當(dāng)然更復(fù)雜的功能還得用到JavaScript）！

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区