如何让网站内容适配任意屏幕尺寸？解决内容消失问题

问题拆解 #

你想让网站适配所有屏幕（尤其是手机），但之前用了这段代码后，内容下半部分直接消失了：

<div style="background-color: white; width:105%; max-width:1920px; height:200px; margin-left:-8px; overflow: hidden;" > </div>

同时你给出了网站完整代码，需要解决适配问题和内容消失的bug。

为什么会出问题？ #

1. 那个div设置了固定height:200px加overflow:hidden，如果内部内容高度超过200px，超出部分直接被隐藏，这就是内容消失的原因。
2. 当前代码的适配硬伤：
   • 字体全用固定像素（比如70px、40px），小屏幕要么溢出要么显示太大
   • 边距用固定像素（margin-left:50px、100px），手机端内容会偏出屏幕
   • viewport标签放错位置了，应该放在<head>里，现在在外面等于没起作用

修复步骤 #

1. 先解决内容消失问题 #

把那个坑人的div换掉，要么直接删掉，要么改成自适应高度的容器：

<!-- 替换成自适应高度的背景容器 -->
<div style="background-color: white; width:100%; max-width:1920px; margin:0 auto;" > </div>

解释：去掉固定height，用margin:0 auto实现居中，width设100%适配屏幕，max-width限制大屏下的最大宽度，避免内容过度拉伸。

2. 全局适配优化（修改后的完整代码） #

直接用下面的代码替换你的原代码，适配问题和内容消失问题一起解决：

<!DOCTYPE html>
<html>
<head>
    <title> Hello </title>
    <!-- viewport标签移到head里，这是移动端适配的核心 -->
    <meta name='viewport' content="width=device-width, initial-scale=1">
    <style>
        /* 重置浏览器默认样式，避免布局乱掉 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body { 
            font-family: "Arial";
            font-size: 1rem;
        }

        .name{
            overflow: hidden;
            border-right: .01em solid black;
            white-space: nowrap;
            animation: typing 2s forwards;
            font-size: 1.6rem;
            width: 0;
        }
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        .name {
            color: #04143A;
            text-align: center;
            /* 响应式字体：屏幕小自动缩小，最大不超过70px */
            font-size: clamp(2rem, 5vw, 4.375rem);
            font-weight: 600;  
            margin: 1rem 0;
        }

        .info h3 {
            color: #4A90E2;
            text-align: center;
            font-weight: 100;
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            margin: 0 1rem 1rem;
        }

        .skills_1 h3 {
            margin-left: 2rem;
            color: #04143A;
            font-size: clamp(1.2rem, 2.5vw, 1.875rem);
            font-weight: 100;
            margin-top: 1.5rem;
        }

        .list-card {
            font-size: 1rem; 
            margin-left: 2rem; 
        }

        .list {
            color: #4A90E2;
            display: inline-block;
            margin-right: 0.5rem;
        }

        .list-card p {
            color: #091F4E;
            font-size: 1rem; 
            /* 去掉过大的左边距，和父容器对齐 */
            margin-left: 0;
            display: inline-block;
            line-height: 1.5;
        }

        br{
            display: block;
            content: ""; 
            margin-top: 1rem; 
        }

        .job-title {
            font-size: 0.875rem;
            vertical-align: middle;
            background-color: #D9E7F8;
            color: #4A90E2;
            font-weight: 300;
            margin-top: 0.5rem;
            margin-left: 0.5rem;
            border-radius: 5px;
            display: inline-block;
            padding: 0.75rem 1.25rem;
            white-space: nowrap;
        }

        /* 手机端专属优化 */
        @media (max-width: 768px) {
            .skills_1 h3, .list-card {
                margin-left: 1rem;
            }
            .job-title {
                margin-left: 0;
                margin-top: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <div class='intro'>
        <div class="first_last">
            <h1 class="name"> Prajwal Sharma </h1>
        </div>
        <div class="info">
            <h3 class="email">Welcome!
                <span class="job-title">Testing site</span>
            </h3>
        </div>
    </div>
    <div class='skills_1' >
        <h3> Technical Skills </h3>
        <div class="list-card">
            <div>
                <span class="list">+ Hello</span>
                <p>Programming Languages: HTML, Python, C++, JavaScript</p>
                <br>
                <span class="list">+ Hello</span>
                <p>Software Skills: Unity, Photoshop, PyCharm, VisualStudio</p> 
                <br>
                <span class="list">+ Hello</span>
                <p>Programming Languages: HTML, Python, C++, JavaScript</p> 
            </div>
        </div>
    </div>
</body>
</html>

核心优化点 #

• viewport标签归位：必须放在<head>里，让移动端浏览器正确识别屏幕宽度
• 全局样式重置：消除浏览器自带的边距和padding，避免布局混乱
• 响应式字体：用clamp()函数让字体随屏幕大小自动缩放，替代固定像素
• 相对单位替代固定px：用rem、百分比代替固定边距，适配不同屏幕
• 媒体查询：针对手机屏幕（768px以下）调整边距，防止内容溢出
• 移除固定高度和overflow:hidden：容器高度随内容自动调整，再也不会隐藏内容

内容的提问来源于stack exchange，提问作者Prazzy