00:00
那我们稍微的来回忆回忆回忆啊,回忆我们前天时间的一些功能。好等零四好大想我们在零,我们在这个移移动端的第四天的一个学学习当中,我们做了几样东西。第一个什么头部的一个什么头部的布局跟效果是不是对接时间是吧?OK,然后呢,第二个部分呢,是不是导航是什么导航的布局跟橡皮筋效果是不是也是这样,是不是导,我想问一下对这个橡皮筋效果有没有同学是产生疑问的。或者说你觉得可能是有问题的。你可能觉得哎,我们思路上是对的,可是他们在实现上的话,可能会稍微的有一点点的,呃,可能不是很对称的地方啊,可能我们的思路都没问题,我们说橡皮筋效果,我们的思路是什么样的。
01:00
我们来说一下橡皮筋效果,咱们的思路肯定是没问题的,我们说橡皮筋效果是干嘛?怎么实现商品营销口的,大家想想。对啊,我们说一下思路就行了,我们去干嘛。减少什么?接受什么?减少每次懂么?目的什么,有效距离。是不是这个肯定是没问题的是吧,每次有效距离减小了,可是它最终的什么,最终的什么移动距离是不会变的嘛,最终的移动距离还是一直在一直在增长,是不是OK,那这是咱们一个一个什么思路吧,那咱们咱咱们是把这个思路翻译成代码。
02:03
在翻译成这个代码的过程中,有没有同学觉得哎,是有问题的?OK,那那我们先把这个思路放正,待我们来再来看啊,好好,那首先咱们看头部布局跟效果这一块需要我们注意什么。第一个我们已经使用上less了,是不是在less什么怎么去干嘛,怎么使用less来弥补什么?弥补I是什么缺点?我们说I是不它什么缺点,是不是从PX到I的计算机其复杂,那咱们是怎么用less来弥补这个缺点了?咱们定义了一个变量,是不是咱们定义个变量叫什么,定义了一个变量好,定义了一个变量叫什么at啊呀,这个变量的意义在于,这个变量意义在于什么。
03:11
这个re,它的实际意义是什么?想想。这个它的实际意义是什么?代表什么?代表。因包含多少未托像顺。是不是E包含多少个纬度呢?能理解,那至于这个元素最重要。尺寸变成多少多少R是不是你设计上去量到多少,除以这个就可以了。能不理讲OK好,这是我们讲的第一点,怎么使用在弥权是吧,OK好然后呢,好然后我们说是不是咱们画那个头部的话,是咱们的一个正常的一个画法,基本上没有什么太多需要注意的地方啊,就是在表单那一块啊,表达那一块几个样式需要注意一下,一个是什么,高亮怎么处理,单高亮吧,表单高亮怎么处理奥特了,奥特为那是不还有呢?内衣是不是表达有内衣表达内衣怎么做表达内衣么住的。
04:51
表单是不是有个内衣啊,是不是加过了就可不,那这样的话,表单的内衣是不就没了。
05:03
那不这样OK,好,那一般这两条也是我们从这项里面经常看到的。OK,好,那大家想想你在做这个头部的时候的话,还遇到了什么问题。给一物理像素的实线是不是好,我们说一物理像素的实线,这一次咱们写这个一物像素实间的话是干嘛?Less混合版是不是咱们是把这个业抽到这个什么less啊混合当中去了,是不是OK,这也是我们以后写工程化项目的话,经常会使用的一个东西,懂不懂好,那这边啊,我得问一问啊,这个混合跟这个基层它有什么区别?混合跟基层它有什么区别?大想想。
06:02
马子,混合跟基层有什么区别?嗯。混合可混合可啊,不带可不带对继承不能带传送是不是对,这是他们语法上的区别。使用的区别是,呃,灵活性,但是。对,混合的灵活性要比基层高,这能不理解为什么说混合的灵活性要比基层高。就是。直接带,直接带到那个。有,你可带到那。
07:01
啊,就是我在哪边定义的混合,我随便在哪边都可以用的是不是,而且我还可以传参数,灵活性肯定很高嘛,可是混合我们说你可你可混合下一个定义。是一个应该是一个什么样的零。对。就是我混合里面放的是什么。公共公共样式,那么我们说我们说混合是将一个规则几个吗。一个规则集干嘛?你你要你要你想到我国就要想到就自己家密码。是不是是不是将一个规则给引入到另外一个规则集里面,那继承呢。系统是。继承相比其混混合来说的话,它不灵活,那确实是,那继承它最终的一个效果是什么样呢。
08:05
它是组合的,它是它是组合的,说它是将继层里面,继层是不是里面也是一些公共钥匙啊,那这些公共样式是CTRLCCTRLB到你的业务逻辑里面去是吧。不是他帮你做的是一个什么。时间比较大的时候。是不是将选择题填到了一块,记不记得?OK,这样好,我们来看看,好,我记得我跟大家讲过吧,应该啊这个啊,我们来看看吧,啊,那这里面我们得来。所以说呢啊,OK,我们说这把混合跟基层的一个区别嘛,啊这也是昨天我在啊九月分班上课的时候啊,我提的一个问题啊,可是我觉得好像大家都啊都理解不是很深啊OK,我们说你混合,你怎么确定一个混合?是不把点啊,是不是我们说叫点那都可以吧,我第一个混合那里面是不是有一套规则啊。
09:07
是不是你可以说这里面全是么,一套一套是明码在赖里面,他们就是什么规则嘛,是不是这是我们说你可以抽抽象到什么混合里面去吧,最终调用的时候是在业务代码里面去调用啊是吧,你是不是直接干嘛点有意思,比如说干嘛在一个选择叫做。在这个里面是去干嘛,调用一次,那是不是将这个规则及整个干嘛。搬过来,相当于是把这个规则LC过来,这是不是我们的混合,每次这么做的时候的话,都是在CLCL吗?规则基吧,会不会使你的如果这个混合的调位置特别多的话,会不会使你整个生问题特别大。重复代码特重复的代码特别多,比如说干嘛我在另外一个他子里面干嘛,我再来掉一次,那是不是还是同样的规则集啊,是不是我说说干嘛在另外一个开始里面干嘛,我再来一次,是不是还是同样的规则集啊,相同的代码你是一直在平均掉对吧。
10:15
我们说最好的时间应该怎么做怎么做,我说最号是test,逗号是不是选选择性组合是吧,逗号看它。二就好了。太。是不是,然后你这里面写什么规则集,是不是,你想实现这种就得用什么继承了,继承的语法怎么样的,一般我们说你要写个继承应该怎么做。咋写啊,混合怎么定义啊,是不是还是点的这定。能加括号吗?不加括号。是吧,那就不叫什格叫什么一称的吧,是不是一个继承啊,这个名字你随意取吗?怎么用啊,在这边告诉他们去干嘛,EXT吧,Extend对吧,是不是一个函数啊,然后呢,把这个记成。
11:18
继承这class的嘛,拿下来这个规则是不是也进来了,而且这个规则进来是把你这个群,你你如果是这样调用的话,就把这个什么,如果你是准备了这什么,比如说你是。这写的左脸OK?干掉干掉。干掉,OK,你是不是这样写的?最终你生成出来东西应该怎么样?CTRL一个嘛,Test,然后呢TEST1,然后呢TEST2走你这底下什么规则型。
12:00
是不是的,我们说这样一写的话,你用继成的话,是不是会使你这个CS的文件变得小,所以说我们才说它的性能会稍微的高一点嘛,可是这样写的话,你对这个规则集的抽象的程度是不是要更高啊,那就不灵活嘛,是吧,我们在这边写混合的时候,这个规则集的话,你随意怎么写吧。我就可逼过来嘛,懂不懂这是混合跟基层的一个区别啊,一定搞搞清楚好不好啊,那这个东西啊,我因为我们以后你会去公司,你会发现你看代码,看别人的代码,或者说看库的代码的时候的话,都是混合格进程。啊,所以这两个东西的用处啊,自己心里得有点。啊对,有点数啊,OK啊,那我们再来看好,这是符合个进程啊,那这个以后我还会问啊,自己好好的去体会一下,好,那再来看好,那基本上头部布局这一块没有什么要说的了,是不是啊,那在头部的GS实现这一块呢?我们要需要大家注意一个很重要的点,什么点。
13:03
每次在什么,一个是移动到什么。移动端骨架的一个搭建嘛,是吧,移动端骨架搭建这一块我问你。是每次都要写多科梦的点爱的英文特的呢,它是它这个全局默认事件的一个禁止吗?不是,我说过了,一定要分项目。小项目,如果你想用很多浏览器内置东西在干嘛,你就不能写。懂不懂,不是说每每次搭这个什么,搭这个骨架的时候,你非得把那一套骨架给他搭全的吗?不是这样的,懂吗?得分项目走吧,可是必须要写的是什么没表写是不视频方也不一定是不是,你挑一个视频方式不就可以了,所以这个没台标签是啊。必选的,然后呢。挑选一个识别方案,好,那讲讲到这一块,我问你咱们是不是学过三种识别方案。
14:07
百分比呀是吧,问你我能不能直接写偏。在移动端。我们是不是挑选一个视频方案,我说视频方咱们确实讲过三种百分比是吧?阿是范班长。的失败是不是?可是你要知道移动端还有另外一种布局形式啊,我是不是还讲过一种干嘛布局形式啊?我们说是一个什么样的布局形式。支流铁加固定啊,这种行不行啊行的呀。我们说你写epx e CSS小数,在不同的设备上面,他所占据的实际的尺寸一不一样。
15:03
你们不要吓我,1CSS像素在你整个面的标签什么跟你写完的情况之下,他所占据的实际尺寸一不一样,不同设备上都一模一样的吧?那么讲,那么你这种布局方案,如果说我固定布局尺寸,我帮你我帮你定死啊275。设计图就给你200的。那我问你啊,你这275到不管到什么样的设备上,是不是都是一样长的。能不能理解,那比如说我给你们看一下设计图。还是设计图吧,OK。嗯。好,我们我们就来看下这图。好,大家看这张设计图上面给你们标出来的是不是都是都是PX值啊,我问你,你如果看到这张设计图,你怎么去选一个视频方。
16:07
怎么去选?你说你这种东西的话,你用I适配好吗。不好。用I识别去实现这种东西话,肯定不好,为什么人家这个项设不给你标的好好的全部已经标注出来了,当然你用I识别能不能做,肯定能做是不是,可是这种当中间隙要看这边是不是有大部分留白的,像这种东西只要不是北平占满的,它是有留白可以给我们的,那你完全可以使用,为什么大是呢?你写这个48PX 48PX吧,问你这块区域,你看是标准都是PX啊,问你这块区域。这块区域如果以后你用PX是不是到什么设备上面都是一模一样的。也就是说你不管在什么设备上面,你是不是距离这个右上角的这个,这个距离实际的物理尺寸不是实实际的英寸都是一模一样的,不管什么设备上面,可是问题从这边过去的留白。
17:14
是可扩展屏幕小,留白小一点,屏幕多留白多一点。能不能理解这种事情啊?外部是不是个流体啊,你看这边不就是一个流体吗?它是可它是可伸缩的吧。能不能理解?是不是啊,OK,这来看这边。我问你它是不是个等分布局。想到什么是问你,你能不能外面这个盒子,他就是一个弹性盒子。是吧,不管你设备什么样的,反正我就再给你满屏嘛,只要你里面这三样东西尺寸加起来。
18:03
不超过我的。275度就可以了,他们三肯加起来肯定不超过275,也就是说它们之间的间隙可能会不一样,可是这些字在不同的设备上面应该是一模一样大的。是不是这是不是一种布局方案也是,而且这种这种东西也也蛮多的。能理解吗?啊,当然我没有做适配,我完全的吗?P是吗?啊,这个好好的去理解一下,不要到最后的时候连这种东西都不会懂不懂啊,因为我们最后一个项目就是用P去写五句了。懂吗?只不过咱们现在音乐台这个项目是用按样做做适配的嘛,最后一个项目的话,咱们不做适配的,就是这种流体加固定的一个布局形式,懂不懂,到时去写样式的时候干嘛?因老师这个东西没有做适配,为什么做适配之前咱们说做一做移动东西的时候,不等不都要不等于都要适配吗?不是的吧。
19:02
啊,记住我们还有一种布局形式呢啊,叫固定加。流体啊,这个自己印象深刻一点啊,我应该不止一次去提了,OK,好。好,那这个骨架东西我们就不说了,是不是,那在实现我们整个解压效果的时候啊,需要你们注意一点,干嘛每次冒泡的时候干嘛每次冒泡的时候都记住干吗。主者。世界的默认行为。那没讲,不然的话干嘛?如果你干嘛,如果你在这边干嘛,是全面禁止世界默认行为的,那你就要注意,注意这一点,如果你没有全面禁止,你需要注意吗?不用吧。能不能理解,OK啊,因为你不不去自己干嘛阻止世界关行为的话,他是冒泡干嘛冒不上去的嘛。
20:04
懂不懂,OK,也就这。这几点是不是啊,当然那我们在做这个业务逻辑时,我们说这个点击切换啊,这些东西比较简单吧,OK,只要注意这点就可以了,OK好,那导航的布局上面好,我们得跟谁得跟谁的布局做个对比。导航的布局,我们说导航的布局是不是待会也要去拖拽,那有拖拽你就应该想到什么。滑屏吗?就是什么滑屏区域远滑屏元素的布局,是不是我们说在导航的这个布局里面,我们滑冰区域滑冰元素的布局采用的是什么形式啊。首先我说什么滑冰区域必定是什么。滑冰区域宽度BD。
21:00
再买,再买多少,再买一个时膏是吧?OK,什么花瓶元素干吗?必须被子向干嘛撑开,如果不被子向撑开,写我们的逻辑时候会不会出问题啊?会计算面积X时候就会出问题吗?是能说滑平运是必须被指向啊开OK,好,那我们说这里为我们使用了一个什么样的套路?对吧,华平华平是一个嘛。滑冰区域宽度排满,这没问题吧,滑冰区域宽度啊,白板OK,花瓶元素呢。首先,滑平元素要不要浮动?滑平元素必须浮动,为什么要让滑冰元素必须浮动?就是为了能被自强审判。
22:06
是不然后呢,花干吗?禁止指向换行。是不是指向呢?指向统一干嘛了,Block?好,这是我们导航布局里面什么套路啊。是不是啊,OK。好,我们想想咱们轮播图是怎么做的,沿什么无缝滑屏布局怎么做的。问你无缝滑冰当时能不能用这个布局也应该没问题的,懂懂,只不过当时我们这种无缝滑冰的时候,滑冰区滑冰元素的杜局长是怎么玩的?
23:06
我说滑冰必须再买一个石头。也是,也是一模一样的,是不是OK,我们说滑冰区的宽度为道。百分百是不是因因为滑冰元素必须被自强开吧,咱们咱们咱们是咋玩的?你指向有多少个我滑冰就是百分之。几百是不是我们的Y是为什么指向什么指向个数,指向个数乘以什么本本啊。是不是指向呢,指向是不是百分之啊。20啊,是不是宝贝。纸箱干嘛,同意干嘛?
24:03
一比上指向个数乘以百分百。是不是这样逻辑,可是他们实性是不是同同样的实线啊,那这两种套路记住了。能解吗?因为我们移动端就是化学吗?能不理解啊,OK,好,那最终是不是找握出这个橡效果好来,看这个橡皮性效果好,我们说减减减少每次目的有效距离吧,是吧,你对这个木的定义是什么?这个木是什么?应该是每次每次手指干嘛。移动的G网。是不是我问你,现在我按在一个屏幕上不动,我滑我滑我滑我滑我滑,我这个木代表应该是谁。
25:04
我这个墓应该代表的是谁?我这个木代表的是不是你这里面没意思的什么。他欺母是这他欺负那种回调啊,你那个回调走了几项数,我应该是不是要减少它的有效距离啊,是不是减少他每次有效距离啊,想想咱们现在减少的是谁的有效距离。来看一下嘛,我们在写的时候,咱们介绍的是谁的。谁的小距离这点来看一下,我们是不是在这边去减少它的DX啊DXX是谁啊,那X减去4X啊,十的X是不是我们在看十大求干嘛就已经。负的值啊,这减少的是谁的距离?这点咱们减少的是这这这一次操作的有效距离。
26:02
维度太大了吧,咱们减少的应该是什么?每一次出发,他去木事件那个回调的有效距离吧。能不能理解啊,所以今天这个维度是不是要把缩进来了,你不能叫到他的做去吧,可是效果上面你们看是不是也没问题啊,为什么,因为你干嘛。你只还一次吗?每次所以体验上面的话可能会出问题吧,可是你要是做成这样的话,你你再去体验一下,肯定要比我们现在的好。懂不懂啊,咱们不为什么,咱们就要干嘛做到最好啊,能不讲就是说不能挑DS这里面讲好,那切记啊,这个点我没有做好。是不是啊,能不能理解这个事情好OK。
我来说两句