响应式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：