各位童鞋们可以打开以下链接http://m.taobao.com/?qq-pf-to=pcqq.c2c
对，这就是淘宝的手机网页。看着没什么吧，但是仔细斟酌，里面还是有很多设计细节，技术细节的。
咱，先不说别的，就说说适配吧。源码什么的，自己找去，我只说思路。

解决思路：
使用rem单位，rem简单说就是root em啦。相比大家都知道em单位是什么意思。
那么rem就是相对于“根元素”的大小来设置所有设置了rem的地方。
怎么理解呢，比如

1
2
3
4
5
6
7
8
html{
font-size:24px;
}

div{
width:1.5rem;
height:1rem;
}

那么狠容易得出，width=1.524=36px；height=124 = 24px；

那么问题来了，html的font-size现在是固定的。然而这并没什么卵用。我们需要的是根据屏幕大小来设置这个font-size
好的那么现在说回淘宝怎么做的？

简单思路：

1.写一个js去根据屏幕大小去计算控制html的font-size大小。淘宝的做法是，font-size = 屏幕宽度/16.

为什么要用16呢？这么操蛋的数字，有时候还会除不尽呢。为什么不用20呢？我不得而知，然后搞笑的事情发生了，我也用了16，抄是一种本能。也就是百分之百的宽度是16rem。看淘宝网页上都是16rem，就不言而喻了。

2.所有元素的宽高都使用rem来设定，关于字体，设置为固定的大小为px就可以了，我现在的做法是，小屏幕字体大小为12px，大屏幕字体大小是14px。

3.淘宝还根据devicePixelRatio做了屏幕倍数处理，见html 的属性data-dpr = 1|2|3，自己去看了，公司把淘宝网站屏蔽了（每一个互联网公司都不该这么做，我们要的是open and freedom），
而其实个人觉得，用我们标准的
html<meta content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" name="viewport"/>
1倍去做，是没有什么问题滴。

==优点：==

屏幕大小改变，html的font-size大小随之改变，整个布局也随之改变。做到自适应了撒。该大的时候大，该小的时候小。

==缺点：==

1.对于数学不好的人来说，他觉得难以计算。

2.要做一次js的计算来控制font-size大。

3.可能会损失一点点精度，做css

sprite的时候理论上是有问题的。不过经过努力的测试，感觉还是可以的，只不过我不大喜欢用rem还用sprite。

那么还有一个问题，哥哥，这个方式是网页的，那么在安卓和IOS的webview里可不可以嵌入进去而会存在兼容问题吗？
傻了吧，当然可以啊。ios和安卓4.4以后的webview和机器自带的浏览器是一样一样的，安卓低版本可能有点点不一样具体还需要自己去亲手测试，不过就目前我测试过来（测试过最低版本小米1，安卓4.1版本），还没发现这种rem布局有出过什么问题。