尚硅谷前端基础 (140)

好，那经过了我们刚才的一个精确的测算，那其实现在的话，如果我们想把这个呃，设计图中的内容搬到我们的网页中，那就是，其实很简单，那就是我在我的设计图里量到一个像素，在我的网页里我就要写一个0.133333VW是吧，我连到十像素，那就写1.33333VW，但是很明显这个数字算完了是。它挺缺德的对吧，我们用起来实际上并不是很，并不是很方便啊，并不是很方便，算起来也不是很方便，这个数即使你取前几位他也不是很方便，所以这个时候我们就想，诶有没有什么更好的方式去给我们解决这个问题呢？哎，所以我们就提到了一个适配方案，这叫做一，我们这儿叫做一个VW的一个适配，那关于我们的移动端的话，我们适配方案有很多种啊，适配方案有很多种，那这里边现在来讲，我们在没有GS情况下，VW对我们来说是一个最好的一个适配手段，那我们怎么要用VW来适配呢？那现在我们先说明这个问题啊，这个问题现在比如说我们还是想创建这么一个，创建一个什么呢？创建一个这个48乘以35这么大小，这么一个东西啊，48乘以35 48乘以35，那我们用我们刚才的写法的话，我们这先写一个BOX1。

在这儿呢，诶带L标签，我们先把这个默认样式清掉啊，我们来一个Mar丁零，然后来一个PA定零，把我们那个代码呢复制过来，诶就是这玩意儿，其实我应该我应该全套复制对吧？诶保存一下，那这个时候我们直接运行看一下，那这个时候它创建的应该就是正好那个比例跟我们那个是哎一样，就是跟我们那个这个设计图是一样的这么一个大小的东西。哎，跟我们设计图大小是基本上是一样的这么一个东西，对吧，但是很明显我们知道每一个值都乘以一个1.3333，这个东西它并不它并不聪明，哎，或者说也并不方便，当然我们这东西，你那个设计图是七百五的对吧？设计图是七百五的，你的这个大小，你这是一个100VW，无论如何你这肯定都得换算，肯定都得换算，这是没得说的，但是现在我们就希望什么呢？希望有一个更加简单的方式可以换算，这这好算一点，别整的这么麻烦，对吧，好算一点，那这个时候要怎么办呢？诶，那我们这就提到一个，之前呢，我们在讲这个单位的时候，我们提到过两个单位，一个叫em，还记得em，哎，EM1EM的大小等于一个字体大小，对吧，Em大小等于一个字字体大小，那我们还说了一个叫做re re，还记得吗？诶，Re说了一个rem等于什么？

呢，等于eh t Mr的一个字体大小，诶也就说我一个rem实际上就是等于我们HTMR的一个方size，那这里边我们来举个例子，比如说我这写一个HT毛，我们这直接来一个这个fo size，方nt size，比如说我这写一个100像素，现在我H天毛Z大小是不是100像素啊，诶那这个时候我Y，我这如果写一个e re em，那么e re em表示就是100，一保存是不是100啊哎，我如果是哎3RE，那表示就是什么呀？就是300，换句话说，他们俩的关系是一个乘的关系，你这是多少？你这是100，我这是三，那就三乘以100，那这是结果就是300，你这是1000，我这是一，那我就一乘以1000，这就什么呀，这就1000，也就是说我们的rem，哎，和我们的这个HTM2的方size，它们是一个乘的关系，对吧，比如说我这写一个点5RE点5RE，那换算过来就是50个像素对吧？哎，他们是一个乘的关系，诶。

那我就想了，诶，我们刚才算完那个结果是什么呀，0.133的VW等于一个像素，哎，那我这样啊，我直接把这0.1333333这玩意儿，我给写这VW，那这个时候它的大小是这么大个，那我这如果写e re me re，是不是就相当于一个0.1331个VW。

哎，如果我写两个rem，是不是就相当于个这个0.1333VW，那是不是就相当于两个像素啊rem啊rem，那我如果写20，是不是就相当于20像素，那我如果写750，那这是不是相于750像素，那是不是就就对应着我们设计图里面的七百五啊。诶，那要是这样，我们这个东西写起来是不是就哎就省事了，哎就省事了，诶想想这事儿挺好是吧，那写完了以后，那我都不用换算了，我是不是直接写就行了，哎直接写行了，哎我们试试，那刚才我们量的话，它的大小是一个48像素，35像素，那如果根据我们刚才的设想的话，那这应该就是一个48RE。

