个人作品集着陆页移动端响应式布局错乱问题咨询

问题站点：个人作品集站点
问题表现：宽屏显示正常，窗口缩小/移动端视图下板块布局错乱

现存问题定位 #

• 网格列宽设置不合理：.all-projects 固定写为 grid-template-columns: repeat(3, 35%)，三列总宽度达105%，本身就超出容器宽度，小屏下无适配规则直接触发溢出错乱
• 属性冲突冗余：给grid布局容器添加flex-direction这类flex专属属性，存在跨浏览器渲染兼容风险
• 固定尺寸无适配：项目标题、副标题使用固定rem字号，图片容器写死500px高度，移动端会出现文字溢出、图片占比过高挤压其他内容的问题
• 视口单位使用不规范：容器宽度固定为80vw，无最大宽度限制，极小屏下内容易出现过度挤压
• 间距控制混乱：同时用容器宽度、子项margin控制间距，不同尺寸下容易出现偏移、留白不均问题

修复后完整代码 #

直接替换原有项目板块CSS即可：

/* project section */
#projects {
    background: linear-gradient(120deg, transparent , goldenrod);
}
#projects .projects{
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px;
    box-sizing: border-box;
}
#projects p{
    color: #000;
}
#projects .projects-header h1{
    margin-bottom: 5px;
}
#projects .all-projects{
    display: grid;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
}
#projects .project-item{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
}
#projects .project-info{
    padding: 30px;
    flex-basis: 50%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(to right, transparent, goldenrod);
    box-sizing: border-box;
}
#projects .project-info h1{
    font-size: clamp(1.8rem, 5vw, 4rem);
    font-weight: 600;
    margin: 0;
}
#projects .project-info h2{
    font-size: clamp(1rem, 3vw, 2rem);
    font-weight: 700;
    margin-top: 10px;
    letter-spacing: clamp(2px, 1vw, 10px);
    text-shadow: 0 0 10px black,
    0 0 20px black,
    0 0 40px gold,
    0 0 80px gold,
    0 0 100px black;
}
#projects .project-img{
    flex-basis: 50%;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
}
#projects .project-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s ease transform;
}
#projects .project-img:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: .4;
}
#projects .project-item:hover .project-img img{
    transform: scale(1.1);
}
#projects .project-item:hover .project-img::after {
    opacity: 0;
}

/* 平板端适配 */
@media screen and (max-width: 992px) {
    #projects .all-projects {
        grid-template-columns: repeat(2, 1fr);
    }
    #projects .projects {
        padding: 60px 20px;
    }
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    #projects .all-projects {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    #projects .project-info {
        padding: 20px;
        align-items: center;
        text-align: center;
    }
}
/* project section end */

优化说明 #

• 用1fr弹性网格单位替代固定百分比列宽，从根源解决列宽总和超出容器导致的横向溢出问题，用gap统一控制项目卡片间距，避免margin带来的布局偏移
• 用clamp()函数设置响应式字号、字间距，字号会随视口宽度在设定区间内自动调整，不会出现移动端文字过大溢出、过小难以识别的问题
• 用aspect-ratio宽高比属性替代图片容器固定500px高度，图片区域会随容器宽度自适应等比缩放，不会出现小屏图片占满视口挤压其他内容的问题
• 增加两个响应式断点：992px以下平板视图切换为2列布局，576px以下移动端视图切换为单列布局，符合不同尺寸设备的浏览习惯
• 给容器添加box-sizing: border-box和左右内边距，避免内容贴边、内边距撑大容器导致的溢出问题
• 清理grid容器上无效的flex专属属性，规避不同浏览器下的渲染兼容问题

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