创建响应式静态 HTML 页面：移动端和 PC 端适配

本指南将向您展示如何创建一个响应式静态 HTML 页面，以适应移动设备和 PC 设备。使用 CSS 的媒体查询，我们可以为不同的屏幕尺寸定制布局和样式，确保用户在所有设备上都能获得最佳体验。

简单的静态 HTML 页面

以下是一个简单的静态 HTML 页面，适配移动端和 PC 端：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>My Responsive Website</title>
    <style>
        /* 共用样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        
        /* 移动端样式 */
        @media only screen and (max-width: 600px) {
            .container {
                padding: 10px;
            }
            
            h1 {
                font-size: 24px;
            }
            
            p {
                font-size: 16px;
            }
        }
        
        /* PC端样式 */
        @media only screen and (min-width: 601px) {
            .container {
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
            }
            
            h1 {
                font-size: 36px;
            }
            
            p {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class='container'>
        <h1>Welcome to My Website</h1>
        <p>This is a responsive website that adapts to both mobile and PC devices.</p>
        <p>Feel free to explore the content!</p>
    </div>
</body>
</html>

代码解释

这个页面包含一个 container 类的容器，其中包含一个标题和一些段落文本。通过使用 @media 查询，我们可以根据屏幕宽度设置不同的样式。在这个例子中，如果屏幕宽度小于等于 600px，将应用移动端样式；如果屏幕宽度大于 600px，将应用 PC 端样式。

移动端样式

在移动端样式中，我们将容器的内边距设置为 10px，并将标题和段落文本的字体大小调整为适合移动设备的尺寸。

PC端样式

在 PC 端样式中，我们将容器的最大宽度设置为 800px，并将容器居中对齐。同时，我们将标题和段落文本的字体大小调整为适合 PC 设备的尺寸。

总结

通过以上方法，无论是在移动设备还是 PC 设备上访问该页面，都能够得到相应的适配效果。您可以根据自己的需要调整样式和媒体查询，创建符合您需求的响应式网页。