css - 手机端定宽响应式设计

Question

我的设计有点问题。您可以访问here并从检查元素中检查，然后单击“切换设备模式”。设置为 320 x 568，然后尝试向左交换。

你可以看到右侧的空白区域:

如何让它固定宽度？

Answer 1

您可以看到“行”类，这是产生间隙的原因，因为它需要额外的匹配。做一件事在你的CSS中添加这个

.row{margin:0px !important;}

还有一个 h2 部分 (Keunggulan)，它采用 3em 大小，并且低于 320，它占用空白，所以更好的解决方案是在媒体查询中减小它的大小，你是完成。

媒体查询引用

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
   section h2{font-size: 2.5em;} /*adjust according to your need*/
}