粉丝92获赞191


大家好,我是追口,这节课呢,我们继续跟着上一节课的步伐来继续往下研究一下如何让我们的首页轮播图在不同设备之间,也就是上一节课讲的我们左上角 不同设备之间如何能做到一个相对比较完美的适配。嗯,首先呢,我们现在还是来回顾一下我们现在目前已有的这两个呃轮播图,比如说这第这是第一个,还有个这是第二个, 这是我们在上节课里进行操作设置的,他们会在实际的使用过程中遇到一些什么问题。嗯,我们点击这个右上角,我们到我们右键在新标签页中打开一下,我们看一下,这是我们一个是在我目前笔记本端实际访问的 这么一个情况,这时候呢,我们先右键点击一下这个 inspect, 然后把这个不同设备端的这个给打开移动适配,我们看一下他在移动端,然后在这个目前呢这个就是这个 啊,平板端以及我们最大的是一个四 k 端的一个实际的展示,大家可以看到,呃,采取第一种我们这个呃 slide 的一个设置方式呢,花, 呃,他会完整的展示,这是目前是在我们一个四 k 端的,就是最大的屏幕内,呃,就是一般笔记本屏幕啊,就是一般台式机最大屏幕显示的一个实际展示效果。 嗯,有一些小伙伴可能自己在办公室的,呃显示器比较大,所以实在实际体验过程中呢,我们的这个导航栏就会变成目前这个 他居中,但是左右呢有两个空白,然后他的整个宽度,因为我们设置的大家可以看到只有一九二零乘八百,所以呢中间就是一九二零,然后高就是八百,但是呢由于我们实际的宽度其实是二五六零的,所以才造成了左右这样两个空白。 但是呢,随着我们屏幕的不断缩小,哎,比如说就到一九二零的这个时候,他就会完美的左右撑满, 然后呢随着我们屏幕的不断缩小,他也会等比例。这是我们上一节课第一个四大的设置方式,如果有小伙伴不记得这个是怎么设置的,可以再回去重新看一下, 嗯,随着他屏幕不断的缩小,哎,缩,缩小,缩小。比如说我们现在把它回复到一个,变成变成这个移动端比较小的一个方式,呃,比,呃比较小的一个屏幕尺寸啊,这时候他遇到的一个最主要的问题其实 就是,呃,本来是我们是一个横向占满的这么一个图片,哎,跑到移动端只占据了我们顶部,虽然他完整的展示了,但是呢他只展示了很小很小的这么一块,哎,呃,跟我们设计可能有一些那么不符,我们还是希望他,比如说, 哎,我们这不是我们的一个呃手机的一个这个界面吗?我们还是希望他尽可能的竖向也占满,然后展示的内容也比较的啊,符合我们的一个要求嘛。这时候我们就可以看一下 我们接下来第二个这里呃设置的一种方法。第二个 side, 我们还是先从四 k 开始看齐,四 k 的话大家能发现跟之前一样,呃,除了这个,我们这个中间的这个 heading 和这个 button 能在这个 图片上方进行一个显示,然后这个我们也是设置的是 slide the background 嘛,呃,它能横向在四 k, 它左右不会有任何的一个呃空隙,它会横向的一个占满 啊,而且呢但是呢随着我们,但是呢他遇到的一个问题就是啊,不可避免的就随着我们屏幕的缩小,大家可以发现一旦他比二二四零零要小了之后,比如现在是二二二七幺,他就会一点一点的把我们这边右右边开始吃掉, 他会保持我们高不变,也就是说高是八百他不变,但是呢会把我们右边二四零零一点一点吃,相当于一个卷轴从右往左不断的缩小,缩小,缩小也就导致了如果我们到移动端去进行看他,比如说回到我们刚刚这个这个中间三七五,就 就会发现几乎他只展示我们左边这么一小块,其实在右边这一块还有很多的一个内容,但是就被吃掉了,这个也是不符合我们。嗯一个设计需求的, 这时候如何解决这个呢?我们还是回到我们的 oxygen 编辑页面,照例呢,我们把我们的 structure 打开,我们也可以看看一下之前的 section 里头 slider, 我们添加了 slider element, 然后里头有三个 slide, 这是第一个 slide, 然后我们目前看的是第二个 slide, 包括 啊第三个 slide 是没什么用,我们可以直接把它就删掉就可以了。呃,第一个 slide 和,呃就是第一个 slide 的话,就如果你要求设计感没那么高的话,就可以使用这个第一个 slide, 它也设置相对简便,然后展示的效果呢,也相对可以,就基本能达到一个展示的效果。但是你如果追求上 稍微高一点,我们会也一般建议还是使用我们第二个 sty 的这种设置方式,并且我们会遇到需要使用到我们左上角这样一个移动适配。 呃,移动适配是什么意思呢?就是我们目前大家可以看到它是我们处于在一个 full screen, 也就是最大电脑端,其实它目面向的就是一个我们四 k, 就是在我们这里四 k, 对,也就是目前是在我们四 k, 大家我鼠标悬浮在这,大家能看到这个四 k 是二五六零。哎,这样的一个宽度,我们设设置的图片尽可能的要符合 这样一个宽度。一般来说我的建议还是就一般一九二零就够了,大家如果愿意设置二四零零啊,什么也都可以。嗯,但是呢,呃,随着我们移动端的一个适配,我这里只给大家展示一 一个,就是一个是最最大的,还有一个呢,就是 less than 这个 four hundred eighty pixels。 哎,这一个中间呢,其实他们设置都是一样的,但是通俗上来讲我们还是为了讲究一些效率。一般我们只会设置两个,一个是电脑端,一个就是移动端, 嗯,这两一个不同的一个展示的一个,呃呃,不同的展示的一个不同的设置,他们会应用不同的设置, 就我们目前如果只设置了这个最左边 four screen, 它再比如说到这里是这个 啊,笔记本平板、手机横端以及一个手机竖端展示,他都会延续应用我们这个 full screen 的所有的设置,他会默认的继承,就如果我们不对他进行设置的话,他都会沿用这这个设置的大小,也就我们图片是高八百,哎,他 如果我们这里在 fallscreen 里设置的,比如说像这个图片是八百,这个是二四零零,哎,虽虽然我们移动端的设备变小了,但是他一样会沿用这样的设置啊,为了打破啊,为了给不同的设备展示不同的信息呢,这时候我们就需要点击一下,哎,这个 我就以最右边这个,呃,四百八十 pixels, 呃,以下作为展示,一般来说我们设置这个就够了,我们点击下它, 这时候大家可以看到在四百八十的时候,其实我们的整个图片是没有进行一个完整的展示的。如何想进行完整的展示,我们其实是需要放第二张图片的,也就是在我们电脑端和移动端展示的,其实是两个完全不同的图片。设置的方式其实也是一样, 我们点击一下这个 slide, 点击这个 slide, 然后到 advance 里头 background, 大家可以看到 background 的这里头变成一 这种和黑色的啊,这种灰色的,其实他这就是意思,我们呃默认他有一个使用的一个意思,比如说我们现在能看到还是二四零零乘八百,这时候呢,我们需要做的,我们现在目前知道 我们目前这个宽是四百八,一般来说我们的移动端就是大家可以图片按四百八去设置就 ok 四百八,然后我们的这个高,因为我们之前也有设置这个这个 deep, 也就是我们在这个 deep 里头,我们可以去看一下也是它的 advance 里头它的 size, 我们会发现它也是默认继承了一个我们在 full screen 里设置的数值就是八百。 嗯,一般来说呢,我们在移动端八百是 ok 的,它基本会占据我们整个这个,嗯,手机的一个竖向的一个展示,但是在这里呢,我们需要为它单独设置 一个新的,呃, slide 的背景图片,我们点击这个 slide, 然后点击 background, 我们这里呢需要去修改,哎,这个 background image。 这里呢我可以给大家,比如说我们现在可以改成不是二四零零了,我们现在有一个新的图片就是四八零, 然后乘以的话就是八百,呃,就 ok。 嗯,然后这时候大家可以看到其实我们这个图背景的图片已经有所改变了。呃,这个字有点挡住,我可以把颜色给大家调一下,比如说我这里来个 换成这个二二嗯三,哎,这就是个绿色,大家能看到这个颜色其实是不一样了。呃,那我们比如说这时候再去点一下 four screen, 大家会发现它还是黑色的,但是呢,我们到了移动端,它展示的是完全不同的这么一张图, 完全不同的这么一张图。然后呢,我们这时候有时候看呢,他可能,然后为了看的更仔细一点,我们可以把这个 heading 和这个 bottom 战时的进行一个隐藏。 哎,这时候大家可能看的更加形象一点了,这个图片就一个比较完整的就给展示出来,当然他可能现在还是稍微有一点偏右,那这这这个的意思可能还是我们这图片设置的尺寸会稍微有一点大,我们调整一下这个尺寸就 ok, 我们继续看一下, 我们把这个四百八,比如说我们来一个四百五,还是 是稍微大了点,四百二,那就四百吧。 ok, 大家这个四百就会比较,嗯,一个完美的一个就是我们数值,就是这整个我们是图片,比如说我们设置的就是一个四百乘八百的这样一个 嗯,尺寸,然后我们上传到我们的网站里头,他就会一个比较完整的,从他的左边、右边、上面、下边都会一个比较完整的形式进行一个呈现 啊。当然我们现在这是因为纯色嘛,我们自己做图的时候肯定会在背景加一些其他的背景图案,嗯,完成这么一个图片的一个设计,这就显得非常的高大上高档。然后这时候我们可以把这个 heading 和 button 给删除掉,哎,啊,我们删除掉是一个纯色的一个展示方式,我们保 存一下, ok, 保存完之后呢,我们到我们的前端,我们把它刷新一下,然后看到这是我们的第一个 slide, 然后呢这个是我们的第二个 slide, 我们照样呢就是大家可以看到在电脑端它现在展示的还是二四零零乘八百, 我们把 inspect 打开,大家能看到在四 k 端他是二四零零乘八百,有一个完整的一个展示,然后随着我们屏幕比例不断的缩小,我们当时设置的断点应该是四百八,大家可以看到我们不断的随着我们不断缩小,哎,一到四百八的时候, 大家发现他就进行呃,替换成了我们设置的这么第二张图片,也就在我们所有的移动端都会以这样的图片进行一个展示,然后呢随着他变大又回到了我们二四零零,哎, 乘八百,这样呢,我们基本就能做到一个至少是一个电脑端和移动端两个都相对比较完美的这样一个展示。 ok, 我们回到这里,大家可以再看一下这样的一个结构,大家也可以在我们这个嗯, deep 里头装一些自己所需要的一些 heading 或者 button 或者一些 tax, 大家都可以根据自己的需要去进行一个添加, 这样呢,相信大家都能设计出一个比较嗯,完美的一个首页的轮播图。 ok, 这个视频就先到这里。