《花100块做个摸鱼小网站! 》第十篇—响应式布局适配PC端和移动端

⭐️基础链接导航⭐️

服务器 → ☁️ 阿里云活动地址

看样例 → 🐟 摸鱼小网站地址

学代码 → 💻 源码库地址

一、前言

大家好呀，我是summo，小网站一直有个问题，就是PC端的样式和移动端的样式是两套，并且不能根据显示屏的大小进行动态化布局，如果PC端屏幕非常小就是这样：

如果移动端屏幕非常大就是这样：

总之，这样的效果不是我想要的，我想要是下面这样的：

这个功能我本来以为会很麻烦，实际上还好，已经发布上线了，代码也提交到Gitee了，下面介绍一下我是怎么实现这个响应式布局功能的。

二、响应式布局

**响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。**这个听起来很牛逼，但是小网站想要实现这个功能却很容易，因为小网站的前端是基于ElementUI实现的，而ElementUI本身就支持响应式布局。

也就是说我们只要利用ElementUI的这个特性就可以实现响应式布局。

这是小网站的main区域修改后的代码

<el-main>
  <el-row :gutter="10">
    <el-col :sm="24" :md="20" :lg="20" :xl="20">
      <el-row :gutter="10">
        <el-col
          v-for="(board, index) in hotBoards"
          :key="index"
          :xs="24"
          :sm="10"
          :md="8"
          :lg="6"
          :xl="6">
                <hot-search-board
                  :title="board.title"
                  :icon="board.icon"
                  :fetch-url="board.fetchUrl"
                  :type="board.type"
                /> 
          </el-col>
        </el-row>
      </el-col>

      <el-col :xs="0" :sm="4" :md="4" :lg="4" :xl="4">
            <visitor-log />
            <holiday-calendar />
            <word-cloud />
            <poetry />
            <camera-player />
      </el-col>
   </el-row>
</el-main>

从代码上可以看到，在内容区域和侧边栏区域设置了响应式布局属性，正常情况下两块区域的比例分配是20:4