用 Flex、Grid、媒体查询实现响应式布局

前端

2023-11-29 06:32:16

随着移动设备的普及，网站需要适应不同尺寸的屏幕。响应式布局是一种设计方法，可以使网站在不同的屏幕尺寸下都能正常显示。

Flex 布局

Flex 布局是一种一维的布局模型，它可以使元素在水平或垂直方向上排列。Flex 布局的优势在于它可以轻松地创建复杂的布局，并且可以根据屏幕尺寸自动调整元素的大小和位置。

Grid 布局

Grid 布局是一种二维的布局模型，它可以使元素在水平和垂直方向上排列。Grid 布局的优势在于它可以创建更加复杂的布局，并且可以更精确地控制元素的大小和位置。

媒体查询

媒体查询是一种 CSS 规则，它可以根据屏幕的尺寸、方向或其他特性来改变网站的样式。媒体查询可以用来创建针对不同设备的特定样式，从而使网站在不同的设备上都能正常显示。

使用 Flex、Grid、媒体查询实现响应式布局

首先，我们需要创建一个基本 HTML 结构。这个结构应该包含一个容器元素和多个子元素。
然后，我们需要使用 Flex 布局或 Grid 布局来对容器元素和子元素进行布局。
最后，我们需要使用媒体查询来针对不同设备创建不同的样式。

示例

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 auto;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .item {
    flex: 1 1 auto;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
  }
}