静态响应式布局

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

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

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

3.在HTML中为media query准备好<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

4.对移动设备使用media query，常用的有：

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

5.对retina屏幕需要使用2倍尺寸的图片来增加像素密度，用CSS3判断设备为retina

/* ------------- Retina ------------- */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
       only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
       only screen and (min-resolution: 240dpi), /* 标准 */
       only screen and (min-resolution: 2dppx) /* 标准 */
{
.mod .hd h3{
    background-image:url();
    background-size: 50% 50%;
}
}

利用background-size属性。使用100% 100%来让图片撑满，50%来缩小一倍。

有2个可选值，第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只指定1个值得，则第2个值默认为auto。

　　background-size:cover; 等比扩展图片来填满元素

　　background-size:contain; 等比缩小图片来适应元素的尺寸

另外提到一个比较神奇的属性: background-position:center;

它有使得背景图片自然的根据元素宽度渐渐显示并保持居中的能力，效果媲美js。

真正的响应式网站必定有pc乃至pad和smartphone两套设计。这样所以缩放的范围并不大，比如980到1920之间为一套。那么真正用到js缩放元素的地方也不多，多数靠css可以完成。

布局的时候往往采用一个100%宽的inline-block属性wrapper，撑满背景。然后固定宽度，比如980的block属性inner来margin：0 auto。

其他需要等比例缩放的地方可借助js完成，见我的另一篇博客自适应全屏与居中算法

参考文章：

响应式图片

图片液态化

CSS为Retina屏幕替换图片