00:00
啊,我们刚刚讲完了识别方案来讲一个移动最常见的需求啊,有人会跟你提这条线等于是一物销售啊,该不该管。啊,一定要管啊,或者说我们来看一下淘宝。3W点百度点。com找淘宝啊淘宝有两个团队,一个做天猫的,一个做手淘的啊手头团队比较。比较厉害一点。好,刷下去他们的移动端,好,大家有没有看到这个非主旅行下面有一条线。是的啊,这条线百分百是一五以上出来。能不能找到这条线。看能不能找到这条线。
01:01
这条线给了谁好看?好。这里面吧,打开了。大家看是不是这条线啊,大家没有看到这条线肯定是一五加速的,而且你看到它的视频方应该是二呀。是不是OK,那它这个线是线吗?是个div吧。给典韦来个高度,不就成一个线了吗?是不是那这条异物形就怎么做。好,我们的时间,首先我们的时间会跟淘宝一模一样。其次我们来说一下啊,嗯,现在比较主流的另外一种实现方式啊,总共有两种实现方式,好,那说这个业务像素之前,首先有同学会认为业务像素做怎么做。零六。OK。一物理像素吗?是不是一物理像素好,他会怎么做,你待会不就搞个DP吗?搞成一物理像素吗?比如说这个test啊,我给它搞成一物理像素嘛,那我们就给你ex嘛。
02:08
E是一个是是是什么ec小数吧,我来看下,我给他背景数,给他给个黑色吧。是吧,让他有一个马,这个外我就给分了,OK,然后有个马吧,马。给个30片给它稍微上来一点走,你好,大家看F12去移动端刷一下不要了。好,这个肯定不是一位小数是吧,那有同学怎么说,我这边写个。0.5。我问你照理来讲是不是应该是一五,在还风流上面照理讲应该是一五数刷一下来看一下这个东西,你看这边是不是0.5啊,可是最终渲染的时候呢。
03:02
一模一样的吧。是吧,也就这个0.5,他能渲染上去吗?啊,他还是义务享受啊,所以说这种方案你不要给我想了啊,因为一开始我也想过啊,就发现是不是这样的,那没讲好那怎么办。不能这么做是不是OK。你只能是一。好,现在怎么做?首先嗯,我们来讲一下什么呢?嗯,好,我们先把I视频方案给大家写起来是这样,比如说我们现在看我们现在做项目还是用R压是不是啊,比如说待会这个是十六二压,那肯定是干嘛要占满屏的是不是?好那把R视频方案先写一写,好,那最好是一点。On no等于一个方形。OK,先关一下再看。好,二线识别怎么写来一个方形?
04:05
是吧,然后呢。怎么四行代码这个记住一个什么等于特点。C。这个玩意创建一个标签,最终你要知道这个标签一定要放到底下去了,点TRY的,是的,OK,我们说这个的得有一个应当等于什么。等于什么HTL改成什么方?Size肯定是个P值,而且是。
05:00
不的是不是好以后不让你收集阿姨的视频方案的,在外面啊面试的时候,所以说注意一点,好这个外怎么是是吧,咱们这去求这个大不了W怎么求,首先看面对标求有没有。有是吧,可是你不是一个。完美时空ni l应该需掉等于1.0是不是,那说方这个暂时咱们先不进了啊,反正已经是个完美生活了是吧,好所你呢,怎么办?画一个W等于什么?Document document点?管式啊,一旦理解了这个东西,写起来是比较简单啊,OK,那II识别方案是不是就可以了?好,问你这个识别方案管不管PX。他能管P吗?不能管,这个识别方只能管,哎呀。
06:05
那OKF是要过来,那我们来看这个时候还是什么几项数。高度是高度。高度就说这个。高的不是一像素吗?咱们给的不是一像素吗?你什么像素啊?CS小占据几个物理小说。两个物理像素,高速上面是不是占据两个物理像素啊,我想让高速上面只占据啊一个物理像素啊,那怎么办?怎么办?动应该就死掉了。是不是我问你现在在IPHONE6上面占据两个物理数吧,高度上面,那问你I6上面高度上面占据。
07:01
IPHONE6上面高度上面占据了几个小数。IPHONE6PLUS高速上面占据几个?三个吧。是不是1PX吗?一个方向上面吗?我不是说我不是说整个一个三数包含了几个吧,一个方向上面吧,那是不是跟像数就有关系的,那F6上面一个方向上面不是1:2 F6上面一个方向面不比三是吧?那现在在I6上面就占据了高速上面占据了两个物像数,I6上面高速上面占据三个物像数。是吧,通通要变成。一个我们就想说。是不是啊,怎么办?跟像素比有没有关系?有,我先把像素比给他拿到,我挖一个DPR像素比怎么拿?像素比等于window底下点DP。
08:02
呃,Device pick your raio,你们有看到DP啊,这就是上数比,那这个值可能稍微有点性问题了,我们可以来看看它的交性问题。十我是有点这种问题是吧,好像。没问题是不是,是不是就在IE上面稍微有点问题啊,不管IE了,是不是不用Windows了是不是,那如果有这题没有。那怎么办呢?啊,给你来一个没有我就默认你的下属比文一是不是啊,没有是不是也极其少,是不是说明这个交性还好,是不是大部分的大部分的其他都支持吧?OK,那我们再来看,好那大想像素B,我现在已经拿到了。
09:06
OK,我们说你现在re是变方向,是管不到PX的,你只管RE2,你想想,现在你不是占据了一个三项数吗?F的上面占据了高度,上面占据了两个物理项数吗?如果我把你说放。双方成原原来的。1/2,那你是不是只占据一个维度,可是问题按压有没有被释放掉,释放掉。有没有?你缩放是整批缩放的吗?你PX缩放了发现说。收不收,放也说放是吧,那他们他要不要还回去。要吧,你说我的视频方案主体选阿视频方案,因为我要实现义务的像素,待会我肯定要全局做缩放,全局做缩放的时候干嘛,我让你这个按干嘛调回来行不行,那我先把按是给他调回来怎么办?我不是拿到像素笔了吗?我在算哪个值的时候干嘛。
10:08
再乘乘一个0P就行了。再想想。我现在是不是这边没有除以16,我应该除以16吧,是不是,那我在这边再乘以一个什么D平啊,是不是就可以了。然后我在全局做缩放,怎么说放跟这个D有没关系,画一个S应该等于什么?是放大还是缩小?是放大还是缩小,缩小啊是不是除以什么。一除以。然后呢?
11:02
给谁?是吧,给他。是不是是不是去改它了,怎么办。拿一下M等于document就有找到这个干吗?内等于什么BWPU标是吧?找它之后怎么办?CTC它是什么?它是什么?它的C么?CT应该什么?Dimon。CTRLC拿出来毫问你,这个时候这个Y4K等于Y,可不可以不要闪?可不可以?为什么可以?
12:01
因为我后面写的是什么。我是不是这边可以再去加东西啊,加什么这个用户的那些什么售房行为啊,是不是,那我现在可以暂时不用加吧,是吧,不用加我是不是就可以直接写择掉。是不是?可啊,这个不算吗?是吧,我问你,因为我这边这个值肯定会小于一。所以说最终的布局是不是肯定听过关系,不肯定是因为这个应该掉有它也没问题。是不是,可是我们说最好留着它完美适合嘛,是不是?有没有理解好,这个时候问大家有没有时间哦。
13:01
应该是这样,看一下这里。赶不上。刷一下很明显比之前是不是要细一点,是不是,只不过你们现在看到的可能干嘛效果没有那么亮了,是不是,可是你要放到蒸汽上面去测一下,这条线肯定是比较细的。能不能讲我们可以来看一下淘宝,那么你现在现在看我们这个美甲表现。你看应该是变成0.5了,是不是,如果这个变成IPHONE6PLUS0.33嘛,是不是好看淘宝。这条是不是这条线啊,来看这条线的高度为多少。一撇宽度是不是用的?二压石板来看他们的head。还得在哪这边多少。
14:02
点三吗?因为他plus I6呢刷一下。M多少?0.5,再看再看这条线。在哪?这到现在了。怎么又找不到这条线了?过了。看你不走就行了。怎么突然找不到了?这条线也很神奇啊。他里面吧。
15:02
诶,这里又找不到了啊,我来找一找。哎,胸膛。是不是?你看嘛,之前的高度是不是还是一撇。是不是?你说我们是如何实现一物理小数的?首先我问你,整个页面是不是统一要缩小?整个页面有没有统一缩小,有统一缩小了吧,现在你只要是P值的肯定会缩小的,一般是不是,而我现在主要的视频方案是什么是。阿燕是片你缩小掉的那个东西,我是不是在阿燕给你找回来了?是不是啊,你看嘛,你缩小掉的,我在R上给你干嘛补回来了,说你这个16R有没有,有没有搜索一下。
16:02
没有,可是PX有没有受到影响?受到影响,是不是只要你是写re的都没问题?可是只要你是写PX的都会好吗?缩小嘛,是不是你说我这个30篇子写的对不对。不对,是不不能干嘛缩小的,比如说我给个什么一二样行不行。能不解这个时候再来看,好这个时候大家看,其实刷一下这个是IPHONE6吧,是吧,好这里。呃,已经实现了吗?是不是再来看。CTRLC,我去IPHONE6PLUS上面,他们的这个是不是也是一样的。CTRL等比的宝妈给关了。是不是是不是已经实现了,能不理解啊,OK,那到现在咱们是不是实现了业务相发,可是这种方案是不是从适配啊,这种业务相实现是不是从适配方案的角度出发。
17:06
我们说干嘛最好不要动对吧。是不是,可是淘宝是不是怎么做的,淘宝是怎么做的,OK,那我们看我们另外一种是啊,另外一种业务像素实现的形式。找你零七。好,看我怎么时间。好,这个全部干掉,我都不要CTRL。肯好,比如说现在它是不是应该变成150像素啊,是不是啊,怎么办?现在大家看它是不是1PX啊,它现在是一个什么像素啊,我觉得那么小。那个。宽度啊,宽度是变成16IM了啊,宽度现在应该多百分百吧,是不是好马我就给个多少。
18:01
50P吧。OK,这也是一条线法,很明显很粗吗?这线不是很粗啊,OK,我怎么做?想想我现在如果不从视频方案的角度出发,怎么做?这条线想变成一,五的条数,不就是树后吗?是不是你刚刚采用的说法,不是通过Internet调吗?我还能怎么说话?啊。确吗?可不可以,只不过这个说放的话大小。这个缩放的话,有时候是0.5,有时候是0.33嘛,我是不要做个判断,根据像素比做判断,CSS里面怎么写判断。CS里面有没有写过判断?小影射。是不是,你看我现在是不是有个你高度为一嘛,我不给你高度,是不是这里面有什么。
19:11
杠K-pick叫什么?哎,我记得是不是有一个。嗯,我记得有一个项目可以去测像素比的。找一找。C3里面是不是有一个布局扩展小应是布局吧,是不是去找课件吧。车件。媒体查询吗?是不是这里面是不有一个d device p RA,这个代表什么。像素比嘛,DPR嘛是吧,OK,我们说这个是不是要加钱,要什么加前缀的YY。
20:01
K杠。给y picture瑞求嘛,是不是我如果写二代表只是像数的。二嘛,下手比较的时候怎么办?怎么办?这这个里面应该写什么。响应是这个大坡,你们应该写什么?写一个个的334啊样式吧,是不是叫规则是不是,那怎么写test嘛,是不是,你是不是有一个应该为多少。一。我这个汉是不是应该还是应该写在这,你是不是还是ex啊,只不过到我这边要干嘛,缩放选four应该怎么办?Scale万多少像素比三的时候呢?这个我们是可以接受的,为什么?因为你这个下属比不可能很多的。
21:05
是是。咱们有,咱们有没有动视频没有,这是现在最主流的。最主流的业务像是一个实现形式,懂不懂,那上面这种是之前比较主流的,因为是淘宝的方案。懂吗?啊,为什么?因为我这边用了一个C3嘛,可能会有一些教学问题,懂不懂,OK来看一下F不是,这肯定也是没问题的,大家看它是比较细的。能不理解?OK,好,那这是我们什么?两种一物理小数的实现方案?OK啊,我们用也是用。第二种,第一种我们用的比较少,除非你项目特别大。因为这是一劳永逸的啊。这种方案是不是一劳永逸的,你有你干嘛,你只要写1PX,肯定就是一个一物小售,是不是这种方案是你每次要自己去啊指定的,你得你你你得自己去写哪个元素,最终要变成一物小数。
22:13
是不是OK?
我来说两句