响应式设计 实例

随着android和ios设备越来越普及，相应的响应式设计也越来越火。前段时间研究了amazon和国外的几个网站，总结了一些响应式的思路，正好最近company有个专题要制作，就顺着前段时间的研究，做了个响应式的专题，目前专题已完成，现总结下经验，贴出来以供参考，也希望大家给与指导。(专题地址：http://www.tuniu.com/static/lowest/)

响应式有三个核心的东西：

1、css3  的media query属性，这个是响应的一个基石

2、弹性的布局

3、弹性图片

media query属性使用上次有说明，在此就不多做说明。

本人自己感觉，相应式布局的难点在2、3两点。弹性布局要求页面不能用前端最熟悉的px，只能用百分比，但是百分比会带来很多问题，很重要的一点就是图片拉伸和压缩的问题。图片拉伸是指图片的呈现不能比原始尺寸要大，其中包括一是不能变形，即宽和高的比例不能改变，二是图片不能拉伸的比原始图片更高或是更宽（假如图片的原始尺寸是100*50的，图片最宽只能是100，最高只能是50），这个在一般的布局下很好控制，但是在百分比布局和不同分辨率在一起的作用的就很难控制。需要拿着计算器仔细的计算了。

还有一点就是内容的组织，在小屏幕的情况下，一般采取两种方式来改变布局，一是隐藏内容，二是改变内容位置；这样就要求分清内容的主次，在一定的情况下舍弃什么样的内容。还有一点可能和UI设计师关系很大，因为页面在不同的分辨率下呈现的方式不一样，所以设计师要设计不同分辨率呈现样式，具体这个分辨率怎么决定，这次做的专题只是随便选择了几个，具体怎么选择，还没有深入研究，不过大体上选择的分级应该和现在市场上移动设备的分辨率及尺寸一致。

这个做的只是一个尝试，在此贴出作专题的一些小小的总结，希望不吝赐教。