1. 先说说几个前端常用的几个单位的概论:
1,px (pixel, 像素): 是一个虚拟长度单位, 是计算机系统的数字化图像长度单位, 如果 px 要换算成物理长度, 需要指定精度 DPI(Dots Per Inch, 每英寸像素数), 在扫描打印时一般都有 DPI 可选. Windows 系统默认是 96dpi,Apple 系统默认是 72dpi.
2,em(相对长度单位, 相对于当前对象内文本的字体尺寸): 是一个相对长度单位, 最初是指字母 M 的宽度, 故名 em. 现指的是字符宽度的倍数, 用法类似百分比, 如: 0.8em, 1.2em,2em 等. 通常 1em=16px.
3,pt (point, 磅): 是一个物理长度单位, 指的是 72 分之一英寸. pt=1/72(英寸), px=1/dpi(英寸)
4,rem(root em, 根 em): 是 CSS3 新增的一个相对单位, 这个单位引起了广泛关注. 这个单位与 em 有什么区别呢? 区别在于使用 rem 为元素设定字体大小时, 相对大小对比的是 html 根元素. 这个单位可谓集相对大小和绝对大小的优点于一身, 通过它既可以做到只修改根元素就成比例地调整所有字体大小, 又可以避免字体大小逐层复合的连锁反应. 目前, 除了 IE8 及更早版本外, 所有浏览器均已支持 rem. 对于不支持它的浏览器, 应对方法也很简单, 就是多写一个绝对单位的声明. 这些浏览器会忽略用 rem 设定的字体大小.
2. 开始进入 rem 教程
- <script type="text/javascript">
- document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
- </script>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
- <script type="text/javascript">
- document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
- </script>
- </head>
- <body style="margin: 0 ;padding: 0;font-size: 0.32rem">
- <div style="width: 3.2rem;height: 3.2rem ;background: red">
- <span>
- danny.xie
- </span>
- </div>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/2e1aab52e5ca