rem ~~ 你懂了吗？

前端开发的适配中 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标签：

　　　　　　　　　百分比设法：

　　　　　　　　　　　　计算规则：百分数 = 基数 / 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>

这就今天分享的重点了有不足或错误的地方欢迎指正 ~~~ 谦虚使人进步

巴特西

rem ~~ 你懂了吗？

最新文章

热门文章