关于响应式

之前一直用百分比缩放来做响应式设计（就类似于路由器设置页面的效果），是因为百度出来的结果是：媒体查询方法。

我看了例子，几乎都是要根据手机分辨率来分别写效果，当时觉得挺麻烦的，因为这就类似于你写了好几次同一个页面。

这次，因为时间相对宽裕，所以我就尝试了下用媒体查询的方法写。毕竟媒体查询比起百分比显示的方法来说更灵活。在实践的过程中我发现媒体查询其实并没有我想象中的那么艰苦，因为主要重构的是元素的位置，而元素的独立的视觉效果除了大小外都是可以不改的

首先我做的是，把设计稿里面的css效果都做出来，暂时不考虑大小的问题，把整个同比例的效果做出来就好

其次做完css的效果后就需要把当前市场主流的移动端的分辨率给分成几个部分了，就像数学上的区间，比如：可以分成分辨率宽度<320px、320px-480px之类的。写法有好几种，在这里只介绍一两种

第一种：以最小/最大宽度为分割点：

//最小宽度

@media (min-width: 320px){

	head{
		font-size: 12px;
	}
}
@media(min-width: 480px){
	head{
		font-size: 15px;
	}
}

//最大宽度

<pre name="code" class="css">@media (max-width: 320px){
	head{
		font-size: 12px;
	}
}
@media(max-width: 480px){
	head{
		font-size: 15px;
	}
}

第二种，用and构成的复杂区间

@media screen and (min-width: 320px)and (max-width: 480px){
	head{
		font-size: 15px;
	}
}
@media screen and (min-width: 480px)and (max-width: 640px){
	head{
		font-size: 20px;
	}
}

三， 分类之后呢，就可以根据设计图将各个板块的代码@media (min-width:320px){}等里面去。值得注意的是，其实整个css需要重新写的就只有各个元素的位置或者大小，特别是字体大小。有些元素的大小和部分位置的代码是可以用百分比写在公共部分的，这样就可以减少代码量了~

可能有人会注意到为什么上面的代码段中有“screen”，screen 适用于计算机彩色屏幕。
在此我就只记录这些基础的常用的，更多的细节可以查看这里