00:00
我来看一下好对零四。好,那首先打开我们这个完整版。好音乐才能完整版。好,那这就是。咱们啊,接下来四天啊,包括今天我们要去干的一个事情,好呃,今天我们的目标啊,把这一部分内容基本上给它实现啊,不要看这个东西小啊,这个东西里面还是很多坑啊,特别是咱们做项目就不一样,考虑的东西比较多啊,大家看那这个东西可能会比较稍微的难一点,这是一个快速话题嘛,是吧,那首先的话,今天我们把这个橡橡皮效果给他写。啊,这个导航上面的项目经效果他还是蛮重要的啊,我会把这个项目效果写完,也就说今天你们的量的话,就是把这个东西给他。敲完没讲,那我们可以来看一下这个啊,原版的这个音乐台。
01:08
好,F12刷到它的移动端。啊,这个原版的月台的话,它其实已经。改版了啊,大家看这上面这个导航都已经很不一样了啊,就是其实他是一个老板,可是老板交付的话更多新版的话可能会有点突兀,大家看这个就是。好的效果是吧,极其不友好,能不理讲啊,可是这个你看这个轮播上面的话,完全是靠这个什么。靠这个index来给你做提醒了,那这个就很简单了。啊,我们有一个小一点同步的问题了嘛,是吧,而且它不是啊。不是无缝的啊,咱们做的是无缝自动轮播的啊,那可能他这边的话就会比较简单一点了啊,那咱们现在不按他这个老板去做,而且项目有bug很正常。
02:01
看到没有,看到没有,你说做一个项目,你要把所有的bug全部解决掉不可能。那需要后期的迭代干嘛,那是不是你干嘛,你找一个那个外包公司把这个项目做完不就行了吗。是不是啊,为什么要有自己的团队啊,反正你做完一次你就不你就干嘛没有办ug就不会改了吗?是不是啊,你要升第二版的时候,你再去找一个什么外包公司来做一下不就行了吗?那这样做干嘛省钱啊是吧?那整个维整个迭代的过程是循序渐进的啊,所以说你们要知道项目有bug很正常,有没有讲OK,项目上线的时候有bug,那也不正常。啊,你这个业务功能只要不出问题就行了,用户是不会打开。控制台的懂吗?好好看。好,那我们首先来把这个东西去写了吧,好,那写的时候的话,我们首先什么来写一下移动端的一个补假。
03:00
好一好骨架,好,大家回忆回忆,这个骨架应该怎么写?M1T是吧?这是第一步加密的标签是吧?内部等于。有的。好,Name等于will put是不是OK,来个什么content,好等于E等于1.0 use,杠AB Le c c等于no,是不是还有什么边,念什么还什么?是不是少了个一?少了一个I是不是啊,来看一下。
04:05
没线。来看我们之前的。第一天人肯定想是吧?M么U码高,什么是掉等于1.0啊,这个东西你不要看,你在面试时会让你干嘛?手写的懂吗?OK,干嘛没有?什么等于1.0啊,我们可以看到啊,看有拼。那是是OK,这里好罚一倍,好来看一下。好,我们来看看啊,其实大家看在这个C的模拟器环境里面。刷一下诶好像没有给我报任何说法是不是啊,其实本本身在低版本里面的话,这两个是干嘛。
05:08
不支持的,他会给你提醒的,或者的话我把它写错了。稍下你看意思很多他没有被认证过,是会被忽略的,对不是一开始在D版本里面这个东西它就不支持的,本来我们说这个东西的监兼容性就比较高,是有问题的,他们呢,他们是一组啊一组组合权嘛,是不是OK啊,这注意一下好好大等下讲好,那现在好,那这个东西写完了,然后呢,然后怎么办。Window点。O漏的等于方形,咱们说第一步我们是加密的标签吧,是不是好,第二步呢,禁止移动端事件的默认行为,多点什么and listen,在我们他切star的时候来一个function形,Function里面是E是不是OK找你,然后呢,EV等于EV或者E是吧,最终呢,1.prevent是吧,好,这是第二步,第三步呢,选一套适配方案是吧,一般我们是不是写个一啊,前面加逗号啊,加分号是吧,里面来一个方形走你好,大写。
06:34
一个什么t l no等于多点create element创建一个style标签,最终这个标签会到多点head点。No的是吧,然后呢掉no的点是吧呢HT秒要等于一个字符串是是这个字符串去改变X跟标签的方是吧?最终肯定是P值加什么I important怎么讲,这个值怎么去求啊,前面改的是什么方size是吧?好,这个值等于什么?
07:26
等于一个W是吧,你可以在这边数十六都没问题是吧?这都可以吗?把这干嘛拿过来就行了,都的点都可点是吧?你在这边除以16也行,那你这边就好嘛,不要说了嘛,是不是一样的啊,OK,那这个是不是你度骨架就大完了,而且我们知道你写这个玩意的话,相当于一个嘛。静止了系统的滚动条,全面禁止的滚动条是不是,那怎么办?是掉你全面禁止的咚,那我上来优先算一下是吧,零零,然后呢,HT走逗号。
08:14
好,来个什么hat为百分百,Overflow为好,写到这块有没有不懂的?写到这一块,其实你不要看我们写了这么多代码,咱们铺垫做了。两个月。是不是,你看最终我们写这个代码数据应该没有什么疑问。懂不懂,这是移动端的一个骨架,能不能理解啊,OK,好,那写完这个数据之后再来,好,那我们来看一下,咱们要写这个玩意的话,是不视频选完了选的是呗。是不是好大,看这个东西,大家看我们这个,我们先来实现这个头部吧,大概这个头部是不是一个固定定位。
09:02
是不是啊,可是我得问你个问题,固定定位这个东西在移动端少用,为什么?你看固定定位,我们说是参照于时控,在平常,我说平常就一个时刻,移动端三个时控让我固定,你们到底参对于哪个时候。哎,是啊。是不是啊,你视频方案一旦选的不对,这个是是不是不一样的,是不是啊,我们现在这种情况底下的话,是不是干嘛三三个四个合一的布局,是个是就是狗理想是个三合一吗?在同样的位置上吗?这不会出现个问题是不?你要是哪一天是狗不一样了,如果放大缩小的时候,是不是就可能会出问题了。因为你这个东西有可能是到于不均时候,有可能于视觉时。能不能理解啊,那这个时候在移动端尽量不要使用。固定定位能不能理解,OK,那想想啊,当然其实你如果是一个满屏的一个元素。
10:03
那其实使用固定定位的话,如果这个元素比较大,那其实使用固定定的话是不会有太大问题的,不是说我禁止你在一段使用固定定位,不是这样的,特别像这些比较小的面包先导航按钮什么这些东西啊,尽量不要使用固定定位对不对,因为一旦缩放了,因为你东西比较小嘛,那如果他参照于哪个哪个不一样的适格的话,它会立马把这个位置会偏移掉的,当你这个元素比较大的时候的话,其实这个偏移掉什么,这偏的量就比较小了,所以你可能看不出什么大的变化来,能不讲我OK定知道固定资源在于中呢,是可能会有一点问题的。是吧,那你们想想我们能不能使用决定定位,咱们咱们做过没有做过吧,怎么做。怎么使用决定定位呢?模拟物理定位。来,我们再写写是不是一模一样的个P的,我们说使用决定定位来模拟固定定位,想一想几个几个状的点。
11:02
使用固定,不不不使用绝对定位来模拟固定定位,好,那我问你几个点。几个点?说思路吧。一直让你们总结思路,是不是我也没查过?那使用固决定定位来模拟固定定位。想想。首先禁止系统滚动条第一点,第二点。整个应用的滚动条出现在。一个顶层元素上面,因为滑动这个顶层元素的滚动条不会。影响初始方向块的位置。
12:00
我让我一个决定定位的元素就参照于初始方块去定位,而我滑滚动条的时候不会影响处理方块的位置。那就用决定定位模拟了。固定定位。还记不记得啊,那我们应该怎么去写,比如说你得有一个顶层元素,是不是一般给ID,这个顶层一般给ID的写,其他写ID里面那些元素的话,基本上基本上给class就行了。懂不懂啊,因为class这个效率的话可能会稍微高一点啊,OK,那干嘛外Fi找你好,现在是不是有了这个外Fi OK,那比如说我给这个外外里面待会是不是有一个头部的拉,那这是一个大的包裹元素吗?我们给开OK好,比如说我给这个开的,先稍微来写点样式,外盆底下的点。
13:00
是不是好?比如说我让你的Y思为百分百好,外思为百分百,跟外为凹凸不一样的吧,OKS为100PX是吧?是背景为PI,好,我们来看一下这个东西在哪。好。其实我到这边来看,嗯,应该看这F12进来。是不是在这好,现在咱们是不是没有系统滚动条了,OK,我把这个系统滚给大家吗?开开来是不是走你。哎,为什么不看开,只要你。呃,因为没有内容,没有干嘛撑开它吧,是吧,那怎么办?收费写点内容吧是吧,再来个一吧。稍微给他加点内容呗,是吧,100是这个东西我让他干嘛,那我让他固定定位啊,那我那让他固定定位啊,那我不能让他去承担股条啊。是不是你让他参加滚动是没有没有意义的嘛,是吧,那怎么办。
14:00
不是Y吗?说明什么?写写呗,Y和点写一个负循环吗?来折你Y一个I等于零,I小于。比如说200加加,我给他去加点什么万分点。嗯,一呢XT。加等于吗?加等于什么呢?加等于加里我的女朋友啊,周冬雨来个什么加一个一样。这些人真够冷,好看一下,好我们来看,那这个是他应该是什么,应该是听到了吧,这点来刷一下,你看一下,你看是不是都都在这边,你看现在是不是就有这个。这条在哪?这是这你们现在看这滚动条是一个什么滚动条,系统滚动条,你划系统滚动条的时候是不是动了柱子方。
15:04
我们说你滑动系统滚动条的话,它是移动初始方块的位置的,而我现在是一个。元素没有任何的定位,那就称之为它的负极嘛。是不是?而你的负籍的定位肯定是跟方块是有关系的吧,初方块动了,他要不要动,肯定得动的。是不是,那比如说现在他会干嘛。我哪怕让他干嘛,为什么他干嘛,你现在行为你是不趁还是款,因为你没有定位的腹肌是吧,你趁着还是出去不好看是吧,你看你还是会动的。能不能讲,那怎么办?我们说你滑动的时候,你不能干嘛,让系统功能出来,那首先系统滚动条进掉。是不是尽调形动滚动条,那肯定就已经没了,没有滚动条了,划不动了嘛,然后让滚动条出现在谁身上。We。是不是啊,好,那外看我们说外部是不是充当玻璃虚的,那还得百分百O,为什么?
16:07
这。看一下。现在是不是有滚动条,这个滚动条我在动的时候,他会不会动出什么位置,不会出在他上面了。是不是啊,你只会动干嘛?你只会影响自己的子元素吧,又因为你在看着是定位的绝对定位的参,参照于初始观分了,初始观分的位置不动,它位置就不动,那是不是就模拟这个定位出来。能不能讲,而且你想想,其实以后我们会让他出现滚动条吗?我都不会让他出现滚动条怎么滑。我们自己写逻辑吧,好不好?你拖鞋它滑还不好滑吗?改变它的全身的外部就行了吗?等等,因为你看现在哪怕我这边写凹拓,在我这个模拟器环境里面是不可可以的,想一想在登记上还可以吗?
17:03
不行,我们说这个东西它有个隐患的。是不是你写凹凸在增肌上,这是不行的。懂不懂老师说一般我们这个什么竖向滑屏,我们都会自己来实现,一旦自己实现,那这个主动权就在我们手里了,你想加什么逻辑就加什么逻辑,用系统的就是没有那么方便,可是像我小的时候就应该使用。系统的懂不懂啊,是不是你得有个概念。明白不明白好OK,好,那我们来看,好,那我们贴这一份来做项目,CTRLCCTRLB啊,那这个东西我们讲第二遍了。啊,使用绝对另外的模模拟固定,我们讲讲了两遍了,你们讲啊自己要注意一下,好零三好,那我们开始音为它的一个编写。好,我就要抬了。好,那大想,那我们做这个东西,所以话我们说这个样式我们一会待会肯定要使用来写啊,因为我答应过你们啊,PC项目我们用原生C来写,移动项目我们用less来写,然后你们把PC项目改成less吧,啊,我是这么跟你们说过的吧,那我们这边我们就使用less来写是不是,那首先我们来看,咱们其他先不做,咱们先把这个音乐台这个图片干嘛。
18:21
放进来吧,是吧,那把这个结构咱们先来吗。设计设计,那这个东西是可不要了,OK,好,这是一个拍的吧,拍的里面大家看其头部分的上下两层,上面是些按钮啊logo啊,下面是什么输入框是吧,跟按钮,那OK,那我们来分两分两什么D拉等什么。一个还呗,还吗是吧,还什么。呃,下面是不是按钮盘啊,叫什么had Bo吗?Button,是不是?那这个样式一定要写的建明之意一点啊,要知道自己在干嘛,对不对?好,这里面应该放什么。
19:11
几个东西,Logo logo这个像不像面包机啊?逗号。你们有没有烤过面包,烤过面包跳出来不是干嘛,不就有三个横杠吗?那面包不就就底下出来了吗?是吧?那这个导航一般我们叫什么导航呢?叫面包蟹导航。头皮屑的线多音字是吧,不管了啊,OK,那这边是不是按钮排啊,那一般按钮其实我们首先想到的是button。是不是做一般是发吗?你们讲好OK啊,可是我们不能用。拔层为什么?因为拔的样式就比较比较干嘛比较奇怪是不是啊,因为你去设置它的话,你会感觉比较奇怪,所以一般我们考虑按钮去我们考虑A标签,什么时候我们考虑按钮的时候的话,我们会考虑其他呢?如果你在表单里面,你就不能写A标签。
20:10
表单form表单里面其实X型的话,只有三分的按钮才是干嘛。才会有这个点击的行为,让他去跳槽,这吗?而这种状态下,根布跟的高。就是像我们底下这个东西是不是有按钮,这个按钮必须得是一个懂不懂,像上面这些按钮啊,其实一般我们写成A标签就行了。能理解吗?所以按钮做简单一点就是标签如果放在form里面就应该使用input,懂不懂?好,一般我不怎么喜欢取这个input,它的样式实在太奇怪了啊,OK,好,那么看一下,那首先咱们做这个logo吧,Log logo怎么写啊?如O咋包啊?肯定得拿包的拉,什么好,里面是什么分是张链接图片。
21:01
是不接AVA,这样吧,HGDP什么?3W点艾硅谷点com是走,你里面肯定是张图片是吧,把这个图片给他引过来。好。图片图片在哪边,图片图片在这边是。走过来,好,是不是过来了,好过来之后咱咱们干嘛去引用吧,里面是不是有一个叫六个点偏梯的,好,那我走你引用一下image底下这个什么logo点偏近是不是进来了,好问你现在是不是没有给他指定大小是吧,来看一下。啊,不应该说它了,应该刷中了好F不是好问你这个音乐它有没有适配啊。没有去IPHONE7上看一下,示范一下,或者去IPHONE6拍到上面看一下,好,我问你它占据的大小是不是一模一样的。
22:06
是不是一模一样?CTRLC。APP。CE。对吧,F。六百分百,好,再看这两个大小是一模一样的。音乐台,你看音乐台这个图片的大小是一模一样的,这个什百分之百分百吧,刷一下有没有看到,只是说屏幕宽度不一样的,可是这个音乐台当一模一样的,因为你没有给这个image去写任何的样式,那它默认问你啊,现在你去浏览器上面显示的话,我这个image是不是得拿C像素的,具体这个C像素多大,这个值为多少,就是它位图像素的值。是不是我们来看一下这张图多大?那肯定是二百四乘以88,你看这是二百四乘以88个未读小除方,最终如果你他们都不做,只用一个一面一方键给它引上来,他的C也是200方。
23:06
对,不懂,那可不是说什么,不是说现在是一个C对应上一个位置像素吧,不是这样的,有没讲,只不过你一个image去过浏览器上面成像的时候的话,它默认情况之下就是拿着你的位图像数所代表的那个值,可是单位是啊。小说。我这么说能不能理解,懂吗?懂吗?OK,那具体它占你占去做个物理像数。你要点开你的这个设备了,跟你用户的说话程度的。懂吗?老师说,具体这个位图像素到底有没有跟物体像素1:1还说不清呢。能不能理解,可是很明显现在没有适配,要不要适配?要适配咋写?你说现在是不是给这个键等去指定宽度了,而且这个宽度肯定是2M。是吧,你还的底下什么CTRLC,你的底下走什么走logo logo底下L有什么image,好,这张image的宽度怎么算,应该为多。
24:12
应该会多少?问你,你想算这个值,要不要拿十几度的宽度来。我们要等比嘛,首先你得知道这个一麦在你设计中的比例吧。是吧,那怎么办好,那这边咱们没有设计图啊,啊,这个参数我都帮你们。抠下来CTRLC啊,这个量的过程我就不带你们去量了啊,这个是实在太消耗时间,那没讲啊,量的过程咱们就不量了啊,可是所有的纸我都帮你帮你们已经整理下来了。好,大家看这个总的设计图宽度为1080,好,想想现在比如说有张设计图总宽度一零。八零里面有个元素两百四乘以88,因为在设计图上面都是位置像素,可是不用管,不管你是什么像素啊,我只要你的比例。
25:09
是不是OK,那这个比例多少,200多。初夜108。这什么比例?我问你,现在我有很多设备。我的设备放在这儿。是不是我视频方式做完了,我问你这个宽度为多。用R来计算的话,你是16呀,又因为我适配的目的是百分百环原设计图,其实你设计的宽度用R来代表的话,也是16。哎呀,那不讲,现在我用两百四除以1080,我能拿到你这个图片宽度,在我设计一个比例吧。是不是啊,OK,我问你到我页面上去显示是否大向上,我是不是也得有一个同样比例啊,你这个图片在这边,你的CSS像素跟我的视口之间,视口的宽度也得有一个一模一样的比例。
26:10
是不是我问你用两百四除以1080,我管你是什么单位吗?不管你什么单位,你只要给我这个比例,最终我去成像的时候,我也需要这个比例。是不是现在问你我们我需要直接算CS像素吗?我说算I值是不是就可以转成CS像素这种,因为你I是代表什么。一个跟标签的一是不大,想想我用这个比例乘以十六二。拿到的是不是他所对的样的值,比如说这个我先谁写一下是我样吧。咱们现在计算是不是都是RR之间关系啊,问你整个CSS相素那个比例是不是也是这个比例?是不是啊,只不过这个同步关系不是我们在做了,我们已经做完了,阿燕是不是在做,你就不用去关心他了,不要想那么多了,有没理讲,也就说现在这个两百四的宽度,那我最终这边应该写多呀。
27:16
宽度,知道找到计算器吗?计算器咋写?两百四除以什么?除以1080。等于多少等于这个值乘以16,至于乘以多少,得看你识别那个极值,除除以多少等于多少3.55啊CTRLC,诶好像这里可以复制,复制吧,好只有你那只你。是不是这样来看一下刷一下,你看因为它是不是这么小了,你看走你刷一下,这时候是不是适配了。是不是被道,你可能看不清楚,我到IPHONE4上面来找你,你看这大小一样吗?
28:08
但是为什么一样?不一样吧?看这个宽度大,56乘以28,它呢。一。好像是一样的。这为什么一样?你这个。也不完善。是不是哪边写错了,来看。哦,冒号是不是这里说下。现在。你看不一样了吧,不过肯定是什么。适配的是吧,啊刚刚犯了一个错误,干嘛放在这边没什么冒号啊,那这个注意一下啊,好喝两杯啊我的好OK好所以那是不是这个四倍就已经做完了,那不理讲OK跟大家想想我不满足,为什么我们说每次你看我待会要写多少小时。
29:14
你看到没有,这些数字是不是都都要变成样式的,你要这么写,你得弄死我。是不是,我说不能这么想是吧,OK。我们用。让他来帮一下我,OK,让来给我们说CTRLC04。能不能计算呢?可以,只要你把这个设计好了以后,你会写re,是变机器的方面。好,里面有来个什么,比如说叫文件吗?叫台点是吧,是OK的话,你让让谁起床了。考拉,考拉,起床。是吧,好,考拉起床之后cancel好,那怎么办?
30:04
把这个干嘛,直接拎到他里面来了是吧,OK,想想。咋写这些钥是干嘛统一全部贴过来是吧?页面上面是没有L标签的是吧?CTRLV干嘛这个要干掉,这个也干掉是是好大家想想好之前咱们说我们那种方式算的话,干嘛有点麻烦了是吧,而且我们说这个结构最好写成。嵌套的OK,你来看,现在还需要管HTM的层级吗?你觉得你的HT样式还会产生冲突吗?不会,为什么人帮你一层一层的在什么维护着,是不是找你?看。OK logo底下的什么?干掉你是不是好?CTRLX是不是这个?
31:02
外三好最好一层层的写好吗?因为你不知道这边要不要去加压,去加压是吧是吧,好问你再想想刚刚我们整个写法的话,我们是怎么写的。刚刚我们整个写法是我们我们自己去算的。是不是问你这边我能不能算,先算一下你这个一二值为多。多少什么CSS像素啊,或者是多少么。多少位图像素啊,因为是什么设计图吗?是不是,比如说我在这边干嘛,怎么去另一边呢。艾,一个I的值是不是冒号吧?我问你一二代表多少?个位图小数1080是设计图的位置,小数除以16,这个是不是机制?这只是我给给了一个单位而已。
32:05
是吧,这是不是代表了多少位置项数啊,因为待会在这边除的时候,是不是最终带单位为二样的,我们说这个单位是不是可以直接给这前面这个变量,问你这是不是1RE代表多少位小数。是不是问你这张一占据多少个维度数?多少?多大吗?成不?除吧,除以这个值嘛。因为这个代表一二有多少个位度像素吗?现在我有两百四的位置像素吗?那你有多少二呢?两百四除上一个R不就行了。能不理解,问你现在是不是数量计数的?是不是锁相技术的?
33:01
两百四不是我量出来的吗?你只要把这个值给定义好,设计图的宽度除以你这个二别的极值。是吧,再拿你这个两百四除以这个IM,那这个就出来了,那我们来看一下编译的结果,没道。是不是还是这个值是不是啊,诶大家看我这边是不是。反正这个值对不对,对吧,你看这个X码伯璃干嘛,是不是给我出来了两套,为什么,因为是我写的问题嘛,我在写的时候,你看我是不是来了一个逗号是吧,应该怎么办。嗯,其实这个东西的话,我就干嘛单独拿出来,是不是这个HT方干嘛,我从这个外部开始,我们用什么嵌头的结果来写,这个就相当于写成什么默认钥式是吧,Ju你那这个默认钥式我干嘛写在上面嘛,是吧,那这个是我们的R的一个机值,OK,走你好,这能不能理解。
34:01
能不能理解好,那先下课休息会。好,我们待会我们看一下这个视视频到底对不对,咱们是不还没有影啊。是不是我们还没赢吧,怎么赢啊?并是吧,怎么找CSS,底下什么台点CSS?是吧?来看他周年F12刷一下IPHONE4。IPhone。五你看是不是就变大了,那肯定是一个等比的关系了,能不理解啊,因为你不用管图片的高度嘛,因为它是干嘛,这是硬的嘛,能解吗?OK。
我来说两句