00:00
啊好,我们刚刚讲了四种像素吧,好,来看一下,另外像素里面比较重要的一个概念就是像素比。啊,像素比的官方定义,物理像素和设备独立像素的比例啊,就是有一个device。瑞吧,它是等于物理像素比上独立设备像素。好,我们来看一下物理像素,好物理像素是不是就是分辨率啊,好,来看一下分辨率啊。好,IPHONE6的分辨率多少?三四是吧,再来看一下I6的设备,独立下是多少,去哪看?打开是不是F12来看一下。好,这是IONE6的,IONE6的设备独立像素很横向多少?375,好,OK ione的物理分辨率横向多少?七段。750。是不是OK,这个比例是多少?
01:00
多少物理像素比较设备独立像素是多少二吗?看到没有DPR是不是二?DPR就是像素比是不是为二好来看一下好,那这是一个什么样的概念?好像素比为二,这个事情应该没问题啊,好,那我要问大家。IPHONE6的像素比为二,那我就问你在IPHONE6上面啊,你不要你们不要看这边IPHONE6上面一个CS像素到底占据多少个物理像素。就是在IPHONE6上面,也就是在像素比为二的手机上面,一个CSS像素到底占据了多少个物理像素?或者说我先不问你一个三像素,一个设备独立像素占据了多少个物理像素。因为设备独立像素跟物理像素之间是不是有个比例的,这个比例叫什么?像素比是不是OK?好,设备独立像素跟物理像素的一个比例就是像素比,那我问你现在一个设备独立像素占据多少个物理像素?
02:02
我的问题是一个。一个设备独立像素占据多少个物理像素?一个设备独立像素占据多少个物理像素?22倍二倍22。多少啊,死了是不是很纵向上面吗。是不是横向上面是你的二倍,纵向上面也是你的二倍,那一个设备独立像素再去多少个物理像素?四个这个坎能不能跨过去?是不是啊,好,这是一个设备独立像素。OK。横向上面占据多少?一个设备中像数占据几个物理参数?横向上面两个,纵向上面几个,纵向上面两个一个。
03:02
两个。总共一个设备中下占据几个物理参数?那不是四个吗?那不讲,再来看刚刚像素比,像素比是物理像素比上设备独立像素啊好,这你看好物理像素比上设备独立像是不等于二,因为像素比为二嘛,像素比是物理,物理像素比上设备独立像素嘛,等于二嘛,那物理像素是不是等于两倍的设备独立像素。这比的是什么?物理像素等于两倍的设备独立像素,那一个设备独立像素占据几个?物理叫什么?1/4个物理像素了吧?哎,完了,还是概念混了吧,好,切记好,我们把四,我们把像素比这个概念帮你们细化一下。像素比这个概念官方说的就是物理像素比较设备独立像素,可是最好的解释是像素比应该等于一个方向上再买一块屏幕所需要的物理像素的个数。
04:06
能不能,能不能这句话。一个方向上占满一块屏幕需要的物理像素的个数,IPHONE6要多少个?750个。比上一个方向上要再买一台屏幕需要的独立,独立设备的像素多少?375。也就是说,像素比。是个数比。不是面积比。能不能理解,能不能理解,那是不是,我问你,那是不是750个。C物理像素再买一个375个设备,独立像素再买一个屏幕,哪一种像素大?我说的大是面积上面谁大。面积比谁大?一样大呀。
05:02
好,我先问你们啊,先先听着我在买同样的块屏,都是屏幕一样大吗?暂款再买同一款屏幕很向上面,我需要70个物理像素,而只要三个设备独立,谁大设备独立像大。懂啊,能不理解啊,那这个比例是一个什么比啊。个数比什么倍数表不是倍数比吧,个数吧,是不是物理像素的个数?再买一个屏幕得是两倍的设备独立像素个数,这是面积比吗?啊,这个概念极其极其让人。你说像素比的,像素比不是比的物理像素跟设备独立像素的面积。比的是什么个数?而且有一个条件占满同一个区域。
06:02
IPHONE6嘛,再买你整个屏幕横向上面需要750个物理像素,需要375个设备的像素。那这个比例是二。懂不懂好,因为很多人把这个像素比会认为是物理像素的面积比上设备独立像素的面积等于二。啊,记住这块比的是个数,一般我们说的像数,像数都是在说个数。懂不懂好,可是这边呢,我问你一个设备独立像素占据多少个物理像素,这边比什么了?一个设备独立像素里面能占据多少个物理像素?这边比啥了?面比的是面积了,概念换过来了,这个像素比说的是个数,现在我问的是面积。懂吗?OK,也就是说,那我问你,现在一个设备独立像素占据多少个物理像素?几个?
07:02
一个设备独立像素占据多少个物理像素?四个吧。是不是一个设备独立像素占据四个物理像素?说再买一个屏幕的话,物理像素要更多,因为你物理像素小啊。能不能给得到点,一定要给到点,要搞要搞清楚,搞明白像素比的意义,这个极其重要,搞不明白像素比的意义,我们后面做适配,你要听炸了。啊,切记这是个数,不是面积,有没讲,而且这个像素比的定义在这边,你给我记这个定义啊,不要记它的官方定义,官方定义太晦涩了,就说物理像素比上设备独立像素,那你比的到底是什么?是不是好?其实这句像素比的什么一个这这句话就给我背死了。像素比等于一个方向上占满一块屏幕所需要的物理像素的个数,比上一个方向上占满一个屏幕所需要的独立设备像素的个数。
08:05
懂吗?这个比例是二啊,切记不是面积啊,我已经记进行了很多次了,能不能讲OK,而且。我们现在说的是不是设备独立像素跟物理像素之间关系啊,其实最终我们要拿到的是CS像素跟物理像素关系啊,提前告诉你们一个结论,以后你们就可以把独立设备像素看成是。CS像素它们两个是等价的,不过有一个前提条件,给我加这个标签。面的表现,Y等于DYY。啊,之后我给你们讲为什么?首先你得有个概念,咱们讲的四个像素,四种像素,C像素,物理像素,位图像素,设备独立像素,设备独立像素是CSS像素转成物理像素的一个重要的媒介。是不是OK,什么样的媒介,你们可以认为设备独立相,它就是。SS像素,一个前提加幂的标签,Y是等于d device y OK,好,那我们来对这个像素做一个总结,好,对于我们外部开发者而言,我们使用的每一个CSS跟javascript定义的像素,本质上代表的都是啊。
09:19
CS像素,我们在开发过程中并不在意一个CS像素到底跨越了多少个物理像素,之前我们开发过程有从来都没有在意过。是不是OK?我们将这个依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器。我们从来没有关心过,可是要做移动端,就必须给他搞搞清楚了。好,物理像素是设备成像的最小单元。能不能理解CS像素是一个抽象的层,是web开发中的最小单元?位图像素是图片的最小单元,设备独立像素是一个抽象的层,是设备提供出来的一个接口。对接谁的。像素的好,像素比是物理像素比上设备独立像素啊,说的清楚一点,是一个方向上占据一块屏幕所需要的物理像素的个数比上一个方向上占据一块屏幕所要的独立设备像素的比值。
10:17
能不理解好,这是像素比的最完整的定义好这一块。好,由于物理像素,设备独立像素,像素比都是设备中的概念,这个有没有问题?物理像素、设备独立像素、像素比都是设备的概念,跟浏览器没有一点关系,你看你的像素比是物理像素比较设备独立像素吗?这三个概念都是设备的概念,暂时跟CS的像素不用挂上一点钩。是不是啊?好,再来看好,这些参数在设备出厂时就已经定下来了。所以独立设备像素跟像素比在web开发中没有任何意义。对于我们来说,干嘛你跟CS像素没有扯上关系好,为什么呢?因为。
11:30
好,物理像素也叫设备像素吧,买手机的时候会有个M乘以M的一个分辨率,那就是屏幕M乘以M一个乘以M的点,这个点就是物理像素。啊,一个点为一个物理像素,它是平幕的显示这个最小力度啊,那设备像素也成物理像素,好,那任何设备的物理像素的数量都是固定的,你一个东西出场了。很纵向,上面到底有多少个物权数,能看能改吗?改不了的。
12:01
这能不能理解啊,手机啊啊,你不要给我想电脑,想你的手机,手机一旦出场的分辨率是改不了,能不能理解,也就说物理像素的个数你没确定下来,确定下来了懂吗?OK,好,任何一款设备上一物体上数的大小是不会变的。首先你一款设备出来之后,首先物理像素横纵向个数全部确定下来,其次这个物理像素到底代表到底干嘛,占多少英寸,有没有确有没有确定下来,确定了你屏幕尺寸确定下来了,是不是你屏幕密度已经确定下来了,那你一个物体上到底占多少英寸,是不是已经确定下来了,可是我问你。一个物理像素在不同设备上面所占据的英寸的数量啊,所占据多少英寸是不是不一样?想想我这句话。不同屏幕上面一个物理像素点到底占据多少英寸是不一样的,跟你屏幕有关系,首先得看你这个屏幕有多大,其次得看你屏幕上面有多少个物理上的点。
13:07
是不是?那也就是说物理像素是统一的吗?不是,可是一款设备上面的物理像素出场的时候就已经定下来了,有多少个多大。能不能理解,能不能,能不能理解这句话,好,这个概念得有,那相数到这一块就可以结了。那边讲。
我来说两句