js让网页适应屏幕大小

基础概念

为了让网页适应不同大小的屏幕，通常会使用响应式设计（Responsive Design）技术。响应式设计是一种网页设计方法论，旨在使网页能够根据设备的屏幕尺寸和分辨率自动调整布局和内容。

类型

媒体查询（Media Queries）：CSS3中引入的特性，允许根据不同的屏幕尺寸应用不同的样式。
弹性布局（Flexbox）：CSS3布局模块，使元素在不同屏幕尺寸下灵活排列。
网格布局（Grid Layout）：CSS3的另一布局模块，提供更强大的二维布局能力。
视口单位（Viewport Units）：如vw, vh, vmin, vmax，根据视口大小调整元素尺寸。

应用场景

移动优先设计：先为小屏幕设计，再逐步扩展到大屏幕。
桌面优先设计：先为大屏幕设计，再适配小屏幕。
全栈布局：同时考虑所有设备的布局需求。

示例代码

以下是一个简单的示例，展示如何使用媒体查询和视口单位来使网页适应屏幕大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web Design</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 90%;
            margin: 0 auto;
        }
        .box {
            padding: 20px;
            background-color: #f0f0f0;
            margin-bottom: 20px;
        }
        /* 媒体查询示例 */
        @media (min-width: 768px) {
            .container {
                width: 70%;
            }
        }
        @media (min-width: 1024px) {
            .container {
                width: 50%;
            }
        }
        /* 视口单位示例 */
        .responsive-box {
            height: 50vh; /* 高度为视口高度的一半 */
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">这是一个响应式盒子</div>
        <div class="responsive-box"></div>
    </div>
</body>
</html>