蓝桥杯前端Web赛道-自适应页面

蓝桥杯前端Web赛道-自适应页面

题目链接：1.自适应页面 - 蓝桥云课 (lanqiao.cn)

先看题目要求：

简单的来说就是需要完成上面规定的布局和要求当800px及以下的时候要显示移动端布局来完成下面gif的效果，那么我们先一步一步来

首先想到的就是使用媒体查询来完成当800px的时候改变页面的布局

媒体查询通俗易懂的来说就是可以针对不同的屏幕尺寸设置不同的样式，非常符合当前题目的要求。它是css3出现的新语法，以下链接可以学习它的用法

@media - CSS：层叠样式表 | MDN (mozilla.org)

确定了大概的方向之后，我们再来观察这个页面需要我们做什么事情，先通过

控制台的这个地方帮助我们调到800px的大小

通过观察和对比可以发现

• 需要将导航栏从横向排列变成了竖向排列
• 以及下面的文字和图片应该从横向排列变成竖向排列

容易想到使用flex布局来完成要求，这样能够快速并且不添加冗余的代码来完成要求

那么我们先改变导航栏和下面内容的排布

值得注意的是第44行左右有媒体查询的语法，即使不记得也可以复制一份

@media (max-width: 800px) {
   
  .collapse,
  .row {
   
    display: flex;
    flex-direction: column;
  }
}

以上代码的效果如下