em/rem写手机页面的一种写法(2)
当然js也不是最终的解决方案，毕竟我们整个页面不可能只有一个div，假如单单用js的话就要写好多代码，明显是不可取的。
这个时候我们用em/rem：
em的定义是相对于上一级的字体大小的倍数。比如说：
<div style="font-size:20px"> <div style="height:1em;width:1em;background:red"></div> </div>
你会发现改变外层div的font-size值时，他里面的div也会跟着改变，这个时候我们不禁想到，假如把所有元素写成em的格式放在一个大div里面，那么我只需要用js改变外面大div的font-size值不就可以了？
当然em还有一个不足的地方，那就是它是相对于上一级的字体大小。那当div层数一多起来算起来也麻烦。
于是我们要用rem，rem的定义是相对于html的。我们看一下下面这个例子:
<html style='font-size:100px'> <div style="height: 1rem;width:1rem;background: red;font-size:100px"> <div style="height: 0.5rem;width:0.5rem;background: green"></div> </div> </html>
同样，我们改变html的font-size值，div就会跟着变化，而且div自己的font-size值和上一层font-size值是不会造成影响的。假如你有用过em来写过自适应，那你对这个应该体会会深些。
至于这个html的font-size是怎么设置，那就是个人喜好了。比如我，我喜欢把屏幕为640px的html设为100px（因为手机页面的psd大多数是640的），具体代码如下：
<meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport"> <script type="text/javascript"> var w = window.innerWidth; document.documentElement.style.fontSize = (w/640)*100+"px"; </script> <div style="height:1rem;background;font-size:0.5rem;text-align:center">我是自适应的</div>
以下是我个人在用的一个模板，放着备忘：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport"> <style type="text/css"> body {background: #e4e4e4;} /*加点背景更好看*/ .center {width:100%;max-width: 640px;min-width: 320px;margin:auto;background: white} /*所有元素写在center里面*/ </style> <script type="text/javascript"> window.onload = window.onresize = function(){ var w = window.innerWidth; w = (w>640)?640:w; w = (w<320)?320:w; document.documentElement.style.fontSize = (w/640)*100+"px"; } </script> </head> <body> <div class="center"> <div style="font-size: 0.24rem">我是自适应的</div> <!--0.24rem表示640 PSD下的24px--> </div> </body> </html>
