使用HTML CSS构建类移动APP UI网站的移动端适配问题求助

你代码中多处写死的最小宽度规则是移动端无法自适应的核心原因，按以下步骤修改即可：

• 移除所有大于移动设备常规宽度的强制最小宽度配置
• 给body添加margin: 0消除浏览器默认边距导致的宽度溢出
• 调整footer宽度规则和主容器保持一致，避免底部栏撑宽页面

核心CSS修改 #

/* 可选全局配置，避免边框、内边距撑宽元素，建议加在CSS最顶部 */
* {
  box-sizing: border-box;
}

/* 修改后的body */
body{
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #dee2e6a1!important;
}
/* 修改后的section */
section{
    min-height: 100px;
    width: 100%;
    max-width: 480px;
    background: white;
    position: relative;
}
/* 修改后的footer */
.footer{
    position: fixed;
    bottom:0;
    width: 100%;
    max-width:480px;
    height:60px;
    font-size: 11px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    background-color: #e1ecfb;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 2px solid #7fa1d166;
}

HTML修改 #

找到行内样式写了固定宽度的row元素，删除min-width配置：

<!-- 修改前 -->
<div class="row data_produk" id="data_produk" style="text-align: center;min-width:480px;">
<!-- 修改后 -->
<div class="row data_produk" id="data_produk" style="text-align: center;">

修改后桌面端访问时主容器最大宽度保持480px，移动端会自动适配屏幕宽度，不会出现横向滚动或者内容溢出的问题。

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