前端 开发的适配中 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 大小
两种换算方法:
<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="width: 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="width: 3.2rem;height: 3.2rem ;background: red">
- <span>danny.xie</span> // 实际的宽度计算就是 x rem = 测量的宽度 PX / 动态设置的 font-siz 值
- </div>
- </body>
- </html>
这就今天分享的重点了 有不足 或 错误的地方 欢迎指正 ~~~ 谦虚使人进步
来源: https://www.cnblogs.com/929LF/p/8868731.html