00:00
这一点好,来看一下。好,上午咱们讲到哪。讲了十口,讲到十口是不是好,打开这个课件。好,你看这个试课讲完,我们还有几个东西要讲,咱们还有两个课件没讲完。啊,第一个课件还没讲完呢,是不是啊,还有两个课件快啊,这个课件里面概念极多啊,好,这半部都是下数的,是不是这两面都是关于四口的啊,四口咱们是不是看。布局是考,视觉是刻,理想是刻,咱们是不是已经讲完了,也说了布局是刻跟理想是刻的关系是不是?咱没说啊,咱们看看吧,好,正好回顾一下这个视口啊,来看看布局是口出现,本质上与设备没有太大的关系。它只规定出现在事故中元素的排列。规则,它完全是移动到六览器的一个属性啊,听这种东西对面上面的东西是不是听着极极其的抽象,就一句话,布局是狗,跟设备没关系,布局是走谁的东西。
01:05
浏览器是口是口都是浏览器的对吧?哎,再来看好在物理像素与现1:1的情况之下,我们可以认为布局是可要比设备大得多。就是我们那张图吗?有没有理解我们这张图的出现是有前提的吧,是不是啊,我们说什么CS像素,物理像素,设备独立像素1:1吧,才会出现这张图吧,不然是永远都不会出现这样子的,你们讲OK,好,那么再来看还有什么?好视觉时刻决定用户能看到什么,它与设备之间的关系是比较紧密的,因为网页最终是要靠物理像素来显示的。这个怎么来讲,视觉是否决定用户能看到什么,还有一个视觉是狗决定了物理像素跟CS像素的一个比例嘛,所以它是跟设备之间的关系是比较密切的。
02:00
可是它是谁的东西?浏览器视口吗?OK,好,再看好呃,从视觉视口是可以看到整个设备的宽度的。这个怎么理解是吧,其实这句话稍微有点问题啊,他说从视觉水果是可以看到整个设备的宽度的,其实就是一句话,从视觉水果的话,应该要包住视觉时候要包住整个布局什。这里面讲OK,那也就是是不是整个分辨率都应该是在我失去出口的内部的。就是你这个视觉是否包含的物理像素永远是你分辨率的值吗?是不是这道理啊,那也就是说视觉适合是可以看到整个设备的宽度吗?分辨率了吗?那么讲也是从物理像素的角度来说的话,视觉是口的尺寸没有定下来。有是不是是不是就是你的分辨率,从CSS像素的角度的话,整个是有没有。
03:01
固定下来,从CSS角度出发,整个视觉是否有没有定下来,没有跟什么有关系,用户的缩放操作是不是OK,完美好。好,从物理像素角角度出发,视觉时刻包含物理像素的个数永远等于设备的。分辨率。为什么?因为屏幕中的所有的内容你都是可以看到的。这个能不能理解什么,那我再再来看这这这个学分。哦,厉害了,好好,从CSS角度出发,我们无法准确的判断视狗的尺寸,视觉是狗的尺寸,因为视觉是狗包含了CSS的个数,跟用户的说谎行为有关。默认情况之下,在物理像素与CS像素1:1的情况之下,我们可以说一个视觉是口,包含了该设备分辨率的值所代表的三三小数的各种。啊,就一个点不能让物理像素C31:1的情况之下,那视觉是否包含了C个数,是不是就是你分辨率所代表的值,因为你们1:1嘛。
04:07
是吧,实质上视觉是够,包含了整个布局是够。是不是这个反正是干嘛,实质上我们默认情况下,这个视觉是不是肯定要包含这个布局数的嘛,这没有任何问题嘛,是吧,好再来看。好,我们之前提到过,移动到浏览器在初始化的时候,视觉适格是需要将整个布局是个完整显示出来的,所以移动端浏览器在初始化的时候,物理像素与这三之间的比例不可能是1:1。这句话能不能讲?默认情况之下,物理加速跟C加速可能是1:1吗?可能吗?不可能。是不是为什么,除非什么。除非你的布局是否跟你的物理分辨率一样。现在我们的布局是度是不是980,除非你这款设备的物理。像素,也就是说设备的分辨率也是980,那确实是1:1的,只要不是980,不可能一比。
05:07
是不是啊,可是PC端屏幕基本上都是1:1的。这怎么讲?是不是这个道理啊,好的啊。好,那这个比例本质上跟视觉是否有关,因为移动端浏览器初始方式,视觉是否包含的CS2像素个数等于布局是否包含的二像素个数,视觉是否包含的物理像素的个数等于设备的分辨率,那他们俩一比,那比例不就出来了?而且都是在我的视觉是构里面。那CSS像素跟物理像素之间的比例是不是就出来了?是不是默认情况的,这个比例跟像素比有关系吗?CS像素跟物理像素默认情况下这个比例跟像素比有关系吗?没有跟谁有关系。跟谁有关系啊,这个比例跟谁有关系?视觉是口。
06:01
跟视觉是狗包含的三三的个数,以及跟视觉是狗包含的物体下的个数有关系。第来导区就是这么几个逻辑。是不是啊,可是逻辑与逻辑之间的交叉很多,懂吧,好,那再来看,好好,那这四现在我们讲了三个项啊,四个项数三是多是吧?那有十口,我们就得获取十口的值,因为我们要用它的,那如何获取三个十口的?宽度,PC端只有一个口。平行水口的宽度怎么获取?document.document element点是不是OK,移动三个。第一个叫什么?布局是孔document点多的点。第二个什么是孔?视觉是孔window点。In,第三个理想思考,OK,我们可以稍微的来给大家说一下为什么是这样的,首先我们来看一下。
07:05
好可的Y代表的是什么?看看规范,可能外是代表可视的是吧?可是我们说了,可能在外是为是否来设计。是吧,我们可以简要的看一下这个图片的外省。OK,看他规范上面怎么说的。好干嘛,不包括垂直滚动条边框和外边距。是不是想想不包括垂直滚动条,我问你滚动条出现滚动条了,比如说现在我有滚动条。滚动轿车区域还能布局吗?不能布局了,它还叫布局是口吗?啊,不到时刻。对,去除滚动条的一个宽度吧,所以说基本上我们这document.document element点拿的就是。
08:02
布局视口的尺寸,可是PC端没有三个视口,PC端只有。一个时候在移动端这个可跟标签上的可外,就是拿布局是否。这能不能讲OK,那还有一个值是什么?好,这里。好,阴Y是什么Y?看一下。阴囊外阴内外是算什么呢?是包括。垂直滚动条的,想想垂直滚动条你能不能看到它,看到它算不算,算不算视觉视觉的东西是吧,所以这个一呢,外在移动端就是拿代表着视觉时刻,OK,最后一个什么。Screen once。
09:01
屏幕的宽度。它的Y好,这个Y代表什么,看一下。返回屏幕的宽度啊,PC端返回分辨率。PC端返回分辨率,移动端返回到理想时刻。逆向思考能不理解,OK,而且有一个问题,OK,这两个兼容性是有问题的,好布局是构尺寸在移动端基本都没问题啊,这个值就是它的布局是构的尺寸,Window点应外接近全部支持。啊,Screen外一半代表理想时候,一半代表设备的面率,有很大的接入性问题啊,我说的是在移动端,移动端首先第一个值代表布局,是否基本上所有的设备都没有交线问题,第二个值代表视觉,是否有线浏览器是有问题的。
10:00
OK screen代表理想速度,一般的对压器是有问题的。因为screen外,在移动端,一半的浏览器认为它是逆向是的宽度,一半的浏览器认为它是分辨率。懂吗?所以基本上这两个API。不会用,我们只会用第一个API。这个能不能理解,OK,好,切记怎么获取三个视口的宽度啊,然后我只要你们记怎么获取布局视口的宽度,多可的点do可的点可能它关系。
我来说两句