css适配手机屏幕大小

CSS适配手机屏幕大小

基础概念

CSS（层叠样式表）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。适配手机屏幕大小是指通过CSS技术使网页在不同尺寸和分辨率的手机屏幕上都能良好显示。

类型

媒体查询（Media Queries）：通过CSS3的媒体查询功能，可以根据设备的特性（如屏幕宽度、高度、分辨率等）应用不同的样式。
弹性布局（Flexbox）：通过Flexbox布局，可以使元素在不同屏幕尺寸下灵活调整位置和大小。
网格布局（Grid Layout）：CSS Grid布局提供了二维布局的能力，能够更精细地控制网页在不同屏幕尺寸下的布局。

应用场景

移动网站：确保网页在手机浏览器中能够良好显示。
响应式网页设计：适用于需要同时支持桌面和移动设备的网站。
单页应用（SPA）：确保单页应用在不同设备上都能流畅运行。

示例代码

以下是一个使用媒体查询和Flexbox实现响应式布局的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .box {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
        }
        @media (min-width: 600px) {
            .box {
                width: 45%;
            }
        }
        @media (min-width: 900px) {
            .box {
                width: 30%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
    </div>
</body>
</html>