这应该是一个35RE emm，哎，根据我刚才设想，那是不是应该是正合式的呀，哎，我就不用再去乘，再去除了它这是不给我乘好的呀，哎，我们看看走一个哎哟哎呦呦呦哎呦呦很明显是不对的对吧？很明显是不对的，诶这不是0.1333吗？他这应该是48乘以，刚才我这算我那也是这么乘的呀，他这不乘完了应该没问题呀，诶往往我们再去做一个东西的时候，往往都是这样对吧，哎叫。理想很丰满是吧，现实很骨感，就是我们想的跟我们这个看到的结果往往都是不一样的，为什么呢？因为实际应用过程当中总会产生一些问题啊，总会存在有一些问题，那这里也是一样，它也是有问题，有什么问题呢？问题就在这儿，我这设置完了，如果要真的生效的话，按理说48乘以它是不是就应该是正好是我们换算那个值啊。

但是偏偏就没有，那这是为什么？哎，那就没生效呗，我们看看有没有设置成功。看看啊看看看看样式HTM字体方size0.1什么33VW设没设置好设置好了。诶没毛病，也没有话盖啊，哎，对了，注意啊，设置好了跟生效了是两码事，设置上了不一定就会生效，所以生没生效你还要看一下什么呢，脱开它，这时候还有一个com comut呀，哎，Comuted表示计算的样式，你说这个台是显示的是我们真实生效的样式，这显示的只是你设置那个样式，而这才是真实生效的，所以我们来看一下，我这一点开我们来看一下啊，还是不要忘了选中为面，我们看它的方size多少，方size是多少是。

12像素，哎呀，0.1333肯定不是12像素啊，对吧，它没有那么大个，他怎么怎么会是12像素呢？哎，注意我们要说一个问题，我们这个网页中这个字体大小字体啊，其实主要就是最早应该是chome这么一个，有这么一个设计，别的浏览器没有，但是现在基本上所有浏览器都会有这么一个设计啊，字体大小最小是什么呢？最小是12个像素，也就是说我们不能什么呢？不能设置一个比12像素还小的字体啊，还小的字体当然有一个例外，你说老师我设置一个零行不行，零行除了零以外，最小的就是12，中间是不是还有123，一直到11啊，这些都不能最就是12，所以如果什么呢？如果我们设置了一个什么呢？小于12的字体，12像素的字体。

哎，则我们这个字体自动什么呢？设置为12，自动设置为12，所以这个东西肯定比12小，你看0.133VW，我一个VW，诶我100，诶100是不是才375啊，诶375，那我一个就等于是一个什么呀，一个是3.75，对吧，你零点几那是不是更小了，诶更小了肯定不够啊，肯定不够，所以这个时候它就干嘛了啊，就报错了，就就没报错，就自动给你这重置为12了，所以你这跟写12没什么区别，那么OK，那你这是12，你这写了一个48RE em，那是不是就48乘以12啊，那很明显这是不是已经超了呀，所以这是不是就出出滚动条了。是不是都出滚动条了，哎，所以这就不对了啊，这就不对了，哎呀哎，所以这个时候呢，这值行不行啊，哎，不行。这只太小了，太小了怎么办呀，这正好是一像素，很完美对吧，很完美。

那就这样呗，我这样啊，我给他呢，哎，刚才我们这值是100除以一个这个七百五对吧？哎，100除以750。100除以一个七百五算出来了，也就是说我算出来我几个VW相当于我们设计图里边的一个像素对吧？我是做了一个换算啊换算那现在呢，这有点小，那我干脆一不到二不修，我给它干嘛呢？乘一个十乘一个十，我把整个池整个值给它扩大十倍，变成什么呢？变成一个1.33，整个扩大了十倍，那也就是说我扩大了十倍，以前是什么呢？以前是一个，诶叫做0.13333，它是等于一个像素的，对吧？VW等于一个像素，那现在我这是什么呢？现在我这个等于是一个，诶1.33333VW等于什么呢？等于十个像素对吧？那现在等于十个像素，那也就是说我现在一个rem等于我设计图里的十像素啊，十像素，那现在我想表示48个像素，那也简单，我是不是直接除以一个。

