00:00
那我们把前面讲的东西,我们来稍微的过一过一个复习。现在没。啊。好来先听着啊,好看我们第一天的。啊,这是我们移动端的第一天。好,首先说几个基本概念啊,大家知道的一个基本概念啊,还记不记得啊,基本概念里面第一个我们要说的一个屏幕的啊。尺寸是不是,你就告诉我这个尺寸的单位是什么英寸啊,你可以记得这就是厘米,是不是记死了啊?我们说的屏幕尺寸说的是厘米是不是对角线的。长度是不是这是我们说的屏幕尺寸吧,说完屏幕尺寸,我们这个月说的什么?
01:04
屏幕分辨率,而你这个屏幕分辨率,它说成什么?啊,你得把这个概念记住啊,是什么横纵向上什么,对横纵向上物理向数的个数,横纵向上什么。物理像素的点数也可以叫个数。是不是OK,这个单位你就可以认为是什么物体像素。这个能不能讲OK,还有一个是什么。屏幕密度啊,屏幕密的是什么?每厘米可以说每英寸么?每英寸什么?每英寸上物理像素的个数?
02:07
这是不是叫屏幕密度啊,屏幕密度决定了你这个屏是高清屏还是。普通品。能不能解好,那这里面给你们加一个概念啊,这个概念是我们之后体的,我们叫做四口尺寸,好告诉我四口尺寸单位是什么。什么叫视口尺寸?PX屏幕尺寸嘛,这PX代表什么?比如说现在我这个屏幕是1080。就是我的屏幕宽度啊,我的视口宽度是一米八厘,这这说的是什么,横向上什么。什么叫个数?肯定是个数,你得知道。物理个数还是C个,比如说现在我这个思考是1080乘以720。
03:09
这说的是你整个视口里面包含了什么?CSS像素的个数能理解啊,这个尺寸跟屏幕尺寸概念一样吗?不一样,屏幕尺寸是我们最终这个物理尺寸到底多少,真的,你可以认为分辨率也是一个抽象的单位。抽象的尺嘛,这是一个不能拿分辨率去比较大小的吧,啊,你也不能拿四个尺寸去比较大小的吧,比较大小拿什么?屏幕尺寸,哪块屏幕大你得看什么屏幕尺寸吗?有没有讲好切体四口尺寸代表了什么?一样的跟物理分辨率差不多,横纵向上什么?CSS小数的个数啊,这个我们之前讲的是一模一样的啊,只不过先单独把这个概念给大家抽出来了啊,OK,所以说你要更清楚一点。
04:04
啊,你单位可以认为是CSS像素是不是好,这些基本的概念必须得知道好,那第二个点就比较重要啊,这里面我们讲了三个,三个像素三啊不四个像素,三个四口啊,我们说三个是口啊,我们一般这么去记它刚刚好,四个像素三个是否两个操作一个比例是不是好,首先我们说四个像素。好四个像素有哪四个像素,物理像素,然后呢CSS像素,然后呢设备独立像素,然后是位图像素好物理像素好,我来问大家物理像素其实就是什么分辨率。
05:04
是不是OK,可是大家对这个物理像素的理解啊,得更加的深一点。首先问大家。物理像素,一个物理像素。OK。一个物理像素占据的实际。尺寸啊,屏幕尺寸,一个物理像素占据的实际的屏幕尺寸在不同设备上是否一样?好,回答我这个问题,一个物理像素占据的实际的屏幕尺寸在不同的设备上面是否一样?一不一样。不一样。
06:00
有没有同学觉得是一样的?肯定是不一样的吧,一个物理像素占据的实际的屏幕尺寸在不同设备上面是不一样的。想想是不是能不能过。固固定的是什么?同轨上面固定什么,我们说这个占据实际的屏幕尺寸是不是面积啊。占据的面积他会一样吗?不一样吗?不会啊。为什么你想想你你就这样想,苹果3G手机跟苹果4S这个手机两款屏幕尺寸一不一样。屏幕尺寸一不一样,一样分辨率不一样,不一样分辨率是什么?物理像素吗?那你物理像素占据的实际的面积一样吗?不一样,就是这个占据的屏幕尺寸一样吗?不一样吗?只不过什么时候是一样的,什么东西是一样的,设备干嘛?出厂时设备出厂时该款设备什么?
07:12
看怎么说。该款设备。所包含的什么物理像素的点数?和面积干嘛?它所包含的物理像素的点数和一个物理像素所干嘛占据的实际的屏幕尺寸是不会变的。这句话能不能理解啊,概念比较抽象,可是能不能理解,他能理解,OK,理解这个就是你们对物体像素啊,就可以理解透了。
08:08
你也知道不同设备上面物理像素占实占据的这个实际的屏幕上是不一样的,可是只要这款设备确定下来了,那我这个物理这款设备,它所有的物理像素的点数,跟这个物理像素所占据的屏幕实际尺寸,它是永远都不会变的。你再怎么缩放,它也是不会变的。是不是啊,这个两点必须要先给他确定住啊,这两点确定不住的话,后面概念就没有办法去讨论它了,懂不懂啊,OK啊,我们复我们复习的时候是比较跳跃的,你没讲啊,看你对第一天的东西掌握的怎么样,好,然后我们说CS像素。好,现在说我们一般干嘛?怎么去形容它?是我们web开发者使用的最小单位,是不是这个物理像素呢?是分辨率是什么的最小单位是屏幕成像的最小单位。
09:11
懂吗?OK,这个是外部开发者使用的最小单位。是不是OK,一个CSS像素最终一定会干嘛转成物理像素?去屏幕上生效。因为你要干嘛成像吗?成像的最小单位是。物理像素,你csi像素只是我们外部开发者使用的一个什么单位吧,所以说你写出来一个DP到底有多大,到底长什么样,最终一定要整成物理像素了。是不至于一个CSS像素到底占据。
10:02
多少个物理像素跟谁有关?和谁有关?和两样东西有关,一个屏幕的特性。一个用户的缩放行为。屏幕的特性和用户的缩放行为。OK,对CS上有理解,到这边就可以了。能不能过,不能过你说。能不能过?有没有问题啊。屏幕的特性是不底是怎么?屏幕的特性,其实我们说这边说的屏幕的特性。你是普通屏还是你是普通屏还是高清屏,其实说说的就是什么。屏幕的特性。
11:00
就是说的CS相同跟我相同的比例。是不是,只不过这个比例有时候是跟是跟谁有关的,像素比有关的,有时候是跟谁有关的。是跟你这个屏幕的分辨率有关的。能不能理解,那这边就么展开来说一下吧,好,那一个CS像素到底占据多少公像素,怎么去分析?啊,不考虑什么说法好,不考虑用户说法。不考虑用户缩放好默认情况底下什么叫默认情况底下没有零是不是问你没有的时候C像素占据多少个物理像素怎么算?没有这个V的,那么你CS像素跟物理像素之间的比例,或者说一个CS像素到底占据多少,物理像素怎么算?
12:08
你,你得去找什么?你得去找这块屏幕,这块屏幕我们看一个方向的嘛,比如说横向上。占据了多少个物理像素?是什么?是什么这块屏幕横向上面做正确多个物体数什么分辨率啊?横向分辨率是不是再来找这一块屏幕横向上面干嘛,占据了多少个CS像数。我们是不是都说的这块屏幕啊,面积已经定死了吧?相同区域内有多少个物理像素,有多少个C3像素,那他们俩不就出来了吗?
13:03
这个是什么?布局适口的。是吗?横向。尺寸是不是你要说的更精确一点,这边应该如果是移移动端这边应该拿谁的。你要看一个CS像素到底占据物理像素应该拿谁的视觉视狗在横向四寸吗?因为你没有用户缩放了,那我这个视觉视故的任务就是包括整个啊。杜绝是狗吗?是不是,那这个时候我问你这个比例是多少。是不是得看这个什么。布局,呃,这个什么,因为你没有说啊,是不是得看布局是的尺寸比上什么。你的横向分辨率啊,这个比值是不是就是他们俩的一个关系啊。是不是真的,能不能理解?
14:00
OK,那我们说什么有优惠的时候呢。有有约负的时候问你一个CS像素占据做像素跟谁有关系啊,你就不要自己去比了,为什么?因为一旦你有约负了,是不是可以使用规则了。像素比。是不是这样的,那么就讲这是不是屏幕的特性。懂吗?你看四节是不是横向尺寸物理分辨率嘛。像素比吗?这些不都是屏幕的特性吗?是不是一旦考虑用户的收放操作呢?一旦考虑用户的说房投资呢。是不是这个比例干嘛。在不考虑用户说话的基础上。我们说如果放大。
15:00
好,这个比例是变大还是变小?就是一个,如果放大一个像,像素是占据更多的物体,还是更少的物体占据。证据什么更多的物理像素?是不是缩小呢?占据更少的物理像素呗,这是从C数跟物理像素之间的关系上面,我们来考虑用户的数法。没有从这个品从这么适口的尺寸上面来去考虑,用户说是吧。考虑用户放不考虑,对啊,你肯定在这不考虑用户基础上,因为你这个缩放操作有可能是的嘛。没有维护的,有可能也是有约护的。懂不懂,所以说你考虑用应该在把屏幕特性什么。
16:02
基础上,如果放大,如果缩小。这是什么样的?这能不能理解啊,因为我不考虑用户双方,那么只考虑屏屏幕特性啊,一旦考虑用户双方操作,是不是这两点都需要去啊,考虑进来的,这能不能解,OK,那这就是物理像素跟SS像素。是不是真的?OK,有问题可以提啊。好,再来看,好,那紧接着说这个独立设备像素。好,也可以叫设备独立像素,一样的啊,只要不要叫设备像素,设备像素是个什么鬼?啊,就是物理像素有没有讲这个叫法特别多啊,可是你们把这个叫法给它固定下来。能不讲啊,别人说什么像素,你你得知道他在讲哪一个型的像素就可以了,懂不懂,反正咱们现在就是物理像素,CS在像素,如果你这边觉得奥普的话,需要独立像素。懂不懂,所以你们自己去整理自己的体系嘛。
17:00
懂吗?好,这个独立像素是个什么鬼?他是来干嘛的?好,我来写一句话,这个独立像素。我们什么是设备对接CSS像素的接口?是不是一旦CSS像素与独立像素?干嘛?如一旦像素与独立像素挂上钩,说明什么?好,一旦CS相数与独立啊,与独立设相数挂上钩,怎么挂上钩?Y是等于DE1CE。DVY这个时候干嘛?此时。
18:05
此是什么?此时,像素比才能发挥真正的作用。一旦你没有写上这句话,像素笔就是废了。因为物理像素跟CS3像素之间的比例,压根就不是像素比,而是这个比例。是不是像素比永远都是说的什么独立设备像素跟物理像素之间的比例?是不是你看你独立设备跟物理相处都是什么设备的东西啊。跟我们是不是就没有任何关系了,你写上去之后这个比例才确定下来,那也也也也是我们经常说为什么说我们加上面的标签才能使用上移动端的规则吧。这就是当中的一个规则,相素比。能理解吗?好,那继续,那这就是独立设备,独立设备像素的一个什么。
19:04
也叫设备独立像素,它的一个什么,一个运用懂吗?位置像素好说是什么。图片的最小单位,它上得有句话,位图像素。与物理像素对吗?1:1时。图片才能完美清晰的展示。OK,好,这四个像素能不能理解?啊,必须理解,特别是物理像素跟C的像素啊,极其复杂,他们的规则到底什么样的,搞清楚每一个细解啊,OK,好,这四个像素,那说完这四个像素还有什么?啊,其实这四个像素说完了三个四个就好说了。三个是考哪三个是狗?
20:02
不觉失考,视觉失考,理想思考,OK,完美适刻,暂时先不要放在这里面啊,OK,那布局是个什么作用?决定什么决定页面的布局,为什么它能决定页面的布局啊?比如说你几个元素浮动在一块了,要不要换行。是不是换几行,是不是都跟布局是有关系的,跟其他两个是有关系吗?没有视觉是干嘛。决定用户能看到什么。是不是好,那视觉是狗有一个很重要的作用,什么作用?我们说不,我们说干嘛,我们说一个CSS像素到底占据多少个物理像素?
21:07
和谁有关?和这个屏幕特性,跟用户的说话行为有关吧,你想一想是不是最终干嘛。就是和。视觉、视口有极大的关系,为什么说和视觉时刻有?有极大的关系啊。首先。问,你视觉视口包含多少个物理像素?有没有固定下来?视觉视口包含个包含多少个物理像素?有没有固定下来物理像素?我一个视觉视口能包含多少个物理像素?有没有固定下来?有,我就问你啊,你现在看,你现在看你这块手机,你能不能把整个屏幕全部看下来,能,那就是视觉是否包含了多少个物理小数。
22:07
是不是视觉是狗啊,就什么你说你考虑一个C像素占去多少个物传数,你可以从两个维度上面去考虑嘛,一个屏幕特性,一个用户说放行为吗?是吧,你如果觉得这个烦,想不通,你可以完全从是什么视觉是搞这个角度出发,来思考一个C的像素到底占取多少无限数,为什么?因为我们说什么一个视觉是考包含的什么。包含的物理像数的个数是确定的,就是什么分辨率。是不是你看跟我们这边是不是一样的。这块屏幕很像,他们占觉道互相说,你可以把这块屏幕就看成视觉视口吗?
23:00
是不是我们再看一个视觉是否包含的CSS像素的个数呢?是什么?不确定的。跟什么用户的缩放行为有关,是不是可是问你一个视觉视格的实际尺寸?是确定的是谁啊,屏幕尺寸吗?你想想啊OK,现在我这个视觉视稿,它占据的实际的这个面积是确定的。完了,你这个社就是否包含的物理相素的个数也是确定的,CSS相素的个数虽然说是不确定的,可是最终肯定是有个值的,那他们俩一比,那C相数跟物函数之间关系不就出来了吗?
24:00
是不是因为你们在相同的一个容?容器内部啊。是不是就你们这些多少个物理像素跟多少个CS像素,最终占据的这个实际尺寸都是一样的。那这个比例关系不就出来了吗?所以说我们这样说,视觉视狗是真正决定一个CS像素跟物理像素之间关系的。是不是其实这个视觉视口就完全可以把到。这两个规律给它吃下来,就是在视觉视口里面去啊,实现了这两个规律。是不的,能不能理解?能不能理解,OK?好,那理想是口呢?理想是就是。设备独立项,说说代表的值啊,立项之度的单位是什么?就是设备处理清楚。
25:02
懂吗?好,那这三个思考,视觉思考最重要。啊,因为视觉视口里面包含的东西太多了,而且你会发现三个四个跟四个像素是紧密相连的。是不是啊,OK,好,那搞清楚这。三个是OK,然后我们说什么。两个啊。操作。好,我们看那这两个操作好,我们也得分用户的系统的。是不是他们都是放大跟缩小吧,可是首先有个前提,用户的只影响什么?只影响布局思考系统的呢?影响什么?影响布局视口和视觉视。是不是OK,那我们就要说嘛,其实放大跟缩小在它们两个概念当中是一样的,是不是放大。
26:07
放大什么啊?每次考虑放大数数操作时候,你不要嫌麻烦干嘛,你不要跳干嘛,一步一步来放大的是什么?放大的是什么?放大一个CSS像素的。面积是放大了物理像素吗?是放在了物理像素吗?物理像素出场就不变了,你不可能放到缩小的,你只能放到缩小CS像素。懂吗?你放大一个CS像素的面积吗?是不是问你视觉是考那干嘛?视觉式狗呢,就可以这么说,视觉是狗的尺寸啊,你现在得知道了,我说这个尺数。
27:00
探索包含在四线数的个数的视觉视图的尺寸变。小。是不是啊,那视视觉时的尺寸变小说说的不就是什么CSS像素的个数变啊少吗?是不是啊,OK,好,我们说什么缩小呢?是不是放大一个CSS像素的面积,视觉十度的尺寸变小。是吧,那一个CSS像素干嘛包含的物理像素的个数变多。是的,这个能讲说小呢。反反过来嘛,你想缩小缩小,最终看到的东西小了,肯定说明你跟CS相差的面积变小。缩小了一个三数的面积,视觉视的尺寸变啊大,一个三像数所包含的物理像的个数变啊少。
28:03
是不是?这个关系能不能理清楚,OK,好,视觉是狗,我们说干嘛,这边可能会是一个布局是狗,为什么有可能是系统缩放,那布局是的尺寸也会变小。是不是我们现在讨论的是不是只是用户缩放他自己强的视觉是个嘛,没有影响,没有影响布局是个嘛,是不是如果你是个系统缩放的话,布局是否也会变大。那么讲啊,这个指导下。好,那最终是一个什么像素比好,把像素比的概念给他说出来就行了。什么是像素比官方定义?官方定义怎么说的?官方定义说就是物理像素比上什么设备独立像素。
29:00
是不是官方给的定义极其抽象,是不是啊?我说你要把它理解一下,我们说像素比应该是什么?一个是不得是一个方向上。是不是你不能说是什么多个方向吧,一个方向上干嘛。所占据的什么物理像素的个数比上什么一个方向上什么设备独立像素的?个数。是吧,当然有个前提的,同一块屏幕吧。这考虑肯定都是什么同一块屏幕的嘛,加上没带标签之后,这个就可以改成什么。CSS像素,那最终咱们的理解就是一个方向上占据了物理像素个数比上,一个方向上面占据了CSS个数像素比吗?那你看看像素比,我如果把这个东西干嘛给你们拎过来,CTRLC拎到这边来。
30:14
还问你没有view的跟有VIP的时候,我们考虑这个屏幕特性的时候考虑的东西是一样的。是不是一样的,这个比的不也是个数吗?最终不都一样的吗?那这个规律跟这个规律不就是干嘛一模一样的吗?说的不是同一件事情吗?只不过咱们是不同的,在站在不同的维度上面去考虑这件事情嘛,就看你这个视口像素到底没有搞清楚呗,说来说去。我们的这个什么思想是不是永远是一样的考虑这句话。能不能理解?OK,如果这句话你能吃透了,说实话,我们讲到现在,所有东西你都应该没吃透。
31:02
有没有讲好,那这是我们讲的四个像素,三个时候两个速作一个比例,是不是OK,当然还有一些意外。什么意外?OK,三个意外。OK,想想有哪三个意外。啊,太大的元素。然后呢?对,用完美式格解决太大的元素。是不是还有呢?这是第一个意外太大的元素,第二个意外Y是跟调之间的冲突。第三个意外,等比。是不是啊,咱们把这个三个意外也给大家去好来我们看这三个意外好,我们说有哪三个意外,第一个什么。太大的元素。第。
32:03
和iit。It的冲突。第三个等比问题。是不是好,那今天上午这么一梳理啊,你这个体系要更加的清楚一点了,来看太大的元素,我们说什么,照理来讲,我们说什么时候出现滚动条。当你里面页面的内容超过布局,是不是还是视觉是高?视觉视口是不是你超过视觉视口就应该出现滚动条吧,可是发现大部分浏览器里面它不会出现滚动条,视觉视口会尽量的包住你操作的东西,是不是怎么解决。完美是考。是不是我们说太大的元素就是什么?使用完美适口干嘛解决?
33:05
太大的元素超过什么?超过视觉视口后干嘛不出滚动条的问题?是不是?那完美诗歌是什么?通常意义上,咱们的完美是狗。你得有外。这两个干嘛。这两个东西干嘛得都有,才叫完美时刻。有一个都不行。只有一个对,不行,你不讲,而且有时候特别苛刻,你这个一点的次方必须得是1.0,你这个Y必须得是外是外。一个都不能变。懂吗?OK,好。
34:01
可是一般你有了外跟之后啊,你不管它的值,大部分浏览器都没问题了。啊,可能还有极少部分浏览器,它没有没有完美,那那一部分浏览器你必须得这么写。所以你想兼容更多的浏览器的话,你最好干嘛,Y0S应该就是01.0。懂吗?OK,这你好,还有他们那个冲突好。把这个先往上拎一拎,这边是不是有个系统说法说的就是啊就他是吧,OKY和他们的冲突干嘛谁大。就这。好,OK,我先问大家。在移动端能改变布局石头大小的操作有几个?能改变布局是够大小的。就他们俩。
35:01
是不是啊,是不是只有只有只有他们两个的能力啊。还有一个。重力感应。横竖屏切换的时候是不是布局时的尺寸是不是干嘛高变宽宽变高是不是啊三个操作啊,记住一个是外是和外是可以改变不局是高,应该是是可以改改变不局是高,还有一个就是横竖比切换时候也可以改变不局,懂吗?改变布局是搞在移动端是不是一个性能极大的。消耗的性能是要很大的吧,啊,经常要足够重排量,懂吗?OK,那这个等比问题好,从这个等比问题咱们来阐述我们今天的课是不是默认情况下等不等零。嗯。问句话,能不能变等没有标的吗?等不能变等可是有,可是有个什么问题,页面太小,页面展示太太小,用户体验不好是吧?好,有了标的之后呢。
36:17
不等比每一个CSS像素占据的什么,占据的实际的什么屏幕尺寸一样。是吧?每一个CSS参数在不同设备上占据的屏幕尺寸一样。是不是那这里就来了啊。每一个CSS像素在不同数据上占据的物理像素。一样吗?个数一样吗?
37:00
不一样,比例是我们的像素比。间接的证明物理像素所占据的品实际数在不同设备就不一样。就是我们刚刚写的这句话。这个你能不能理解?是不是我们要不要等比。要不要等变,要等比,所以说才有了十倍,OK,好,那这是我们前面讲的啊,从第一个点基本概念开始讲讲讲讲到最后这个等比,有这个等比测出我们今天的课是吧,是配啊体系能不能处理下来。啊,如果你在你的面试当中,能把这个概念从基本概念说到适配。
38:03
啊,那基本上就是太强了。能解吗?想想你说这个东西要不要半个小时。啊,那这半个小时都在你自由发挥嘛,啊他他干嘛,他听吗?是吧,看看你对移动端的一个理解啊,功率到底怎么样。对吧,OK,好。
我来说两句