00:00
我们来看一下啊,我们把昨天讲的东西我们过一下啊,OK。昨天我们讲些啥,适配是不是OK,我们说这块我们做适配的时候,我们讲了几个适配吧。I是还有呢,不的十倍,还有呢,百分比十倍。是不是还讲了一种移动端的布局方案是吧,叫流体叫固定是不是,那这个流体一般我们也叫弹性布局,能不能理解弹性布局嘛,你这个流体不就是一个弹性布局吗。所以说在移动端经常你们会看到X。啊,这就是我们说的最后一种布局方案啊,流体加固定啊,一般外面就要弹性布局。
01:04
啊,能不能理解,也就是说最最外面的容器基本上都是使用弹性布局来写吗?里面的元素干嘛指定X值吗?能理解吗?这是不是适配?这个是不是适配啊,这个不是适配啊,这只是一种布局方案,OK,好,那我们来说百分比适配就就不讲了,是不是,这个百分比是主要是干嘛,主要是知道百分比干嘛参照于谁是不是,那这边还是比较麻烦的,因为餐桌的东西不一样嘛,所以说对API要特别特别熟。能不能理解啊,OK,好,那再来说这个I跟U识别II识别的话,最最重要的是什么,I单位是不是I代表什么。跟标签的size。
02:00
所代表的是是吧,OK,那我们说一般我们怎么实现时代几步四步是不是OK,我们说一般我们是第一步干嘛,第一步是。创建调标签是吧,OK,然后我们说最后一步,第第四步将什么将是这标签干嘛添加到什么还中。是吧,OK,第二第三步干嘛。第三步干嘛?将跟标签的干嘛,跟标签的放字为多。
03:06
置为布局视口的宽,干嘛比上一个值是吧?这个值你们可以随意去取。能不能讲OK,好,这是二亚十倍好,60倍,总共几步几步。呃,也是四行。是不是啊,可是V步的适配的思路的话,其实不止是步吧。呃,想想我们的识别的思路是什么?一句话叫什么将所有所有设备的什么。所有设备是什么?款对什么款。
04:01
将所有所有设备的什么宽置为设计图的宽度?布局视口是不是你要去做布局的嘛,是不是将所有设备的布局视口的宽置为。这为什么设计图的宽度?是不是OK,那我们怎么怎么实现呢?第一步干嘛,第一步干嘛定义什么,定义设计图的宽度是吧,第二步呢,确定缩放比例,而且是系统。说比例是不是第三步呢?
05:03
干嘛一定是选中没的标签。是不是OK,选中什么应该说的标签,选中没标签码是不是改变改变其content值,有们讲那这个值的话,这个值的改变跟我们这个比例是有关系的。能不理解啊,好,那再来说一下它们的原理,OK,好。按压识别的原理。改变了什么?改变一个元素在不同设备上的什么?CSS像素的个数。是不是这是它的一个原理,是不是这是它的一个步骤。
06:03
好步骤OK,那我们再来说的原理呢。我们是不是动了说法?我们改变了什么?改变什么?对,是改变了三三项的面积是吧,是不是改变什么,改变了一个CSS像素。什么?就改变了一个元素嘛,我们是吧,改变了,改变一个元素在什么。不同设备上。改变一个元素在不同设备上什么?其实最终我们说第一个你改变一个元素,在不同视频上现上相入个数。是不是最终就是让你的所占据的物理参数个数更多?
07:01
他呢?是不是改变的也是一个元素,在不同设备上所占据的物理像素个数啊,其实它改变的是一个CSS元素啊,一个CSS像素干嘛?改变一个CS的像素所。其实一个三像素跟什么物理像素的比例,是不是因为你改的是。缩放吗?每个设备干嘛?缩放比例不一样的吗?那不就是每一个设备干嘛。一个CS像素跟物像素的比例不就不一样了?是不是啊,OK。不同设备啊,改变不同设备上一个实在像素跟物理像素的一个比例,这能不理解?能不能理解,OK,好,那这是我们说的一个原理,那优缺点。优缺点,OK,我们说识别可以干嘛?优优点是什么?
08:08
可以使用完美时刻是吧,缺点呢,PX到R的转换啊,特别麻烦,是不是OK那。约会的优缺点呢?所量即所得,是不是OK,所量即所得?好,缺点呢?破坏了,我还没吃过。OK,好,那这是我们说的什么啊,几个视频方案吧,那讲完视频方案之后,我们又做了什么?一物理像素的实现几个方案两个方案第一个方案是从适配方案的角度出发。
09:05
是不是第一种方法,怎么做的?干嘛?首先我们说什么主体的适配,使用什么主体的适配,使用I适配,是不是主体适配?采用IOK,那以下是怎么办?通过缩放嘛,是吧,那其实我们说这边主体是被采用I时,我们有没有进行放大。干嘛放大,放大多少倍?有没有放大?是缩小还是放大?我们是不是我们想在做的时候把那个把那个只是不去以了啊。
10:03
是不是把那个W乘以DPI的话,是不是我每一个方程下一个嘛,跟标签的方程S的话,是不是已经变成变成两倍了。是不,那我是不是主主体是用采采用RK并且干嘛并放大什么R的机制吧。是不是是不是放大了二压的机值,本来一个按本来一个按压不是占据多少占据啊占据我是布局是口宽度除以16吗?现在不是拿布局是口宽度乘以DP啊哥们除以16了吗?那是不是二燕的机子被翻到多少倍啊?倍吗?是不是一旦问你这个阿燕机子被放放大了,放大成了那个DPR倍的话,大家想想。我问你啊,那现在是不是每一个元素都被放大了?
11:03
是不是每个元素都被放大了?你看我一个R样的基值,原来原来一个元素啊,原来一个元素在12样的。或者说12乘以12页的。是不是,那么你那这个元素。现在被放大成原来的多少倍?是不是DPR平方倍。很很纵向上吗?那我再给你干嘛,缩小DP。低票不就行了吗?能不理讲是不,我们是第一步是不是在阿亚是不上面做了做了个手脚,我们是不是放大了阿样的机子啊,放大成来的D啊,那一个元素的话,是不是就放大成了原来平方表。我说这个放大低是不是一个方向上的。现在现在我们说放到这个基值啊,那是不是一个方向上面去放,放到了底下不要。
12:05
那两个方向不是DPR平方倍吗?是不是啊,那我之后再通过什么。再通过什么,再通过系统说话干嘛。说回是说回,你不就行了吗?说回地呗。那不就是个嘛,应该应该等于多少等于多少。是不是这样的话,不就是正好抵消掉吗?可是抵消掉的是不是所有以R为。单位的那些。尺寸啊,PX呢?PX被缩小成原来的DPR吗?
13:00
是不是,那这样的话咱们干嘛,只要你在页面上写什么。1PX,那就是一物的小数嘛。是不是可用这种方案,我们说第一个它的优点是什么?优点什么?一劳永逸是不是缺点呢?所有的PX都被缩放以后,你就不能再用PX,只能用I,除非你写PX的时候故意写成原来的。两倍。懂吗?OK啊,知道,那这是我们一种我想实现的方式,懂吗?其实还是基于什么I加什么系统缩放是吧?OK,后来我们又讲了一个什么。通过什么响应式,是不是响应,是叫什么变化说。是不是好,那这种方案啊,我们昨天怎么写的。你看咱们是不是做这边一五相,咱们看是不是有一个啊,你看那这这条线肯定是一五连处的吧。
14:09
说下嘛是吧,OK,那想想其实我们这种写法的话并不符合规范,为什么?因为咱们是不是把一个D干嘛。不能再重复用了。啊,咱们是把这个div干嘛,就是把一个div是不是做成一个边框,其实我们说一般我们说这种异物理像素的最主要主要的场景的话,就是一个什么一物理像素的边框,基本上是给一个元素去加边框的,能不讲你可以用这种一用这种么,直接写一个div的形式啊,可是我们见到更多的应该是使用古元素的形式。比如我们去缩放伪元素懂不懂,并不是去缩放一个真正的div啊,那这个稍微改改啊,就是以后你们看到这种。写法的话,你们得知道,好,我们稍微给他改改。
15:05
好,比如说现在干嘛,我们再来说这个零一吧,杠一五像素。比如说干嘛,我现在有个div吧,我想我想这个div有个一物理相同的边框,应该怎么办?Div有一个什么一物理上的边框啊,你不可能在这个里面是吧,去写个D吧,让让这个div做一个边框吧,很少这么做吧。是不是OK,那怎么办?通过什么元素的形式?想想怎么做。我一般我们不用阿,为什么不用阿福,一般阿福的会被轻浮动给占用掉。啊,我们说一个元素有几个元素啊。
16:02
啊,只有两个懂吗?所以一般我们会拿他的before元素去做边框。啊,看一下这个泰坦太。也是200PS嘛,是不是OK好,那比如说现在想要看有个边框怎么办?来看一下。好,这里是在哪?好,现在想想它有个边框,应该怎么做?好,这个我去贴条。Michelle。好,我想有个边框怎么做?什么before OK,来什么?Con。
17:00
K。然后呢?Display。然后呢?这个委员说,我让他做边框吧。那怎么办?加高度啊,一片色给内景啊,是不是黑色,这不跟我们一样的吗?只不过之前我们拿的是个什么P嘛,现在拿个什么尾元数嘛,只过你这个边框是不是应该是的边框,所以一般他得定位个嘛。这行为拜拜OK脖,比如说下我做下边框脖为是吧。其实博腾最好稍微。
18:00
走一走,往外面。自家里面的框。懂吗?OK,来看一下这个时候有没有一个变化。说一下有没有?来看。它的皮元素是不是在下面是不是看不到了,没有宽度啊,因为它定位定起来了嘛,那怎么办?YY百分百看一下。是不是有个变化了,然后干嘛想让它变成一物像素怎么办?收放啊,这个时候缩放的话,大家想想应该怎么收放。怎么说吧?At,什么made,是不是这里面写什么?低票杠杠第。
19:00
诶,好像没有,诶看一下有没有DD是什么。D device-picture没有啊,好找找device picture什么rat是吧?这里一定要加什么we k啊,前缀OK,好,你下数比为二的时候,我们应该干嘛?干嘛是不是还得选中它是不是,因为我们这里面写的是规则嘛,干嘛选择是不是,然后呢,四根记住是Y吧,点五,因为你的相数比为二嘛,是吧,OK,那底下项数比为三。三的时候,那就是点三加三是不是OK,这里好来看一下,那其实这个变化也会变得比较细。能不能讲OK好,这个偏移的话。
20:01
想想。偏移的话直接给你吧。肯定会稍微往上提一点是吧,你给你如果给负一的话,其实这个干嘛。这个边框是在哪的,这个边框是在这个元素外面的吧,因为我们只说放在它的。你这个高那也行。高也说咱们是不是说的高。是不是想想波的话会不会说吧,不会吧,因为我们说完这个。元素的嘛,那拼音量是不会被缩放的吧,怎不讲啊,所以说我们最好给零片子啊,这个时候这个边框是不是在元素的内部啊,相当于是个玻璃box吧。OK,好,那这是我们的嘛,这是我们。比较。常见的什么?第一,物理像素的一个实现的形式用什么?物元素的形式啊,昨天我们这个指子是一个什么。
21:01
只是一个DEMO啊,不可能用个div去做边框的啊,除非你干嘛是一条,不是边框是什么是一条。中间线就说是两个内容区域的一个什么分割线,那可能就直接拿到第了,能不能解啊,一般边框都拿什么五元素来写啊,OK好注意一下,好,那这是我们上午讲的东西,是不是好到下午的话,我们是不是就讲什么移动端的事件基础啊,是不是啊,那移动端事件基础这一块。好有哪些点?第一个快是什么?E是不是快拿的是一个什么啊,静态列表。什么叫静态?就是你当时内存当中是一个是一个什么样的状态,他就给你拍一张快照,拍了下来,懂不懂,OK,那快呢?
22:06
静态列表的第一个吗?是啊,OK,这里静态列表第一个,好,这里第二个,我们讲什么三个事件嘛,他切TOC to UC,他切sda。S sta,他是大,还有什么他切木以及他切嗯。和他OK,然后呢张多少?如何去阻止啊?事件的默认行为是不是以及干嘛怎么去阻止事件的冒泡,是吧,阻止事件事件模型一文特点。
23:04
阻止冒泡点stop什么是不是,而且他们俩之间是有。联系的,因为这个到底事件的关行为能不能阻止啊,得看你整个冒泡的过程当中有没有一级事啊阻止的,如果有阻止的那就。阻止,如果没有阻止的那个嘛,那就不阻止是吧,然后呢,我们说这个阻止世界的冒泡可以在什么,在你整个冒泡的过程当中,给你干嘛划一刀。是不是只要到那一刀为止,没有阻止过事件的工人行为,那就不阻止吗?是吧,这一刀上面的管吗。不管有没讲好,这是阻止世界行为跟阻止冒泡的一个什么,一个在移动端,一个使用,而且大家知道是所有的世界模行为都可以阻止么?不是必须你这个E点什么。
24:00
维多有没讲,而且一类事件在不同的社会上面,很有可能这个是不一样的,一个是一个Q嘛,所以具体能不能阻止时间的模型,得看这一款设备它上面浏览器。在这个事件的时候,给他这个康是值还是错,还是或。能理解吗?好,这是一些比较复杂的一个教学问题,懂不懂,OK,然后我们讲了什么?讲什么?这么干嘛。全局阻止我人事这。默认事件啊,我们通过什么document,什么阻止什么document,它是他的是什么事件行就可以了。啊OK,好,那后来讲了一个很重要的什么事件。点头是不是啊好,那这一块的话,感觉大家问题比较多,那我们重新来来什么,写一写,我把这个事件点头这个东西干嘛。
25:09
拷过来CTRLC啊,首先这样我来问大家。啊零二。好。世界节奏这块好,比如现在我是不是有一个癌症啊?呃,好,我先把这个艾干嘛给他亮出来,好,我直接这个艾去把时间好,我给这个艾,大家看我把三个时间。好,克利卡塔斯塔以及塔基。嗯的是吧,好大看这三个事件分别怎么行吗?好,我其他我都不管啊,这个A标求我也不要。好,就这么干干净净。好。这几个事件的执行顺序应该什么样的?
26:08
第二二十二。怎么执行我一点。怎么事情,他们给我。一点是最后执行来看一下啊,是不是克利克好像还是等了一会才执行看着哦,我们看这边啊,看这个他跟他家的是不是立集出来的,肯定个是不是稍微等一会儿。是不是你看是不是他知道他这案子是立马出来的,然后这个K是不是稍微有一点延迟啊,他就等着300毫秒。这个能不能理解啊,OK,那我们说我们时间点都是一个什么样的原理。时间点都是一个什么样的原理?
27:01
PC端的这个时间有300毫秒的延迟的,是不是,那我来问大家,比如说我这样写了,OK,好的家看。现在是不是很容易出现事件,点头的我是不是给了个touch大码?OK,大家看,我们来看一下这个什么。A,标签上的这个克迪克事件到底会不会被触发呢?是不是九点来看一下。好,现在我是不是给底下这个A标签去绑了一个什么K个事讲啊,这个K个事件,你看A标签干嘛被克的时候的话,是不是可的能不讲好来我们说一下,就你看现在我是不是太是吧,我一点你看。我刷一下,看我一点有有没有看到题卡。有没有是吗?是不是折点来,我们再来说,再来说一下折点有没有看到,是不是最终是不是执行的A标签的肯定时间啊才跳过去的,能理解吗?好,可是有一件比较奇怪的事情,因为昨天有同学测试,比如说我他是的找你来看一下,我说一下是不是还是一样的好,可是你如果大下是不是现在我他真的我他知道点上去。
28:20
我长按。我长按的时候,大家看是不是现在干嘛,这个这造成是不会消失掉的,那么你长按的时候,你看有没有触发一般一个事件。或者说我长按的时候,你们觉得会不会触发这个安的定。不会,因为肯定克事件的触发的话,你必须干嘛。得抬起来懂吗?OK,你看现在我抬起来,你发现有触发这个肯定个时间吗。啊,他就没有触发这个P事件啊,或者有同学干嘛直接这么扯呢。他切,知道是吧?走,你来一说。他道了点,上去是个吗?他知道了,可是我能出发世界吗?
29:02
我手指不抬起来。不会吧,你看我点上去啊。是不是现在我一直没有松手,我一直在上面点着,他其他时间有没有触发,有可你发现这克里克事件他干嘛就是不触发能不解,你看就这吗?这个肯定跟C上干嘛,就是没有触发,所以说它不会跳转能理解啊好,可是在PC端不一样。啊,P3干嘛?呃,比如说我把这个制造成干掉display为好,大家看一下。如果我长啊。我抬手。啊,它还是会进行跳转的,在移动端算一下,你长按。你松手他不会跳的啊,因为移动端有个默认选中的事情嘛,懂不懂,所以说这个A标签在移动端长按的时候,他干嘛,你看他是干嘛闪了一下,他有没有真正触发它的一个跳转的行为,没有啊,那有可能是干嘛,因为我们说可立刻事间的触发的话,干嘛必须是同一个像数点上干嘛,你点到这个像数点上,再从这个像数点干嘛。
30:12
离开才叫克里克吗?对,不解,有可能你长按的过程中干嘛,你也不知道你手到底有没有得过。懂不懂,所以说移动的这个橡皮是不是极其的小啊,有可能你点上去跟抬起来不是在同一个啊。像素点上,所以说就没有触发这个什么。肯定克世件能不能解啊,所以在移动端长按这个A标圈的时候,看到吗?就是不会跳转的,你看我轻轻点一下。就可以跳转了。能理解啊,就这个不要挖太深了,能解吗?知道下就行了,OK,好,反正知道事件点透是因为什么产生的。PC事件,K在移动端有300毫米的延迟,我点上去,虽然说这射成没了。这道城门,因为是我,他是上干嘛搞没的嘛,是吧?可是300毫之后,他会在相同的地方干嘛出发?
31:06
一个肯定事件能理解吗?啊,这个注意一下就行好。好,那讲完这个时间点,我们就讲什么。是不OK,然后讲的什么,因为是什么三个三类,什么三类手指列表吧,好,这三类手指列表分别是什么?现洁的他实他对他他其实以他吧,他代表什么触发当前事件的收置列表。是不是还有呢,他给他。触发事件时是吧,屏屏幕上还是元素上的,元素上的是列表啊,它是呢,屏幕上的数字列表对不讲好,后来我们讲了些什么。
32:01
常见问题是吧,常见问题里面有两个钥匙,需要大家去注意。好哪两个呀。是不是他们俩一个是干什么parents还还有什么。在干什么?Web杠,Type杠,Le杠,Color,一个是。按钮高亮一个什么圆角是吧?啊,这是常见我们在移动端清除下的时候要多写的两个东西。理解吗?好,当然还有一个叫什么fo birthday,好,什么叫birthday?就是你发现你这个字体最终的表现跟你设置的时候不一样,而且比你的一开始设置要来的大的时候百分百触发了方舱怎么解决啊,叫max hat能解吗?好,那这是我们昨天讲的一些移动端基础的东西,OK,那今天咱们要翻篇了啊,咱们开始写项目。
我来说两句