響應式web設計（一）

不少網頁都是基於網格設計的，這說明網頁是按列來佈局的。

原理就是講網頁分紅十二列，每列的寬度是8.33%，元素的寬度，用幾列來定義，正是由於這一點，才能夠作到響應，就是隨着窗口寬度的變化，給元素分配不一樣的列數！

好比：

大於1280px的時候，三個元素，兩邊的各佔三列，中間的佔六列

小於1280px大於980px的時候，左邊佔六列，中間的佔六列，右邊佔十二列（此時右邊就換行了）

小於980px的時候，左右中都佔十二列，各佔一行。

咱們怎麼獲取當前窗口的寬度呢，就須要用到實現響應式的基礎：媒體查詢

@media only screen and （max-width：xxx）and （min-width：xxx）{srules} max-width表明：當前窗口寬度小於max-width時，執行內部代碼   min-width：表明窗口寬度大於min-width時候，纔會執行內部的代碼。 

@media  (max-device-width:xxx) and (min-device-width:xxx){srules} device：加device後，能夠獲取移動端設備的寬度

 orientation:landscape /portrait  前者表明橫屏，後者表明豎屏；能夠直接用and鏈接在上面語句中作限制

關鍵字：

only：表明限定某種設備

（幾種經常使用的設備）all 全部設備 handheld：移動設備 screen：電腦屏幕 tv 電視

and：用來鏈接條件

not：排除某種設備

明白了這些咱們就能夠作一個簡單的響應式程序

　　　　　　　　　　*{
			box-sizing: border-box;
		}
		.top{
			padding: 8px;
			background: skyblue;
			height: 50px;
		}
		.left>ul{
			list-style-type:none;
		}
		.left>ul>li{
			padding: 8px;
			height: 30px;
			font-size:14px;
			background: deepskyblue;
		}
		.middle{
			padding: 20px;
			text-align: center;
		}
		.right{
			height: 152px;
			padding:16px;
			/*height: 120px;*/
			background: pink;
			/*transition:*/
		}
		.bottom{
			padding: 8px;
			height: 50px;
			background: greenyellow;
		}
		[class *= "col-"]{
			float: left;
		}
		.col-m-1 {width: 8.33%;}
	    .col-m-2 {width: 16.66%;}
	    .col-m-3 {width: 25%;}
	    .col-m-4 {width: 33.33%;}
	    .col-m-5 {width: 41.66%;}
	    .col-m-6 {width: 50%;}
	    .col-m-7 {width: 58.33%;}
	    .col-m-8 {width: 66.66%;}
	    .col-m-9 {width: 75%;}
	    .col-m-10 {width: 83.33%;}
	    .col-m-11 {width: 91.66%;}
	    .col-m-12 {width: 100%;}
	    @media only screen and (max-width: 1280px) {/*max:寬度小於它,纔會執行內部代碼  min:寬度大於它就會執行內部代碼*/	    	
	    	.col-1 {width: 8.33%;}
		    .col-2 {width: 16.66%;}
		    .col-3 {width: 25%;}
		    .col-4 {width: 33.33%;}
		    .col-5 {width: 41.66%;}
		    .col-6 {width: 50%;}
		    .col-7 {width: 58.33%;}
		    .col-8 {width: 66.66%;}
		    .col-9 {width: 75%;}
		    .col-10 {width: 83.33%;}
		    .col-11 {width: 91.66%;}
		    .col-12 {width: 100%;}
	    }
	    @media only screen and (max-width:980px ) {
	    	.col-x-1 {width: 8.33%;}
		    .col-x-2 {width: 16.66%;}
		    .col-x-3 {width: 25%;}
		    .col-x-4 {width: 33.33%;}
		    .col-x-5 {width: 41.66%;}
		    .col-x-6 {width: 50%;}
		    .col-x-7 {width: 58.33%;}
		    .col-x-8 {width: 66.66%;}
		    .col-x-9 {width: 75%;}
		    .col-x-10 {width: 83.33%;}
		    .col-x-11 {width: 91.66%;}
		    .col-x-12 {width: 100%;}
	    }
		    

　　

　　　　　　　　　　<div class = "top col-m-12" >
　　　　　　　　　　　　這就是一個top欄
　　　　　　　　　　</div>
　　　　　　　　　　<div class = "left col-m-3 col-6 col-x-12">
			<ul>
				<li>baidu</li>
				<li>Ali</li>
				<li>JD</li>
				<li>Tecent</li>
			</ul>
		</div>
		<div class = "middle col-m-6 col-6 col-x-12">
			我一我的喝酒，一我的跌進擁擠的人潮
		</div>
		<div class = "right col-m-3 col-12 col-x-12">
			wow！fatanstic！
		</div>
		<div class = "bottom col-m-12">
			just bottom
		</div>

　　明白了原理以後，這些代碼爲何這麼寫就很容易明白了

須要注意的是：咱們給頁面全部的原色加樣式的時候有這麼一句代碼：

box-sizing：border-box

正常狀況下咱們默認的盒模型是 content-box，content-box盒子的寬高爲：width+padding+border border-box的盒子的寬高就是咱們給他設的width

border-box沒有底線，你給我jiaborder padding 我都用本身的地盤來分給它們，content-box會一直向外侵略，佔據別的空間。因此咱們須要有這樣一句代碼，保證在給元素加padding或者border的時候就不會致使他的寬度變化。

大於1280px：

大於980小於1280

 

 小於980：