HTML/CSS入门：如何实现页面盒子及内部所有元素的响应式适配

问题根因 #

你当前页面移动端显示异常的核心原因是：

• 外层.box用了vw/vh做宽高，但padding是固定40px，小屏幕下固定padding会挤压内部内容的可用空间，导致内容错位、溢出
• 底部的图标和文字用了浮动布局，没有做浮动清除，会导致盒子高度计算异常
• 没有给盒子设置最小尺寸限制，屏幕过小时盒子宽度小于内部内容所需的最小宽度，就会出现布局错乱

适配方案 #

按照你需要的「内部文本、元素尺寸固定，仅外层盒子随屏幕自适应」的要求，修改CSS如下：
原有其他样式保持不变，仅修改和新增以下内容：

.box {
    background-color: hsl(216, 50%, 16%);
    /* 桌面端最大宽度，不会过大 */
    max-width: 400px;
    /* 移动端占屏幕90%宽度，左右保留安全边距 */
    width: 90%;
    /* 高度随内容自适应，避免固定vh导致的内容挤压 */
    height: fit-content;
    /* padding随屏幕宽度自适应，最小20px最大40px，保证小屏幕不会占用过多空间 */
    padding: clamp(20px, 5vw, 40px);
    border-radius: 10px;
    /* 底部预留一点内边距，避免内容贴边 */
    padding-bottom: 30px;
}

/* 新增清除浮动规则，解决浮动元素导致的高度异常 */
.box::after {
    content: "";
    display: block;
    clear: both;
}

如果需要完全固定内部文字、图标的像素尺寸，不随系统设置缩放，可以给所有内部元素的字体、宽高都用固定px单位，同时给.box加最小宽度限制即可：

.box {
    /* 其他样式同上 */
    min-width: 280px; /* 保证盒子最小宽度足够放下所有固定尺寸的内部内容 */
}

补充优化建议 #

• 尽量不要用<br>标签做上下间距，改用margin属性控制元素间距，布局可控性更高
• 底部的浮动模块可以用flex布局实现，不用写额外的清除浮动规则，更适合入门学习使用：把底部的两个模块分别包裹在div里，给父元素加display: flex; justify-content: space-between; align-items: center;即可实现左右对齐效果。

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