十就行了，哎，那4.8re 3.5re除以十，那这乘以了十，那是不是跟没乘没除一样啊，哎，没乘没除一样，所以这个时候我们这应该是不是就行了，哎，那还得看1.333够不够12啊，哎，我们这一保存，诶这大小也出来了，但是很明显这这有点大了，对吧，有点大了，我们看community community现在方赛干嘛，是不是还是12，哎还是12，还是12，那就意味着还不对，你不可能正好12啊，不可能正好12，它一旦写十二一定有问题啊，一定有问题，所以这个时候我们还得要对这个值进行扩大，那我直接说了啊，我再对它进扩大四倍，得到一个点3333，那这个时候我们这个值啊，我直接写写过来，现在是一个5.3333。

你们少写几个吧，你写这么几个啊。5.3335后边跟着四个三，那现在由于我是不是刚才整个给它扩大了40倍，哎，40倍，那等于我一个5.43VW等于什么？等于40像素等于40像素，那也就是我一个rem。E re等于什么呢？等于40像素，这40像素是我们这个设计图里的像素啊，设计图里的像素，那这个时候我们先看看够不够啊，看看够不够，我这一保存现在放在多少，放在是19.99999，那这个时候是不是肯定够了，哎，肯定够了，但是这里边的换算关系，你要知道这个时候现在是不是一个rem等于40像素，那现在我想表示的是48REM 48像素还有35像素，那你必须得让48除以什么，除以40，然后35也得除以40，所以我们要算出的结果就是48除以40等于一个1.2，所以我这48个像素应该是1.2re em 35像素呢，我们应该也是35除以40等于一个0.875RE em，所以这写一个0.875RE em，那这个时候我们在创建完了这个大小就跟这个设计图里边是。

一样的啊，非速完一样的，那所以经过我们这儿用完了这个re适配以后，那现在我们在我网页里的一个re，就等于我设计图里边的四升像素，那我再想去做这个设计图的时候，那我们现在在我这量多大，在这个设计图你量多大，哎你说我量这玩意儿量多大，哎，量一个，比如说这是一个300乘以100的，那这个时候大小在这里边你就要干嘛，你要300除以什么呢？40，哎，然后得一个re，然后让什么呢？让100再除以40得一个re，一设置就应该是跟我们设计图里边的比例是。

一模一样啊，一模一样的，那你这如果说你想写一个什么呀，全屏，那就是7150REM除以什么呀，除以四十七一百五除以一个40等于一个18.75，所以这儿如果你写一个18.75的话，应该正好是全屏，并且它实际上是在任何的浏览器里都是什么都是全屏，因为这个值我们已经算好了啊，我们已经算好了，好，这个是我们rem适配的一种方案啊，当然这个值的话，你也不一定非得这么适配，你说老师我就用那个VW，我就每一个乘以0.133333行不行也行，当然那种算起来稍微有点麻烦，我们这个40的目的就是为了取一个什么呀，取一个整，我们好算啊，我们好算VW这种适配方式呢，我在可能我看的也不多是吧，因为我在这个各个网站上，大型商业网站上，我看用的不多，唯独一个看到我看到用的的话，就看到这个京东在用这个，你打开京东的移动端网站，其实你怎么看？

他用没用啊，直接看京东的这个HTML跟标签，你看它的字体。自己写了一什么方size5.3333VW，那这个就证明它实际上就在用一个VW适配，为什么是一个5.33，那实际上它也是扩大了什么呀，40倍，你说老师我不想扩大四十倍，我想扩大50倍行不行，行看你心情，你想扩大多少倍干嘛呢，就扩大多少倍是吧，你想扩大一百倍，哎跨100倍。也行啊，和来100倍，你就直接在那乘以100倍，那就是一个就是乘以100，那就是13.3呗，对吧，13.3这个多少倍都行啊，多少倍都行，比较灵活，灵活掌握啊，灵活掌握好，那这个东西就说完了啊，那整个这个适配说完了以后呢，就是你把这个适配代码写上以后的话，再做设计图呢，就是两度的除以40就完事了，但是你可能会觉得老师这除以40也不好算呀，好算，因为我们还有谁呀，哎，我们可以用我们的lets去写啊，Lets写好，那这个是我们说的一个VW适配就说完了，那我们停一下，待会我们回过头来开始正式的做我们这个项。