网站分屏/窗口缩放时溢出变形，移动端适配失效求解决方案

问题根源 #

网站出现溢出、适配失效的核心原因是硬编码固定尺寸和缺少响应式规则：

• 图片写死width/height，小屏幕下直接超出边界
• 标题字号、图标位置用固定值，不随屏幕尺寸变化
• 横向布局未针对小屏幕调整方向，导致内容挤压

具体修改步骤 #

1. 移除硬编码尺寸，实现元素自适应 #

图片适配

删除HTML中所有图片的width和height属性，在CSS中统一设置：

.img1, .img2, .img3, .img4, .img5, .img6 {
    max-width: 100%;
    height: auto; /* 保持图片宽高比 */
    border-radius: 15px;
}

图片会自动填充容器宽度，不会超出屏幕边界。

主题图标自动靠右

替换#icon的固定左边距为自适应靠右：

#icon {
    width: 30px;
    cursor: pointer;
    display: block;
    margin-left: auto; /* 替换原1750px硬编码值 */
    margin-right: 5vw;
}

超大标题响应式字号

用clamp()函数实现标题随屏幕宽度自动缩放：

h1 {
    font-size: clamp(4rem, 20vw, 15rem); /* 最小4rem，最大15rem，随屏幕宽度动态调整 */
    text-align: center;
    margin: 0;
}

2. 小屏幕布局调整 #

添加媒体查询，在屏幕宽度≤768px时切换为垂直布局：

@media (max-width: 768px) {
    .column, .container, .container1 {
        flex-direction: column;
        gap: 2rem; /* 增加垂直方向的内容间距 */
        padding: 0 1rem; /* 避免内容贴紧屏幕边缘 */
    }

    .column1 {
        flex-direction: column;
        text-align: left !important;
        padding-bottom: 2rem; /* 缩减底部冗余间距 */
    }

    section {
        padding: 50px 1rem; /* 减少上下内边距，适配小屏幕垂直空间 */
    }
}

3. 标题文本响应式优化 #

给其他标题也设置自适应字号，避免小屏幕溢出：

h3 {
    font-size: clamp(2rem, 5vw, 4rem);
    padding-left: 1rem;
    margin: 0;
}

h4 {
    font-size: clamp(1.5rem, 4vw, 3rem);
    padding-left: 1rem;
    font-weight: normal;
    margin: 0;
}

/* 替换HTML中无效的自定义<h>标签为<h2>，并设置样式 */
h2.experience-title {
    font-size: clamp(1.5rem, 4vw, 3rem);
    padding-left: 1rem;
    font-weight: normal;
    margin: 0;
}

4. 全局样式基础优化 #

添加全局盒模型规则，避免内边距、边框导致的溢出：

* {
    box-sizing: border-box; /* 内边距、边框计入元素总宽度 */
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
}

注意事项 #

• 删除HTML中无效的自定义<h>标签，改用合法的标题标签（如<h2>）
• 移除HTML中<br>的错误闭合写法（</br>无效，直接用<br>即可）

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