响应式实现初探

前段时间，因为项目需要，略微接触了一下响应式设计。在此记录一些经验之谈。

         我所理解的响应式设计，  是网站能响应当前屏幕的宽度，呈现相应合适的样式和内容。比如在手机端，手机端屏幕较小，而且用户可能在3g网络下访问。网站在手机端下显示的时候，呈现的内容较之桌面要少一些，所消耗的流量也要少些。通过css的媒体查询，可以控制在各分辨率内容的显示。要减少流量消耗，一些专业的网站都是为手机端另外做一个页面。

         响应式的设计，可以从分辨率由大到小，也可以从分辨率由小到大开始设计。我们目前尝试的是先完成桌面端，再适配分辨率较小的设备。其中的要点是断点的设置。因为设备的多样性，为每一种分辨率写css媒体查询是很累人的事。所以需要确定一些分辨率，在这些分辨率下，页面的布局会乱掉。在这些分辨率（断点）下，再去设置媒体查询。还要注意灵活的布局，以便分辨率处在断点与断点时，能较好的呈现。

        除了确定断点外，还有以下三个要点要注意。

        1，浏览器视口和设备视口。就是浏览器的宽度和设备的宽度。在一些android设备上，浏览器默认会以比设备宽度更大的分辨率来显示网站，所以如果你打开某个没有设置过的网站的话，一开始你只能看到一部分，然后拉动或放大，才能看到其余部分。设备视口是固定的，浏览器视口是可以设置的。<meta viewport='width=device-width，init-scale=1.0'  />  ，这个设置语句的意思是，将浏览器宽度设置成和设备宽度相等，初始的缩放比例为1。需要注意的是，这里的浏览器宽度并不一定是页面的宽度。浏览器宽度作用于媒体查询，而页面的实际宽度可能会超出所设置的宽度。缩放比例只是纯粹的放大缩小，并不会影响浏览器宽度和媒体查询之间的相互作用。

         2，媒体查询。确定了断点，设置了视口之后。写css媒体查询就差不多是体力活了。在支持媒体查询的浏览器上打开你的网站，改变浏览器的宽度，看看查询语句是否有效，布局是否合理。

         3，css特殊性。应该说，这是一个坑。一般情况下，我们通过css设置了某个元素：.header｛width:1200px;}，在之后某个范围改变宽度：@media all and (max-width:800)｛.header｛width:800px;}}。在ipone4、5的默认浏览器下，媒体查询是起作用的。但是到了android的自带浏览器下，就不起作用了。事情是这样的：根据特殊性的规则，两个地方设置width的权重是相同的，在后的特殊性就要强一点。这是正确的情况。但是在android下并不是这样，

权重相同的情况下，在媒体查询语句里的属性特殊性要低一点，所以在小于800的分辨率下，width:800不起作用。解决的方法是，在查询语句里设置更强高的权重，不要依赖先后顺序。比如上面的查询语句可以改为

@media all and (max-width:800)｛body .header｛width:1200px;}}。

        搞定了上面提到的这些，适配各个设备就不是什么问题了。在交互方面，比较常用的是touch。不过在使用touch时要注意防止冒泡，因为在document上，浏览器默认都会有些行为，这些行为会短暂的获取焦点，而导致touch被打断，使得执行touch时显得不灵敏。

       对于响应式的实现就先写到这里。

注：测试的浏览器包括android4.0、 4.2下的默认浏览器，uc浏览器，ipone4、5下的默认浏览器。