css自适应屏幕大小

CSS自适应屏幕大小基础概念

CSS自适应屏幕大小是指网页布局能够根据不同设备的屏幕尺寸自动调整，以确保内容在不同设备上都能良好显示。这种技术通常通过媒体查询（Media Queries）、弹性布局（Flexbox）和网格布局（Grid Layout）等技术实现。

类型

媒体查询（Media Queries）：通过CSS媒体查询，可以根据设备的特性（如屏幕宽度、高度、方向等）应用不同的样式。
弹性布局（Flexbox）：Flexbox布局能够使元素在不同屏幕尺寸下灵活调整大小和位置。
网格布局（Grid Layout）：CSS Grid布局提供了二维布局能力，能够创建复杂的自适应布局。

应用场景

响应式网站设计：适用于需要适应不同设备（如手机、平板、桌面）的网站。
移动优先设计：先为移动设备设计，再扩展到更大的屏幕。
单页应用（SPA）：确保在不同设备上都能流畅地展示和交互。

示例代码

以下是一个简单的媒体查询示例，展示了如何根据屏幕宽度调整背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应屏幕大小示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .container {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
        }
        @media (max-width: 600px) {
            .container {
                background-color: lightblue;
            }
        }
        @media (min-width: 601px) and (max-width: 1024px) {
            .container {
                background-color: lightgreen;
            }
        }
        @media (min-width: 1025px) {
            .container {
                background-color: lightcoral;
            }
        }
    </style>
</head>
<body>
    <div class="container">自适应屏幕大小</div>
</body>
</html>