【我不熟悉的css】03. 使用px、em、rem

每日鸡汤：你所有的烦恼都是做的太少，想的太多

目录

前言

一、px 最基本的单位

二、em

1. font-size

2. width 等其他属性

3. em的主要应用场景

三、rem 

1. rem的古老的应用方式

2. 使用rem，导致复制的字体很大

3. 使用postcss-pxtorem 插件

总结

---

前言

关于css单位的使用是很重要的知识，我之前所接触的项目中很少做适配，最近开始有一个项目使用了rem，现在很有必要总结一下。

一、px 最基本的单位

px 是像素单位，在完全是像素实现的项目中，所有的距离字号等，都是固定的，不会根据屏幕宽高，或者浏览器的缩放而产生变化，对于我们开发者，直接根据设计图写就行，几乎没有难度，不用思考。

二、em

mdn官方文档描述

在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width

1. font-size

也就是说，在font-size属性使用em的时侯，子元素是父元素字体的n倍

.box {
    font-size: 16px;
    .text {
        font-size: 2em
    }  
}  

2. width 等其他属性

在其他属性中使用是相对于自身的字体大小（这个例子字体大小是20px ）、width的宽度为

20px * 6 = 6em，也就是6个自己的单个字符的宽度

.box {
    font-size: 20px;
}  
.text {
    font-size: 20px;
    width: 6em; 
    border: 1px solid red;
}  

3. em的主要应用场景

em的主要应用在，给一段文字增加缩进，比如在排版的时候，中文要求段首空两个字符即可。

.text {
    text-indent: 2em;
}

除此之外，em经常用来给字体设置行高的时候使用

line-height:

该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。

 // 这两种写法是等价的，无单位 = em = 字体自身的大小
.text {
    line-height: 2;
}
 
.text {
    line-height: 2em
}

三、rem 

与em不同，无论是font-size还是其他属性，都是相对于根元素（html）的字体大小。所以，一般的适配使用的都是rem，因为只要修改根元素的大小，整个项目总所有用到rem的地方都会等比例同时缩放，很方便。

1. rem的古老的应用方式

在很久之前，使用jquery写项目的时候，使用rem，需要在html中加入这么一个脚本。

那么为什么分界线是375呢，因为我们的设计稿是按照375的宽度设计的！

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 375) { // 宽度大于375固定设置根元素100px
                docEl.style.fontSize = '100px';
            } else { 
                // 宽度小于375，适配移动端，动态计算根元素的font-size
                // 这个计算表达式，得到了一个缩放比例 scale
                docEl.style.fontSize = (clientWidth / 375) * 100 + 'px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

然后我们在使用的时候，假设设计稿是这样的：

.text {
    font-size: 10px;
    margin-top: 20px;
}

我们需要改成这样：

.text {
    font-size: 0.1rem; 
    margin-top: 0.2rem;
}

无论是font-size属性，还是其他属性，都按照设计稿的值，除100再使用，为什么除100呢，因为我们的根元素设置的font-size=100，这也是为什么我们选择100这样的整数了，因为好算。你当然可以设置99，98 等任何你喜欢的数字，但是我们在开发的过程中10/99此类的值太难算了，不要自己给自己找麻烦。

或者这样也可以，参考，给根元素设置font-size: 62.5%;

css: px转rem换算方法_wcc_chao@163.com的博客-CSDN博客_css px rem转换设计图一般采用画布宽度为375px/750px/1125px三种尺寸，分别对应iOS下的@1x/@2x/@3x屏幕分辨率。rem是根据html节点下的font-size定制的尺寸。如果html{font-size: 16px},则1rem = 16px，假如设计图上有一个长宽都是100px的图片，{width: 100px, height: 100px}}/>将这张图片展示到宽度为375px的手机屏幕下，如果设计图尺寸越大，转换后https://blog.csdn.net/w440149517/article/details/113528533

2. 使用rem，导致复制的字体很大

假设，我们使用的是上面的例子，给html的font-size：100px

在我们用光标选中文字复制，并粘贴到富文本编辑器，word  等带格式的编辑器的时候，字体会很大，因为复制的时候保留了字体的字号等属性。

所以对于有这种复制需求的情况，我们可以

1. 这块 需要复制的地方不用rem，使用px，或者
2. 在设置根元素的时候别设置100px这么大的值，或者
3. 重写copy函数

3. 使用postcss-pxtorem 插件

有一个很好用的px转rem的插件，不用我们自己算了，只要配置一下就可以。

或者，使用postcss-px2rem-include使用，可以设置根像素大小，和应用的页面

总结

看过100遍文档，不如自己手动写一个项目，记忆的深刻。仅供自己学习记录使用，有问题欢迎指正。