响应式网站设计的思路与技巧

        1、响应式网站设计的思路
       移动设备这样的处理方式并不能完全解决问题，因为手机的假设性猜测在很多时候是不合适的，尤其是在android设备中。为了更好地控制元素显示的大小，解决的办法就是用pt代替ps，px是对应屏幕的分辨率，而pt是针对人眼睛实际感觉的大小，无论在何种分辨率的设备上，72pt固定是1英寸。
       幸运的是，手机上的浏览器基本对此做了优化，会把设备模拟成更低的分辨率。比如在1136*640的IPHONE 5中获取$(window).width(),取出来的是320而不是640，这样一个宽度为160px的图片占用的是屏幕宽度的一半，而不是1/4。手机设备这样处理是为了解决兼容性问题。除了网页，包括手机上app的界面，在retina屏幕上和非retina屏幕上的大小是完全一样的，都是因为对分辨率做了处理。

        2、使用Base64编码减少页面请求数
        我们的一个页面中要传入很多图片时，特别是一些小图标，十几K、几K，甚至是字节级别大小的小图标，这些小图标都会增加HTTP请求，假如多了，就会给服务器带来很大的压力。比如要下载一些一两K大的小图标，其实请求时带上的额外信息有可能比图标的大小还要大。所以，在请求越多时，在网络传输的数据自然就越多了，传输的数据自然也就变慢了。
        企业做网站用Base64的编码方式将图片直接嵌入到网页中，而不是从外部载入，这样就减少了HTTP请求。当然了，它有一个小缺点，就是使当前页面的大小变大了(对于优化来说，其实这个可以忽略，影响不大)。看一下下图，小图标大小为2.4k，等待响应时间是14ms，而接受数据，也就是下载时间约为0ms;可想而知，在有大量小图标下载的时候，这样的方式去优化能大大提高网站的性能(在jquery mobile和天猫的手机站上面都有用到此技术)。