00:00
OK,这边我们翻篇,OK这里面说的东西我们已经讲完了,好这里面最重要的OK,四个像素,三个四口啊,其实总共是四个像素,三个视口,两个操作,一个比例。啊,四个像素三个视口,你们应该懂了,两个操作放大缩小一个比例。酵素饼。啊,记住清楚啊,四个视口三个像啊四个四个什么四个像素,三个视口,两个操作一个比例啊记住它们OK,好,那我们进入下一个阶段,好下一个阶段我们说什么。说法就说那两个操作放大跟。缩小。OK,好说这放大缩小是不一个分用户一个分。系统好,首先我得问大家一句话。好,嗯,我找到了paper。嗯。嗯,想想我把这两个贴过来吧,可能需要谁。
01:06
CTRL,我们回来测试它,OK。好,0304。好,首先我在说法,这边我们来写,我们来写一段话吧,好,我问大家缩放,比如说放大操作。放大操作,OK,放大操作放大的是什么。放到CSS,像苏打。不可能放它大小。我放大,我看到东西越来越大,那是每一个CS线路的吗。放大三像像像的面积啊,OK,每一个CSS像素的面积变大是不是OK,好放大,那我这么说,哎,一个CSS像素的面积。
02:02
变大,是不是区域内CSS像素的个数变小?啊,变少,视觉视口的尺寸变少。变小变小一样啊,变小。是不是的,我们说放到这什么,一个CS相对的面积变大,区域内CS相数的个数变短嘛,视觉四度的尺寸变小,这个区域内其实就是什么。视觉是狗。是不是缩小做大。正好反过来缩小操作,说明你一个CSS像素的面积变。小,然后呢,视觉视口内C像素的个数变多,视觉视口的尺寸大。
03:05
这两个数数能不能理解呢?OK,这里,那我们来看。好。这应该懂吧,好,还得给大家说。说什么呢?好,说一个很重要的点,在PC端用户缩放影响视口的大小,这没有问题吧,你说放的话肯定是啊,我说影响四口的尺寸更好。是不是好在移动端用户缩放也要影响石头的尺寸吧,那一个尺寸。我是不是到现在只讲说放会影响视觉是否的磁场?在移动端,我有说过用户的说法会影响布局时刻的尺寸吗?我从来没有说过。是不是想想,一旦布局视图的尺寸随着你的缩放改变了?
04:07
是不是会必定会处罚中国重犯?布局适合的尺寸一旦变了,我说话,如果你布局适合的变小了,有可能有元掉下来是吧,我如果说放啊布局是的变大了,有可能有些元要上去了。如果在移动端缩放影响了布局,适格的尺寸肯定会触发多次重汇总态,一旦触发多次重合动态就耗电耗流量,移动端受不起,怎么折腾?PC端可以随便你怎么玩,反正我插着电源干嘛走着网线是不是啊说基于性能的考虑,在移动端缩放是不会影响到布局适可的,我们可以测试一下,OK,大家看这是我的一个DEMO。
05:02
两个div超级简单,一个往右一个往左,一个往右一个往左是吧,走你。我打开了CTRLC去开另外一个浏览器啊。大幕还是这个,完蛋,忘了这个。好,看完B是不是进来了?好看着我说放说放说放,有没有交到一块。有胶带一块去吧,说明布局是不的,尺寸有没有变。如果布局是口的尺寸没变,它俩之间肯定一直是有空隙的,不可能交到一块去的,是不是啊好,那我们去移动端看看。移动端双方的时候,他们俩之间是不可能交到关系。这样的话代表布局是没有变。能不能理解我的意思啊,是不是你布局这个没有变的话,是不是他们俩之间永远都是有空隙的,好来看一下怎么去移动端测吗?是不是好给大家一个站点叫做草料二维码。
06:02
就是把你的站点成维。草料二维码是不是这里大家看现在是不是这个概念,CTRLC,我贴到草料二维码里面去CTRLV吧,OK,现在我要通过手机访问我的PC吧,是不是?OK,通过手机访问PC大小。这个IP不。我手机访问电脑吗?你得把电脑的IP告诉我吧,啊,我电脑IP多少?四零吧,我看看一下。四零是不是CTRLC填一下。好,我把这个IP换掉。CTRLB是不是,然后它生成二维码。
07:00
二维码呢?网速不好是不是?我让他去生成二维码,待会儿啊,我拿手机扫这个二维码是不是就可以了。手机扫这二维码,不就是访问这个IP地址,这个IP就是我的电脑是不是?可是有一件事情,你的手机跟你的电脑必须在同一个网站。怎么让你的手机跟电脑在同一个网站,下一个360WIFI,把你的手机连上这个360WIFI啊,你的手机跟电脑就在同一个网站里面啊,懂不懂啊,不要下其他奇奇怪怪的WiFi啊,不要用什么不能用4G,你用4G怎么办?你这4G是公用网络啊,你要在同一个局域网内啊。啊,所以说你扫这个网站就可以了。懂吗?就是拿你的手机去连上你电脑自己的WiFi。懂吗?OK,好,这个时候我先扫一扫。好嘞。嗯,我看。
08:00
好,我先扫扫,待会儿我教你们怎么扫。好,稍微等一下啊,我再打开我的手机,手机机卡该换了。你你们不要我的,不要我WiFi,你连我WiFi我待会卡了呀。好,我先把屏幕拨给大家。好,那这个播屏幕这个事情的话,就不要你们操作了,这是我这是我要干的事情。好。好,我有个苹果助手吧,找到工具箱,工具箱里面有一个实时桌面。实时桌面好电视。嗯,解锁。是。我解锁了。好的。
09:02
应该可以了。OK,慢点,这什么鬼,嗯。我输密码,你们能看见吗?我这我说好OK啊,大概你可以下一个二维码条码啊,点开这个二维码条码打看,你就可以去扫这些二维码。是不是OK,然后干嘛打开刚刚那个什么。地址吧,然后你干嘛地址上面干嘛,扫一遍就可以了,大家看是不就出来了,是我们刚刚写的那个代码,来看下是不是现在我进行说吧,啊,你们看屏幕就行了,你看我缩小缩小你看。布局是个没变,绝对没变,是是你看我在放大放大。
10:07
放大放大变吗?你说布局是个他没变。没变,肯定没变。缩小的时候应该是最好看的。你看我说小,只不过是我看到的东西越多了。是不是整个布局是个我都看到了白颜色的,就是你整个布局思考。旁边出来那个留白,跟布局这个没关系的。现在我这种状态底下问你是不是视觉是狗里面包含的C的像素要比你布局是狗来的多。是的,我放开手,这个情况讲的话,应该是视觉之后正好包住布局之高,现在我缩小缩小缩小。缩小操作嘛,是一个C变小嘛。整个视觉视口里面包含的C像变数个变什么个数变什么,变多吗?是不是整个CS,整个视觉视口里面什么csi像素个数变多。
11:02
是不是,那你是不是要看到的东西要比布局是个要多啊,那布局是个两倍是不是就出来了600。而且一件很重要的事情,布局是个压根没有没变,懂不懂啊?比如说我们再来看看一个更直观的DEMO。好,来看一下我是不是有文字,OK,走,你默认情况下在P他文字是不是这样排的,你看我慢慢缩小缩到啊,我慢放大问你慢慢放大。整个视口啊,因为在片段只有这一个视口嘛,慢慢放大一个CS的像素变大。是变大还是变小?变小适合尺寸变小吗?OK,那是不是我放到到一定程度的时候,这个文字肯定会换行,只你看有没有换好去规划好,OK,看移动端的。绝对不会坏,来看一下。
12:01
192.168.17.40是吧,重新再。这是什么鬼?拿到网址里面也行。生成。二维码是不是重新再来扫一遍?好大看是不是像这么排的,是不是只有两只有什么两排的是不是,你看我放大。我再放大,你看不到好几排,永远是两排,说明布局是个尺寸,有没有变,肯定没变是不是啊,还有同学不信那怎么办?把布局是图的尺寸打出来就行。怎么拿布局是不是算。多多点可能嘛,OK,我把他打出来就看看这个东西没变。
13:03
左脸好。怎么办?我再来写个吧,CTRLCCTRL05。OK,你好,比如说干嘛,我说我这边有一个D吧。是吧,OK,这个test我搞大一点。我是。两百两百背景颜色是吧,让他稍微的。含高给个200是不是等于。Center是吧,OK,让他稍微有点马上边给个100PX啊,下面左边给个100PX,右边给你好来看一下好。
14:02
啊,点点点点点吧。我现在是一个放大状态吧,重置是不是100上右下左。九里是吧,好看,我来写在这里,我说点上去的时候。云州点公路。等于好,我说什么你这个。一个test等于的点select,找到这个。点是不是OK,好,你这个test。
15:01
因为移动端没有控制台啊,它等于。什么document document element点。好这里好来看一下,好这个指位好,我上来刷一下一点,哎,为什么还没点,没点就有了。没有事件是test.o等于发之后你看一下,算一下1.1366,好我放大,好我再点上去,这个值变大变小。变那里笑变小。是变小了,我再放大。继续变小,我缩小。这个值会,这个值会很大,说明整个事故的尺寸在变了,看移动吧。
16:18
再建一个,比比谁更贱?好,来,我再扫一扫。啊,以后我们有的算。啊,因为台做完一个功能扫一次。好,那以后下课你就不要玩手机了啊。来看一下。好来,现在我点一下这个值应该是多少。我点一下这个应该。点一下布局是格的宽度多少,980吗?是不是测一下看真机上面是不是九八。点。
17:01
啊,我放大我不点这个是就是就是这个现在这个状态。现在我就放大了,照理来讲你放大之后的话,如果影响变小的吧,点我。你看变了没有?这个周期一直在变,一直都是980。这个能不能理解啊啊屏幕都点坏了,你看啊就是980能理解吗?好,切记移动端浏览器缩放的时候布局是不是尺寸。不变好,这放大缩小PC跟移动是有区别的。而且这个区别很重要,能不能理解它跟性能有关系,好嘞。好,那我关掉。
我来说两句