MST
星途 面试题库

面试题：CSS布局与响应式设计面试题

使用Flexbox和Grid两种布局方式分别实现一个三列布局，要求中间列自适应宽度，两侧列固定宽度为200px。并且说明在响应式设计中，如何根据不同屏幕尺寸（如手机、平板、桌面）切换这两种布局方式，以达到最佳用户体验。
11.9万 热度难度
前端开发CSS

知识考点

AI 面试

面试题答案

一键面试

Flexbox布局实现三列布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
        }

        .left,
        .right {
            width: 200px;
            background-color: lightblue;
        }

        .middle {
            flex: 1;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="middle">Middle</div>
        <div class="right">Right</div>
    </div>
</body>

</html>

Grid布局实现三列布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: grid;
            grid-template-columns: 200px auto 200px;
        }

        .left,
        .right {
            background-color: lightblue;
        }

        .middle {
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="middle">Middle</div>
        <div class="right">Right</div>
    </div>
</body>

</html>

响应式设计中切换布局方式

可以使用媒体查询（Media Queries）来根据不同屏幕尺寸切换布局方式。

  1. 手机屏幕（一般小于 768px）：考虑到手机屏幕宽度较窄，为了更好的用户体验，可能将三列布局改为堆叠布局，即一列显示。
@media (max-width: 768px) {
    .container {
        display: block;
        /* 或者使用flex，设置flex-direction: column */
    }
    .left,
    .middle,
    .right {
        width: 100%;
    }
}
  1. 平板屏幕（一般在 768px 到 1024px 之间）：可以根据平板屏幕宽度，选择Flexbox或Grid布局，并调整列的排列方式，例如将左右列放在上下位置，中间列在中间。
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    .left,
    .right {
        width: 100%;
    }
    .middle {
        order: -1;
    }
}
  1. 桌面屏幕（一般大于 1024px）：保持Flexbox或Grid的三列布局方式不变。
@media (min-width: 1024px) {
    /* Flexbox布局 */
    .container {
        display: flex;
    }
    .left,
    .right {
        width: 200px;
    }
    .middle {
        flex: 1;
    }

    /* 或者Grid布局 */
    .container {
        display: grid;
        grid-template-columns: 200px auto 200px;
    }
}

这样通过媒体查询，可以根据不同设备屏幕尺寸，灵活切换布局方式，以达到最佳用户体验。