今天有个朋友在群里上传了一份案例，点进去研究了起来，发现了rem这个单位。
然后我就开始百度rem，搜到几篇好文章，跟大家分享一下，
以下代码，是在朋友所发案例中拷贝的
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> <script>
//auto adaptation var calculate_size = function () { var BASE_FONT_SIZE = 100; var docEl = document.documentElement, clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 320) + 'px'; }; // Abort if browser does not support addEventListener if (document.addEventListener) { var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; window.addEventListener(resizeEvt, calculate_size, false); document.addEventListener('DOMContentLoaded', calculate_size, false); calculate_size(); } </script>
关于var BASE_FONT_SIZE = 100;
如下解释：
根元素的值可以任意的去定义，
但是建议最小定义20px以上，
还有定义的时候要考虑方便自己换算，
有些人定100px，
但是不要定义10px，
因为chrome不支持中文字体小于12px，
所以会导致当计算小于12px的时候，
会默认取12px去计算，导致中文版chrome的rem计算不准确。
关于clientWidth
在谷歌浏览器手机模式下测试，
iphone4,5,6，显示为980px，
clientWidth参考文章：
http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html
http://www.cnblogs.com/kongxianghai/p/4192032.html
补充关于clientWidth / 320
320没啥用
现在一般是640的，640是个变数
设计稿的宽一般都是640px
如果设计师给你的设计稿是670px的
就把640改为670
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索document
， px
， var
， clientWidth
， addEventListener
orientationchange
移动端h5页面适配rem、移动端页面布局rem、移动端页面适配rem、rem css3 app页面适配、手机页面rem布局，以便于您获取更多的相关知识。