Question

我的网站http://www.andytechguy.com/上有一个奇怪的背景错误。您可以看到，当您使用移动浏览器搜索网站时，顶部的一部分渐变会被切断。我不知道发生了什么，我没有添加任何东西来实现这一点，它看起来并不好。请帮帮忙？

Answer 1

据我所知，您的h2文字在移动版和桌面版上比较大。这可能与字体渲染和1.5em的重复大小有关。

你的背景渐变高70像素。在移动设备上它会重复，因为标题的高度大于70px。

我会像这样修改你的CSS：

CSS

#section h2 {

     /* remove this */
     padding: 20px;

     /* add these two */
     height: 70px;
     line-height: 70px; /* this will vertically align the text */

}

Answer 2

问题是#main_part的固定宽度为1050像素。但该网站的其余部分假设宽度约为980px。（在我的手机上980px）

只需添加如下的css规则：

html {
   width: 1050px;
}

你会注意到顶栏不再被切断。

然而，令人讨厌的水平滚动可能仍然存在（但这次没有空的空间）

这些都不是实际创建响应式网站的替代品。最终是真正的解决方案。我建议您将网站转换为bootstrap吗？

Answer 3

将div移到“容器”类中，并创建自己的自定义类，如下所示：

dialog.getWindow().setLayout(getResources().getDimensionPixelSize(R.dimen.layout_height_400dp), WindowManager.LayoutParams.MATCH_PARENT);

总体而言，写下这个

.custom-container{
    min-width: 100%;
    padding-right: 0;
    padding-left: 0;
}

一部分的背景在移动切断了

3 个答案: