各位童鞋们可以打开以下链接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

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

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