00:00
我们来看一下三格怎么实现的,走,你看三格圆吗?干掉。好,这个job全部给它,笔记我拎到外面好。来找一下三格,好,我们来建个文件夹,叫三格源码,来看这三个源码去哪找,这里面找是吧?要找三个源码去哪找?Less嘛,你看里面是不是有混合的是吧,下面是不是都写什么。一些相当于是入口啊,其实这些混合都是会被调用的,懂不懂,OK,那我们来干嘛?三个源码里面我们需要哪几样东西?首先我来建一个文件夹,叫混合。Mix in OK,那整个不源码里面跟混合有关的一个两个啊,不跟这个吗?三个有关的混合,就就这两个混合嘛,灰的嘛,三个意思嘛,好给他贴过来。好,这两个文件我们需要分析好,那这是混合里面需要看的两个,其他的干系不用看吧,这个跟什么肯定要fix嘛,跟什么清除浮动有关的吧,好,整体我们再来看这底下还有什么。
01:10
这个贵的嘛,是吧,其实还得拿一个。变量啊,就是它里面所用到所有的变量,全部定义,定义在这个里面懂不懂,看看还需要拿什么。战神,拿这两个就够了,你C拿懂吗?拿到我这个外面来好保存一下好关掉。好,来看一下三个源码里面,我是不是拿了,你看这个这个东西我们再不再去拿,是不是现在我们就拿了这四个是吧?来看一下三个源码好,怎么看三个源码好,这个是三个月望的入口,你看这里面都是变量,看到没有。艾特嘛,定义的都是变量,这些都是我不知道要使用的变量,他放到一个文件里面去管理了,懂吗?所每次他拿变量都会来这个文件夹里面去拿。懂不懂?OK,再来看好这个规则。
02:00
OK,来看一下,好,这就是我们整个的三格。系统OK,那我们来分析一下这里。CTRL定好,首先是不是有容器啊,OK,再来看好,你看这这个是一个什么容器啊,这是这是什么容器的定义啊。不是固定容器吗?肯吗?固定容器是不是下面这个呢?ID嘛谁啊,流体容器吗?流铁容器只有你。好,再来看这个是这个是这个是什么电压好吗?是吧,这呢量。好走你下面都是一些列的定义。好,我把这个代码帮你们整理,整理好以后你们好看。
03:01
好看就这么简单是不是走你调用的时候是不是极其简单,你看嘛,我们是不是现在你看我们学到现在固定容器啊,流体容器啊,行列是不是都在这了,好,那我们先来看下这个容器它是怎么定义的,走你来看一下。好,你看是不是定义那个点contain,你看是不是里面掉了一个混合,我问你这是混合还是累。类一般我们说定义混合的话,虽然说这种东西能不能看这个混合可以,可是最好你有个括号。是不是OK,其实它本质就是个类,有不讲里面是不是掉了混合,这个混合在我里面有定义吗?没有,它定义在哪边了,所有的混合定义在哪mix里面,它肯定是得去艾input的吧,看一下它是怎么艾input,它其实是有一个,哎,找找。其实他这边是有一个看一下。我记得应该是有一个东西去艾的。
04:00
有没有一个叫index的东西啊?Mix in.less你看在这边干嘛?你看点less吧,他是不是在这边全部给你干嘛引了进来了。能理解吗?OK,我们来看一下好整理好,那他待会是肯定会去调用这个混合的吧,说明这个东西是在哪定义的。你看我的流起容器里面是不是掉了一下这个混合固定容器里面是不是也掉也掉一下这个混合啊,看规的上来,你看是是不是就就就这恐告OK,这个恐告是个什么鬼。啊,固定容器和什么硫铁容器的公共样式全部定义在这定义在这个混合里面吧,是不是,那我们就来看这个混合好来看这个混合能不能看懂。这是个什么混合吗?里面有什么?参数嘛,调用时候有没有传参数啊,没有有干嘛,默认值嘛,看这个默认值什么,CTRLC去变量里面走吧,OK ctrl f ctrl v。
05:10
查找,你看为什么30B,记住这叫槽宽。啊,什么叫槽宽?来看看,其实我们刚刚写的时候就已经有槽宽了。AB。看一下,你看这两个东西之间是不是有一段空隙的,看到没有,这一段空隙就叫。槽宽槽与槽之间的距离吗?文本跟文本最好不要贴到一块嘛,啊,这个就叫槽宽,槽宽在哪第一的。地了。就是在这边定义的这个就是超宽,有没讲OK,那么看一下我们说这边传进来的这个东西是。潮款。OK,我们说这个是CTRLCCTRLV,这叫超宽,OK,来看这个超宽,超宽你看到这边是被分成一半了,一半给给,为什么?这是let里面提供的两个函数。
06:21
向上取整跟向下取整啊,代表天天花板的啊这。这个是地的意思吧,这个是天花板的意思吧,这是向上去的,这个向上去什么能理解吗?好,再来看它继承了一个什么。是不是继承啊,这能看懂吧,继承一个什么。吧,那看着这那肯定是得有一个clean的吧,Less里面找混合里面是不是有个啊CTRLC过来看看。能不能看懂,就是你使用这是不是混合,你看before阿,就都加什么为空嘛,Display为table吧,After是有个嘛,肯定为嘛。
07:08
你们讲这是不是算表清除浮动的方式?等等,这种方式兼容性比较高,一般我们display不吧,Display其实是可以为table的,那们讲这个方案兼性比较高,OK,那这是不是我们所有的,只要你是有这个fix的,也就说两个容器,其实它们是清除浮动。能理解吗?这两个容器其实是清除浮动的,为什么?你因为继承了什么?而且是不是过跟有关的所有东西我是不全记下来了,这能不能理解,这种设计能不能看懂。没问题吧,好整你那再下来看,好,那我们来看一下,其实最终这些是不是都是我容器身上的样式啊,那我容器最终它会长成什么样。首先我们知道干嘛,我们说容器上面它是动力一些手脚的是吧,这些都是容器上的样是吧。
08:14
是吧,OK,我们说in是吧,这几个字给我记死,最后最后我来分别来讲每一行代码分别代表什么意思啊,这个字应该会到。15PX是这个值呢,也是15PX是在的,而且它们是清除浮动的吧,好,这是流体容器跟什么。固定容器的公共样式好,公共样式好,重点来看一下,看一下我们这个流流体容器。周年。F12来看一下是不是,你看是不是他你看是上是个嘛。是不是有的,而且大家看他有没有去清除浮动。
09:07
你看是不是before after的时候干嘛?Before,不不少,只要跟这个跟点是有关的,你看它是不是全部拿来了。啊,Boos吗?你没讲OK,那我们来看一下我们是干嘛。好,第二个再来看。好,再往下看。第二步,第二步我们看什么好,还是回到这里面,那上面我们调的第一个是不是已经分析完了。规嘛,第一个是不是干嘛,分析完了,相当于流体容器,你看是不是只掉了它一个,可是固定容器大,看下下面是个是什么。媒体查询吗?是不是OK,我们来看这个媒体查询,媒体查询怎么写的。你看这边是不是有,这边是不是有些变量SM啊,这个稍微有点污啊,这个起名字是不是SM,什么MD吧,还有什么LG吧,分别来看一下这些值分别什么CTRLC去哪找。
10:08
变量里面找CTRLFCTRLV。查找你看是不是他OK,这这找。再找看它在哪定义的,你看是不是在这定义的S杠什么SM杠什么mini来的值是什么值啊杠SM是多少?768SM代表一种阈值。是谁?这个就是讲再来看还还有什么值。MDLGOK,其实你们可以看到CTRLC取得MD。CL查找你看992吧,是不是,你看LG1200吧,是不是OK好,我们说阈值分别对应的三个等级,一个是MD,是不是还有什么LG是大看这个东西是不是没有东西跟它对应啊,是不是来看一下到底有没有东西跟它对应?好周NY我们来看一下。
11:14
好。变量里面是看是看不到的,看我在这个三格最终调了谁看。如果你看这些是不是三个酶酶体,他选SMMDL减,还有个什么。XS默认情况之下,只要你没有满足这三个条件,不都是XS?是吧,不满足这三个条件不就是它。是不是它这个预值对应的其实就是什么XS懂不懂,OK,其实LG代表什么,好帮你们写写大屏幕PC,大屏PCOKMD呢,中屏PC。SM呢,平叉叉呢移动手机。
12:08
那么讲OK,这些都是它的阈值的一个意义,记住它。整理,而且大家看它的写法,它的let写法整理大家看。你看我们说是不是先掉它的,你看我们不看行根列,就看两个容器,OK,你看是不是公共样式抽到一块,然后这是固定容器上是自己的嘛,特有的吧,来看一下这个我们说是阈值吧,下面是不是代表它的宽啊,看这些宽肯就C。看变量CTRLFCTRLB,找一找。你看在这边,你看这是代表平,代表什么平板的意思啊,这个值为多少。七百二加上什么?这个是什么?超宽七百五吧,问你说明这个值有没有可能变?
13:01
有它的,它的基值是七百二加草宽,现在咱们的槽宽是30嘛,这个呢一模一样的,你们可以看到,你看七百二九百四一四零嘛,多少超宽都是什么30吗?好,那这个值可能这个值就是什么。这个是多少900多少九百四加宽。上面是1140加筹款,OK,到现在还很简单。我们讲了两个容器在他源码里面是怎么定义的。是不是这样,OK,那我们说干嘛固定容器有自己的啊,什么特定样式好,这个样式怎么来的,来看一下走,你就是通过这三个媒体查询拎过来的,是不是,我问你,如果我在大屏幕的时候啊,我就问一下,如果现在我的屏幕是超过2000的,这两条样式有没有读到。
14:07
有没有读到,我现在屏幕他这个阈值不是120吗?现在我的屏幕是1300,我问你这两条样式有没有被读到过。有没有被读到过,读到过最终被它覆盖了而已。是不是如果你现在整个样式是200PS,你的浏览器宽度只有200PS,我问你啊,这些样式能不能做到。读不到默认值就是啊。凹。你讲。那没理讲,我问你这些顺序能换吗?不能换,必须给我从小到大U盘。顺序是不能动的,顺序一旦动了,这个布局就要错了,懂吗?说在做响应式布局,特别是这个媒体查询的时候,这个顺序给我搞搞清楚,那么懂吗?OK,这个顺序是必必须得是什么。
15:03
必须得是掉了,懂吗?OK,我们就干嘛这个。顺序不可变是不是啊?OK,那我们先讲到容器的一个源码分析比较简单,待会讲三格的时候可能会稍微难一点啊,大家先下课歇一会。
我来说两句