响应式布局中移动端媒体查询的段落无法占满屏幕宽度如何解决

问题根源 #

你的.son类的全局样式预设了padding: 0 5%的左右内边距，该规则在≤410px的媒体查询中没有被覆盖，内边距占据了横向空间，所以段落无法真正占满屏幕全宽。

解决方法 #

修改max-width:410px对应的媒体查询规则，为.son新增清除内边距的声明即可：

@media (max-width:410px){
    .daughter img{
        padding:10%;
        box-sizing: border-box;
    }
    .son{
        border:1px solid red;
        padding: 0; /* 新增该行覆盖全局的左右内边距 */
    }
}

你已经全局设置了box-sizing: border-box，红色边框会被计算在100%宽度内，不会出现横向溢出的问题。

可选优化 #

你HTML代码中插入的多个<br>标签建议替换为CSS的margin属性控制间距，适配不同屏幕时调整更灵活。

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