00:00
大家好,我是上硅谷H5学科严老师,在程序员节日到来之际和大家分享一道面试题,来一物理像素的一个实现,那实现的方案呢,我们说有两种,那接下来我们说先采用我们的第一种方案,一起来看一下我们最终这个实实现方式是一个什么样子的来元素的宽度和高度,我们已经给大家指定了200PX,接下来为了看到效果明显一点,我们给它指定一个底部边框,底部的边框我们给它设置为EPX实线颜色区域呢为我们正常的一个黑色,那好,那接下来我们打开浏览器来直接看一眼啊。来是不是这样一个效果啊,来这样一个效果完成之后,那接下来我们说这个时候我们要明确一个问题,我们刚刚看到这个EPX指的是我们的CSS像素,而我们最终问题要求的是一物理像素,这明显是不是不是同一个东西,那么说物理像素与CSS像素之间到底有什么样的关系呢?来这是我们来带大家来描述一下它们俩之间的关系,取决于我们最终的一个像素比,哎,取决一个像素比,像素比最终等于我们常见的我们说物理像素除以我们最终的CSS像素,这是它们两者之间的一个关系,那好,那接下来我们说既然取决于他们俩之间的关系,那接下来我们先先看一下到底什么是像素比,对吧?来,那通过浏览器的形式呢,我们说一起来求一下,到底什么是像素比来,像素比的简写,我们说管它叫做DPR来。DPR操。
01:41
操作一下,我们说最终window上面的有一个方法叫device pixel RI,那好,那接下来我们直接把这个属性我们给它打印一下,来看一下最终的这个效果啊呃,D device pic啊,来D片直接给我们打印一下,来打印完成之后,我们直接看一下最终的效果来刷新右键检查找到我们这边来,进去之后呢,我们说先切换一下我的PC端,你看我的PC端呈现出的DPR是不是一,然后接下来我们说最终切换到我们最终的移动端,我重新刷新,你看这时候的DPR是几是不是二,同样我再切换一下IPHONE6PLUS,我再刷新,这时候DPR是几是不是三呀,所以呢,接下来我们的DPR针对于我的不同屏幕,我的DPR是不是不一样了,而最终我们实现的效果是不是实现一物理像素。那同样我们说在PC。
02:41
短这个一物理像素实质上是不是已经给我们做出来了,因为我的DPR是一,你物理像素是一,所以CSS像素是不是已是一,是不是正好和我们书写的这几个相吻合呀,但是我们说在移动端就没有那么简单了,那我们说移动端第一件事情,我们是不是要写一个me达标签呀,来Meta标签写好之后,接下来我们要操作一下,到底应该怎么操作呢?那我们说第一件事情,你既然要操作我们最终这个Meta标签,那你得看一下我们的标签上面有什么,我Meta标签上面是不是有一个initial scale,这个东西叫缩放B,来操作我们最终的整个元素的一个缩放,那好,当你为一的时候,我是不是没有进行任何的缩放,而我现在是不是想把一撇X的东西变成我一物理像素啊,那就证明我本身DPR为二的话,我一物理像素我是不。
03:41
就0.5CSS像素,而0.5CSS像素你呈现的时候,比如说呈现的这个大格子是我们最终的EPX,而你最终CSS像素在书写的时候,你是不是要书写成这样的一个格式啊。对吧,是不是正好削减一半啊,对吧?来,那好,那接下来我们说这时候来操作一下,那接下来对于我们来讲,我们是不是得操作一下我们最终想要缩放的一个比例啊,来挖一个变量出来,挖scale,等于我的物理像素一除以最终我们看到的DPR来比例有了比例完成之后,那接下来对于我们来讲,是不是要获取一下我们最终的Meta标签啊,来获取一下我们的Meta标签来me的node等于我们最终的document query select来qua select说Meta标签你不能单独这样直接获取,因为对于我们的上方,你看一下Meta标签有几个,有两个,所以呢,接下来我们根据我的属性选择器获取一下我们第二个Meta标签来属性选择器是不是我们的中括号来这一串是不是塞过去啊来Meta标签有了。接下来我们。
04:59
要操作Meta标签上的一个属性,是不是要操作我们最终的set attribute,第一个参数是不是我们的属性名,Count,第二个部分是不是我们需要的属性值?来,我们把属性值后面这一串的结果我们给他拿过来。
05:15
来CTRLC拿过来之后呢,塞过来,来一的部分这个结果我们是不是要变一下啊,我们应该把谁放过来啊,是不是要把这个scale放过来啊,对吧?来把这个scale比例缩放放过来,放完之后我们直接看一下最终的效果,来右键检查找到我们这边,我们换一下我们正常的IPHONE6来刷新,你看元素明显是不是变细了,变细之后,但是我们说有新的问题了,我盒子本身的宽高是不是200乘200呀,而你现在呈现完成之后,是不是盒子宽的高的地方是不是也缩小了呀,对吧?所以呢,接下来我们说这时我们要注意点问题了,你说像我们的宽度和高度,如果你一旦采用我们的第一种方案来实现物理像素,像我们的宽度和高度判定Mar呀,这样的元素的单位就不能直接写PX了,我们得给它来一个相对单位来,给它来一个re em来下面这个区域呢,我们也给他来一个。
06:16
0.5re emm像边框这一部分,我们给它保留正常的像素值,那好,那接下来我们说缩完之后,我们接下来干什么情况呢?说凡是以我rem为单位的元素,你现在不管是rem也好,PX也好,是不是都进行了缩放,接下来我们凡是以rem为单位的元素,你要把缩放完成之后的比例,你要反向的给我们乘回来,那好,那接下来我们给大家举个例子,比如说我当前元素的宽和高是200。哎,宽和高是200,你缩放完成之后,我的宽和高是不是变成了100乘100,我们拿DPR为二来举例子,是变成了100乘100,所以呢,接下来我们呈现的效果是不是应该还是蓝色的盒子,那最终你看200乘200,你最终乘完0.5之后,要变成100乘100,那接下来我还想让它恢复成200 200这么大,那接下来就证明我的0.5,你是不是要反向的乘以1/0.5呀,1/0.5实指上是不是要乘以二啊,把我这个比例的效果是不是反向乘回来呀,对吧?所以呢,接下来我们说最后一步,我说页面中的元素,来页面终的元素,像我们最终的宽度啊,像我们最终的高度啊,比例是不是要反向乘回来啊,来这一部分的比例,我们需要给它反向乘回来,来怎么乘呢?
07:50
我们说看到我的rem肯定和谁有关系啊AHTM元素,看到我的re肯定和我们最终HTML元素有关系,所以接下来第一件事情我们就获取一下我的HTML来HTML获取完成之后,我们要操作一下我们最终HTML的元素HTML node,操作它的对点是不是fo size呀,来让它等于谁呢?我们说等于我的屏幕区的宽,而屏幕区的宽我们之前是不是也没有求过呀?所以呢,接下来我们要获取一下我们最终整个屏幕区的宽来玩一个等于我们看到的document document element.y这是个屏幕区的宽,那好,那接下来我们说屏幕区的宽比例要反向乘回来,而乘回来这个scale分之一是不是就是我们看到的D撇啊?所以接下来我们的最后一步需要给我们加上一个单位。
08:50
PX就可以了,来看一下我们最终的效果,来右键检查来,别忘了刷新,这时候你看盒子大小还在,并且我们整个元素这条边是不是同样也已经变细了呀,对吧?来,那紧接着我们看一下F6PLUS,来这时我们刷新同样也是元素大小变了,而你最终呈现的效果是不是也实现了这样的一个效果呀,对吧?来那接下来我们说上面这种方案是我们实现的方案一实现的一物理像素,接下来我们实现一下第二种方案,第二种方案一样,我们说盒子的宽度高度我们给它准备好了,但是准备完成之后我们没有这么做,我们怎么做的呢?来仔细的看一下我们这样做的。
09:33
当前我给我的盒子box添加一个before或者after的伪元素来,我们给它添一个before,我说想要使用before,前提条件我们说必须是不是得写count呀,来,Count写完之后这首before是不是就作为我盒子box子元素啊?所以接下来我给我的负元素写一个position relative,给我的子元素写一个absolute,又因为一会实现的边框我需要放到下方,所以接下来对于我的子元素left来讲,它是不是零,对于我子元素的bottom来讲,它是不是也是零,它写完零之后,我们说元素的宽,我们让它和负元素保持一致,100%元素区的高,那这个时候我们说先给它写一个EPX来,那接下来我们说元素的背景颜色,我们说先看一下来正常,先给他指定个灰色来,指定完黑色之后,我们直接看效果。
10:34
来,是不是这样一个效果啊,我们调节到移动端之后,是不是这样一个效果,但是我们说现在我并没有改变我们这个高为一,变成我的一物理像素,因为我们说高为1G1撇X是不是也是CSX像素,那接下来我们说下面的部分我们到底应该怎么做呢?来,那仔细的看,我们说下面部分我们要这样去书写,来还记得我们之前是不是讲过一个东西,叫媒体选择器Meta标签,来Meta标签我们说监测一下我的屏幕,监测完成之后,我们接下来监测谁呢?监测一下此时我设备中的DPR,如果我的DPR是二的话,证明我Y方向这个元素你是不是要缩放0.5倍呀,对吧?你看本身唯一这么高,我只想看到其中的一半,那接下来我们给它换一个颜色,它呈现之后是不是应该是这个样子呀,所以接下来我们通过媒体。
11:34
选择器来监测一下,来媒体选择器最终在书写的时候,我们得就要这样去写,嗯,Web k,紧接着这里边是不是有一个min give device pixel RI,看到它了吗?来这个时候我们给它加了一个M,说为什么加min呢?我们说min实质上代表的是最小的意思,也就说白了我的DPR最小值是二,那也就证明你既然包括二,是不是也包括二点多的数字啊,甚至是不是也包含三呀,对吧?所以呢,接下来我们说先给它来一个范围值,因为我们说整个移动端你除了有二的设备之外,你最终是不是还有二点多的一个设备啊,对吧?所以呢,接下来我们给它来一个范围值,那接下来我们说既然你有二的部分了,那紧接着肯定还有最小值DP是不是为三的情况啊,那好,那当我们为二,我们接下来是不是想让元素整体在垂直方向上,是不是缩放0.5啊,那这时候我们应该怎么做呢?我们。
12:34
只需要这样做,拿到我当前这个元素before来来完之后,那接下来我们说在这里边我们需要给它加一个transform,添加一个scale y,来scale y的这个地方,我们需要给它写一个0.5,那同样我们下方这个位置只需要把它换成几就可以了呀,是不是10.333/3呀,所以呢,接下来我们说这一套方式是我们第二种实现物理像素的一个方案,来我们直接检查看一下,来右键检查找到我们这边来刷新一下,你看明显这条边是边细了,同样我们选中当前这个盒子box,来选一下我这个before,你看一下before此时生效,是不是0.333,紧接着我们切换一下我的IPHONE6的设备,我们刷新,再选中我们当前元素的比方,它实现的结果是不是0.5的一个结果啊,所以呢,接下来我们说这是我们最终讲的应物理像素第二套实现的一个方案。
我来说两句