静态响应式布局

大家都知道响应式布局的要素有几点：

1.用百分比来定位，好处是不需要用js就可以根据浏览器的缩放拉伸和缩小元素。

2.用em来作为度量单位。由于是相对单位，比像素更灵活一点。虽然在我目前还没发现经过viewport转换后em和px用起来有什么区别 t.t

3.在HTML中为media query准备好

/*pad*/
@media screen and (min-width: 769px){}
/*horizontal iphone5 568x320*/
@media screen and (max-width: 768px) and (min-width: 481px){}
/*horizontal iphone4 480x320,large android*/
@media screen and (max-width: 480px) and (min-width: 380px){}
/*=====vertical iphone5 320x568,vertical iphone4 320x480 ,Android=====*/
@media screen and (max-width: 379px) and (min-width: 320px){}
/*-----small Android-----*/
@media screen and (max-width: 319px) and (min-width: 240px){}
/*further small*/
@media screen and (max-width: 239px){}