前端 开发的适配中 rem 有着举足轻重的位置，用好了，你就是神，用不好 ，直接GG；不好懵懵懂懂，要头头是道。
言归正传：
首先我们需要了解，css 布局的单位常用的有一下几种：
1、px (pixel，像素)
2、pt (point，磅)：指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
3、em(相对长度单位) 继承父级fontSize大小或相对于当前对象内文本的字体尺寸 ：通常1em=16px。
<div style="font-size:14px;> 14px的字体 <p style="font-size:1em;"> 1em = 14px 的字体 </p> </div>
4、rem(相对长度单位) 相对的是 文档根节点的font-size大小
两种换算方法：
不要忘了先设置header标签：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
百分比设法：
计算规则： 百分数 = 基数 / 16
基数 10 ==> 62.5%
14 ==> 87.5%
换算公式为：
X rem = 你测量出来的 px 值 / 基数
下面的例子：
28px / 14 ==> 2rem;
<!DOCTYPE html> <html style="font-size:87.5%"> <head> <title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1"> </head> <body style="font-size:2rem;"> <div style=" 10rem;height: 10rem ;background: red"> <span>基准是 14px; 2rem ==> 28px </span> </div> </body> </html>
坑！！！！！！！预警
如果你用的chrome 浏览器 他的最小字体12px 以及 最小高度都有最小值得限制 这样会导致 你用 基数为10的进行计算时 没效果！！！这是浏览器问题！！！！
相对px写法
var d = document.documentElement; //拿到根元素 var cw = d.clientWidth || 640; // 获取默认屏幕宽度 默认是 640px的宽度 d.style.fontSize = (20 * (cw / 320)) > 40 ? 40 + 'px' : (20 * (cw / 320)) + 'px'; 限制最小字体的大小 /最小20px 最大 40px
如何你字体大小问 为什么要被限制？？？ 那么我只能说你问的 很好
答案： 就chrome 浏览器而言 有最小字体的限制 为避免这种尴尬局面的出现，设置最小20px. 最小数值的限制最小数值的限制最小数值的限制
<!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"> //第一种 var d = document.documentElement; //拿到根元素 var cw = d.clientWidth || 640; // 获取默认屏幕宽度 默认是 640px的宽度 d.style.fontSize = (20 * (cw / 320)) > 40 ? 40 + 'px' : (20 * (cw / 320)) + 'px'; //限制最小字体的大小 /最小20px 最大 40px //第二种 (简单粗暴) document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px'; </script> </head> <body style="margin: 0 ;padding: 0;font-size: 0.32rem"> <div style=" 3.2rem;height: 3.2rem ;background: red"> <span>danny.xie</span> //实际的宽度计算就是 x rem = 测量的宽度PX / 动态设置的font-siz值 </div> </body> </html>
这就今天分享的重点了 有不足 或 错误的地方 欢迎指正 ~~~ 谦虚使人进步