00:00
好,那我们讲完像素的概念,我们再来做思考。好,首先我们来说一个浏览器厂商它面临的一个问题。啊,在移动端浏览器厂商面临着一个比较大的问题。我问你是PC端先出来,还是移动端先出来。那肯定是电脑先出来。是不是进儿歌嘛,手机才出来吧,是不是还问你,那你电脑出来是不是就有pcp的一个网站。那手机出来的时候,浏览器移动端的浏览器厂商,他怎么将数以万计,甚至说可以是数以亿计的PC端网页完整的呈现在移动手机上?并且不会出现横向滚动条。想想,横向滚动条是我们自己不喜欢的东西。已有纵向股的角度。对,不学你这么滑是不是很开心啊,让你这么滑你就不开心,我也不知道为什么。是不是你让我这么滑,我很开心啊,纵向上面滑我是不是很开心啊,是不是你一一旦让我横向上面滑就是不爽。
01:02
是不是,你们有没有这种体会啊?咱们应该是一类的吧,是不是啊,OK,这样顺手啊,这样的话不舒服啊,累啊,是不是,那人就是懒了,懂不懂,所以说大家想想PC端的网页,咱们设计起来一般都是960。或者说1024啊,或者说我们是1101100。是不是,这是不是我们P端的尺寸啊,你想。你移动到屏幕才这么点。你不出现横向滚动条,你要把它放下来可能吗?BB会出现横向滚动条。是不是啊,可是你们看着好,我给你们打开一个站点。3W点艾特归国。点com是吧,这是不是PPC的断点,我F是要进来,大家大家看。移动端的浏览器厂商有没有实现将PC端的网站放到他的视图里面,而且完整的显示有没有?有,那说明移动端肯定得有一个东西啊。
02:10
得放下你那么多像素。是不是啊?能不能理解?OK,好,首先我问大家这个问题有没有解决,解决了你看我有出现横向滚动条吗?没有,只不过字变小。是不是好,可是1PC端的站点是可以在我移动上面上面上面干嘛完整显示的,而且没有出现横向共条。是不是,那你想想,我们说PC端的网站怎么着也得960PX,那我引入它是不是得一个容器放下这900PX是不是啊?好,这个容器叫做。布局视口好,这个时候视口的关宽度还是和浏览器窗口一致吗?不可能一致。懂不懂?我们都知道PC的网站一般都是九百六或者1014的,要完整的方向它,我们移动到617,必须得有个容器方向它。
03:07
而且只有有了这个容器,我们才能很好的规定移动的氧器到底能放下多大的量。是吧,你是不是得有个容器啊。告诉页面,我最多就放下这么宽的页面。超过这个宽度,我就要出现滚动条了,是不是这个容器叫做。布局是搞OK,布局是搞来看一下。好布局,适合的尺寸。嗯,找找这边OK,大家看到好,这是iPhone ipad,三星HTC,黑莓IE他们这些设备的。布局适合的尺寸是多少?要么是980,要么是。1024为什么这么设计啊?一般的页面是960。是不是,所以这些厂商他把它的布局是的宽度统一调成了九百八左右,比说只要一般的PC的页面我都可以放下,只要你不要大于900 980,你想你如果是九百六的,我两边还给给你留。
04:13
十像素。懂不懂啊,所以说一般布局是口设置在九百八左右啊,黑莓跟I有点有点大一点二四。这个能不能理解啊,OK,好,那我问你。好,大家看这个就是布局。这个就是不局,好,你说你这不扯淡吗?我拿一个手机出来,我也没有看见一个屏幕,干嘛超出来啊,是不是啊,这就是难的地方,不局是个确实存在。而且他确实。就是什么数值上面确实要比你这个要大。问你比如说这个是我的IPHONE6吧,问你IPHONE6这个宽度为多少?如果拿物理像素来衡量多少?750。
05:06
拿设备读一下来衡量三七。是不是OK,我布局适合多大?九百八就也就说如果你们这几个东西啊,如果你物理像素CS物理像素设备独立像素跟我这个什么布局是狗是狗是狗的单位是什么。是口的单位是什么?是狗,是谁的东西啊?浏览器的东西单位是什么?CS像素啊,如果你物理像素,CSS像素,设备独立像素比例是1:1:1:1,那你看到就应该是。嗯。是不是啊?可问题是人家不可能一笔一笔啊。懂不懂这张图是有前提的,什么前提啊?什么前景,它默认认为你这三种像素的。大小是一样的,才会有这张图出现。
06:03
这能不能理解,OK,好好,这是一个是狗布局,是狗用来控制啊。我整个移动端设备的布局了,OK,好,还有一个时刻叫做。视觉是高视觉是在这。这叫视觉视考是不是啊啊,视觉视口决定用户能看到。那么你讲好,我现在问问大家一件事情好,比如说就看这个网站。好,它的布局是度是多少。980。视觉是口是多少?三。不是375,不可能是3754口,四口的单位是什么?30像素,我问你,你现在有没有完整的看到这张网页。
07:05
那视觉这个尺寸就是。980。布局是否决定了网页的布局,视觉是否决定了用户能看到什么,你用户现在看到了整个网页,看到了整个布局思考。那你视觉诗歌尺寸就是980。能不能理啊,OK,也就说布局是否跟视觉是不值的,都是九百八十三两组,能不解啊?OK,那给个本子,给个手机给我。给个本子,给个手机。这就可以好来看一下。好,这是我们的视觉思考。是不是啊,OK,你们可以这么去想象啊,就是在网上很多教程都是这么说的,怎么说的,如果你这个设备跟这个布局是否贴在一块,你是没有办法完整的看到布局是狗的。
08:00
怎么样才能完整看到布局时刻,他们之间有一个距离,有个距离你就可以通过这个视觉时刻完整的看到布局时刻是不是,可是你拿这个手机出来,你看到这里面有距离吗。这不瞎整吗?是不是啊,所以他只是说形象的去比喻一下,你们不要把不要被这个概念所带偏了,真正是什么样的,真正的其实是干嘛什么都没有,这个手机OK,实际尺寸在这边。是不是这个尺寸是英寸吧,厘米吗?是不是里面包含两个是高CSS,他们的单位是C像素CS就是抽象单位吧,是不是?那我就告诉你,这一个屏幕里面包含了两个视口,一个是布局视口,一个是视觉视口,只不过现在啊,我的尺寸可能是五寸。啊,你视觉是个布局是个都是980CS像素,就说你980个CS像素占据了五成。能不能理解,能不理解,可是我问你,你们有没有玩过说话?
09:05
玩过说吗?OK,你玩过说大看我大看我屏幕有没有可能我放大放大我只看到这个是不只看这个logo,好,这个是下降,比如说这个手机整个屏幕里面你只看到那个logo。是不是我问你这个时候布局之后为多大。布局是变不变,九百八出场就定好了,定死了980,可是现在你只能看到那一个logo,视觉是多大?Logo多大,视觉水就多大。刚刚两个概念很重要,布局是否决定了网页的布局?也就比如说你两个浮动的元素到底要不要换行,看谁。看布局是高视觉,视觉是决定用户能看见什么。布局是狗,基本上它的。
10:01
尺寸它不会变,就是980,我问你视觉视口尺寸会不会变。视觉是否会不会随着用户的缩放变扭?会,我们说尺寸,尺寸,有没有同学能拿一个更合理的概念来代表这个尺寸?什么叫尺寸?什么叫尺寸?米,你包含的CSS像素的个数就叫尺寸。我一个D尺寸,200乘以200尺寸说的就是你包含的CS个数。并不是我们平常意义上理解的啊,面积。概念能不能转过来?OK,也就是个什么事,我问你,布局是狗跟视觉是狗,物理尺寸都是我。布局是搞是就是个物理,都是我的皮肤尺寸,这句话能理讲,OK。
11:05
布局是否在这个物理尺寸里面包含的C像素的个数是固定的?横向上面就是980。是不是视觉视口在这个物理尺寸里面所包含的CR3的个数?跟用户的缩放操作有关。默认情况之下,用户没有缩放视觉,视口包含的CS上的个数应该要等同于。布局视口,可以说视觉视口有一个很重要的作用,完整的包住。布局是高。这整个规范就是移动端浏览器厂商。涉及到。为什么这么设计?因为它面临着一个问题,什么问题?如何将数以千计、数以万计的PC端站点完整的呈现在它的设备里面?它设计了两个思考,一个叫做布局视口,第一个叫做视觉视口。布局视口决定。
12:11
网页的布局。视觉是否决定用户看到什么?你有没有发现,你们看这个上回谷这个页面。你看布局有没有错的。布局有没有错乱,没有错乱,为什么?因为布局是够九百六啊啊布局是够980。你一开始你在PP端化的时候,整个网页的宽度也是980。是永远不会错乱的吧,是不是,而且现在视觉时候也是九百八所正好包正好看见,是不是一旦放大呢?放大之后视觉是多。问,你放大之后视觉是否包含的三相的个数是变多还是变少?变少了,因为你看到的东西变小了。
13:02
那么理解。能不能理解啊,好,那这个概念是最重要的,应该说是最难的一个概念,能不能分清楚布局视口跟视觉视构啊,不但要分清,还要理解。那边提交OK,好再来看。好。那OK,那这时候我们要稍微写点代码。好,嗯,首先我这个文件夹。好,我写个一。01OK,我们要搞清楚,思考。好啊,比如说我现在有个div,好ID叫做test是吧,好,找你,我来的是好,其他我全部干掉,Monkey way0 ing way0是吧?好,我来个test。
14:07
好。好,现在我再来写YY。200PX,你的感受要不一样?是不是啊啊,明显你看到这个就不一样了,更加新鲜了。啊,因为你已经懂它了嘛,占那个哪还有多少200PS是不是,你看现在百分之四百九是不是好给他一个背景。好问题好,我打开浏览器。好,F进来好刷一下,大家看好,能不能理解为什么这个粉红色块占据了我这个设备的一半?三的像素,我这个粉红色的块宽度上面占据了40个三的像素。
15:01
而你整个布局是搞就是980,那我是不是你的一半。这个是实际的物理自传。这个物理尺寸横向里面包含了980个。你现在是490个。那我就是一半。是不是这个道理?OK,找你好,然后我们做一件极其重要的事情。Can you see。好,我把它换成200。好。啊,卡一卡卡卡更健康,好,我换这200,现在这个元素应该占据多少。九百百分之两百吗?好,那还是那个问题好,现在我写了这个面条标签之后。我问大家布局是狗现在应该有多大,我打你了多三。
16:12
这里好看着。F12,你看,如果我写375,那就是站满,比如说我374,那就留下一个小时。你看这边是不是差了一个小时是吧,重置吧,那怎么办,比如说三百五差不多快满了。375正好在。能不理解?OK,那我写多少?写一半的时候就多。375的一半多。完蛋。升不了。好,我们不算了啊,知道就行了,是不是差不多吧,OK啊,三百七应该是不是留了五留了五像素啊。
17:02
你看给你的偶像数能不讲好?现在能不能理解这句话说?好,这句话还有一个特别重要的事情,我们一旦写上了这句话。Y是CS的像素。点device设备独立像素问你一旦写上这句话,像素比就有意义了。没有这句话。像素比没有任何。因为像素比是物理像素跟独立设备像素的比值。一旦写上这句话了,数字上面CS小学跟独立生命一样。能讲好,比如说我们刚刚那个DEMO,好我把它做掉。好,我问你。好,就这样。490。好,这时候我问你,一个CSS像素占据了多少个物理像素?给我算。
18:02
一个CS3的像素占据了多少个物体?我就问你,现在这种情况之下,CSS数大还是物理小数大?想想CSS大还是物理箱子大?对,物理像数的。你个。为什么还是那个概念,占满这整个屏幕多少个三像素?什么?CSS小说。再买几个屏幕,多少个物理数?750。用750个物理像素就可以再买一个屏幕,要用980个CS才能再买一个屏幕,谁大?
19:04
物理像数大一个物理像素是多少个三像数?这个比例很难空。这个比例跟你的分辨率还有关系。是不是啊?OK,再问你大问题,现在我写上这个标签。好好,我就问你了。CS像素跟物理像素的比例是多少?想想多。好,问大家,占据整个屏幕需要多少个物理参数?七百五的小说。好,再买整个屏幕需要多少个CS相,为什么是等于布局是可的宽度等于你独立设备像数所代表的值。
20:09
多少?375。谁到一个C小数等于几个物理小数?四个一个加上等于四个五。是不的,是不是你像素比的平方,而且不是像素比的乘积啊,是平方啊,像素比为三的时候,一个几个九个。我问你,这个时候移动端浏览器厂商设计的规则才被用上。是不是这个概念,是不是如果你没写那个没标签,他们设计的规则就是废了,用不上了。是不是OK好到这到这一块好。
21:03
好,那到这一块,我们这个什么,首先你要理解什么是布局思考,什么是视觉思考。是不是OK?其次,布局是狗跟视觉是狗的作用分别是什么?好,这边我给你们总结一下,布局是个的作用是什么。决定网页的布局,你到底要不要换房?我整个视口里面到底能放下多大的网页,都是我布局时刻干的,视觉时刻做什么,决定用户能看到什么。是不是好?我再来说一句话,我说视觉是狗,它决定了物理像素跟C像素的比例。能不能理解我说视觉是狗,决定了物理像素跟CSS像素的比例?
22:00
一个视觉时候占据了物理上的个数永远是。750。是不是,可是你视觉视否里面的CS像素个数永远在变,跟用户说放有关系,就你这个屏幕在这个状态底下,你CS像素跟物理像素的比例到底是多少,得看视觉时刻里面包含了多少个CS像素。刚刚我们说一个物理像素啊,不,一个CS像素包含了四个物理像素,这是在什么情况下?用户没有缩放的情况底下。是不是用户一旦缩放了这个比例要不要变,要变,所以说我说视觉视狗,其实它最大的作用是维护了CS像素跟物理像素之间的比例。这个比例是面积上的比例。能理解吗?好,那到这一块好布局思考,视觉思考,咱们搞定好,还有一个叫理想思考,好理想思考,现在我跟你们说一句话,什么叫理想思考?独立设备像素所代表的值就叫理想思考。
23:06
为什么?因为当你加上没标签之后,外了,如果你不说放视觉是干。布局是高,在CSS像素的概念上是一样大的。这个时候这个式就叫做理想式口,什么时候有理想式口?只有加上面的标签之构才会出现理想式口,此时理想式口布局视口是觉是口三合一。你能不能理解我的话?三合一。不理解吗?你看当我加上之后问你布局是多大?当我加上标签之后,不许多大。375多少?
24:05
三五乘以667是不是加上面的分之后,布局是个375乘以。667视觉视口,在没有缩放的情况底下,他的任务就是帮助整个布局是高视觉视口,也是375人员。667 OK,两个时候在CSS像素的层面上一样大,这个时候就会出来一个概念,理想。是不是立想式构?这个尺寸所代表的是构,就叫立想式构。好,说的简单一点,独立设备像素所代表的值就是低理想式构的值。理想思考没有任何用,懂不懂只是说家里面的标签之后啊,多了一个概念就理想思考啊,就当布局是和视觉是一样大的时候,就会有理想思考。懂吗?OK,那到这边三个时刻咱们一样说完,好想想到现在我们说了。三个视口四个像素,记住这三个四口四个像素能解吗?OK,那晚上我们继续。
我来说两句