尚硅谷前端基础 (41)

好，接着我们来往下说，刚才突然想到了我们那个长度单位，其实还有两个，那两个开始我想需要，可能我想讲完字体再说那两个单位，但是我一想其实在这儿说也没关系，那我们就统一在这，把那两种单位也给他说了就完事了，我们就不再往后拖了，啊，不再往后拖了，那还有两个叫什么呢？那在这我们拿，呃，我们还在这个页面去演示啊，我在这儿直接整一个div，点一个BOX3，呃，BOX3呢，在这我们来写个样式啊，直接点一个BOX3，点一个BOX3，我们来个Y啊Y我们有一个什么呢？我们有一个单位叫做em，我可以写一个十。Em，我这再写一个hat，再写一什么呢？哎，再写一个10EM，然后呢，我们在这直接来一个background color background color，我们来一个这个green，来一个绿色啊，绿色green yellow啊这样一保存，我们来看，那这个就是我们说的一个box sun的效果，那这就是它，哎我们这个大小就是一个11M啊，11M，这11M是多大呢？诶这11M是大呢，哎，我们可以干嘛呢？我们可以量一下啊，我们可以量一下，我直接拿鼠标这个拖一下也可以啊，或者呢，如果你不想拖的话，我们还有一个工具，嗯，在我的这儿桌面上有一个叫做fast capital这么一个结，它也是一个截图工具，但是它可以结合着用很多功能，那你在用的时候呢，你可以去。

嗯，你就是你在哪看到视频，你可以找一下我们个有没有那个链接，去自己下载一下软件，或者上百度搜一下，这都能找到啊，我们直接来看一下啊，我直接双击开它是这样的，它在里边呢，在这一栏有一个东西叫做屏幕标尺啊，屏幕标尺很简单，就是出在我们屏幕上出现这么一个尺子啊，这么一个尺子，然后通过这个尺子，你要想量一下它的大小，其实你就可以量了啊，比如说把这个尺子放在这个位置，诶我们来看一下它大小多少，诶那这里边看已经边上已经贴死了，对吧，我们直接放到这个位置，我们来看一下边上这是不是正好是一个160像素，哎，160像素，也就是说我10EM是160像素，诶，那这个值它是怎么来的呢？啊怎么来的呢？那这里面我们来说一下啊，来说一下这个是我们又一个单位叫做em em呢跟百分比二类似，Em呢，嗯，Em是什么呢？是相对于我们元素的。

字体大小来计算的啊，来计算的，所以我们这里边说1EM等于什么呢？诶em就等于一个fo size啊，一个方size，所以我们十页M就等于十个方size，那我们方size多少？我们默认的字体大小，一般浏览器都是16个像素，所以在这儿11M就是16乘以十就变成了100 160像素啊，160像素，所以他刚才我们量的是不是就是一个一百六啊，哎，160，所以这个时候注意我们的em的单位什么特点，就是em它会什么呢？会根据我们字体大小的改变，而什么呢而改变你自己大小变了，它就会跟着你变，所以比如说我在这儿直接来一个方size看着啊，我这写一个16像素，你看跟刚才没有任何区别啊，我如果写16像素是不是一样的呀？诶，当我字体大小换成了20像素，那11M是不是就相当于20个。

20就十个20啊，十个20就变成200，你会发现跟上边就一边大。哎，我们来看一下方size的20像素啊，我们刷新一下，诶这块它呃20。我们在这儿改完了一个20，它这等于是不是没有生效啊，我们上边是这已经是不是300像素了，哎，这已经300像素了，所以我这改成20，它不是跟他一边大了，我改一下啊，改成十，我改成十，那这就变成了一个100像素，对吧，我改成20，这就变成了一个200像素，那现在我想跟它一边大，它是不是300像素啊，300像素把这改成30 30就变成300像素，是不是就跟它一边大了，哎，所以这个时候注意我们一个em就是一个字的大小，十个em就是十个字，一个字这是不是三声像素啊，所以十个字就是300个像素啊，所以注意em是相对于字体大小来计算的，那它的使用场景其实还还挺多的，但是后边我们用到我们再说，但是建议阶段我们还是主要以像素为为主，因为像素现在对我们来说是比较根本的一个东西啊，它比较比较好理解啊，像素，然后这是em跟em类似的，还有一个谁呢？还有一个叫做re。

Re是干嘛的呢？Re啊，它是什么呢？Re跟em一样，它也是相对于字体的，不同的是em是相对于自身的字体大小啊，相对于自身的字体大小，而我们这个rer什么意思？R叫做root啊root，所以rem是什么呢？是相对于相对于我们这个根元素，哎，根元素也就是HTML的这个字体大小来计算的，所以在这儿啊，我们把这个这我给它住了啊，我给它住了，我换一个。

换成什么呢？换成一个YY这来一个10RE，这来一什么呢？He来一个这个10RE，那这个时候你看大小是不是又变成那个一百六了，哎，又变成一百六了，你这改你就改成十，你改成四十五十一点用没有，为什么？因为它是相对于根元素来计算的，所以这个时候我可以干嘛呢？我可以在这根元素谁呀？根元素是不是就是HTMMR啊，我改变一下HTMMR的方size，比如说改成一个100像素，那这个时候是变这么大呀，哎，我改成一个20像素啊，20像素就变成了这么大个，我改成30像素，那就跟上边一边大了，所以rem是相对于这个HTML的这个自己大来计算的，那像rem跟em都是类似的，它就是参照物，同em是参照自身的自己大小，而re是参照于HTL的，搞搞清楚这一点就完事了。而这个re。

Am，其实我们以后还用的挺多的，那这个东西主要在我们移动端，我们需要做一些这种适配，就要用到这种大量的re，还是这两个后边的使用场景会具体再说，暂时可能这一段时间暂时用不到是吧，这几天可能暂时用不到，我们还是主要以这个像素和有百分比为主，那主要还是以像素为主，对吧？以像素为主好补充了两个，一个是em，还有一个rem啊注意一下，我们来听一下。