打造响应式卡片推荐

1,685 阅读3分钟

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

前言

这段时间逛网站的时候,经常能看到很多响应式布局开发相关的东西。心中一想,不就是响应式布局吗?简单,拿捏。于是乎,便简单地写了一个响应式卡片推荐来耍耍。

代码块

废话不多说,直接给各位看官上代码块和展示效果。(由于是响应式布局,所以在这里展现出来的效果十分局限,因此各位看官可以将代码复制到自己的编辑器中打开后看看效果)

Media - 码上掘金 (juejin.cn)

整体效果如下 media.gif

实现过程

首先来介绍一下何为响应式布局。响应式布局,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

设置响应式布局有如下步骤:设置 Meta 标签;通过媒介查询来设置样式;完成这些步骤,就能完成一个响应式布局。

构建大体框架

第一步就是构建大体框架,我是这样设计卡片的(如下所示)。

 <div class="box">
            <div class="content">
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.1-wFaNNsH_OCBFvGCfloWgHaJ4?w=173&h=231&c=7&r=0&o=5&dpr=2&pid=1.7" alt="" class="quto">
                <p>没有人因为多活几年几岁而变老:人老只是由于他抛弃了理想。岁月使皮肤起皱。失去热情让灵魂出现皱纹。</p>
                <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.0WavTrykz3VRCwWPx1Y1vAHaQC?w=161&h=349&c=7&r=0&o=5&dpr=2&pid=1.7" alt="" class="user">
                <h3>古风汉服</h3>
            </div>
 </div>

这是其中一个卡片相关代码,或者也可以用你自己喜欢的方式构建不同的卡片,然后再来设计不同的样式。

设计样式

卡片搭建好了,接下来就是设计样式了。设计样式在这里其实挺简单的,无非就是水平垂直居中加颜色美化,在这里最关键的一步就是设置 @media 了。

水平垂直居中在面试中是常考的题目,实现的方法有很多种,在这里我用的是面试官最想听到的一个方法,flex 布局。相关代码如下。

 display: flex  //表示该容器内部的元素将按照flex进行布局
 align-items: center  //表示这些元素将相对于本容器水平居中
 justify-content: center  //也是同样的道理垂直居中

@media

颜色相关的样式完全就是看个人发挥了,我使用的是天空蓝,因为它使页面看起来比较温和。这里重点说说 @media。@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。翻译成大白话就是要想适应根据不同的宽高应用不同的属性。下面举个例子。

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这段代码的意思就是如果浏览器窗口的宽度为 600px 或更小时,把 body 元素的背景颜色更改为浅蓝色。到这里大家大致就能理解 @media 的作用了吧。

@media (max-width:1050px) {
    .container{
        justify-content: center;
    }
}
@media (max-width:768px) {
    .container .box{
        width: 100%;
        height: auto;
        padding: 30px 20px;
    }
}

这是本次卡片用到的 @media,这里设置了两个不同的 media。第一个是指在浏览器窗口为 1050px 或者更小时,把 container 盒子设置为使其位于整个容器中央。第二个是指在浏览器窗口为 768px 或者更小时,把 container 下的 box 盒子相关样式改为指定的样式。最终这样就完成了响应式卡片推荐了。

最终一览

代码块 Media - 码上掘金 (juejin.cn)

整体效果 media.gif