html - 针对不同的移动屏幕分辨率呈现带有文本的横幅图像

Question

您好，我正在开发网页，我发现很难为不同的移动设备宽度设计带有文本的横幅。因此，在移动设备中，我只想在所有移动宽度中显示垂直居中的标题，其余段落、内容和按钮应该下降。由于移动设备将具有不同的宽度，具体取决于对齐方式是否变坏。任何人都可以帮助我在移动设备中呈现此页面的最好方法是什么，标题在顶部，垂直对齐中间，其余段落和按钮应该下降。我正在使用边距，所以请帮助我找到除边距之外的最佳方法。

jsbin 链接:http://jsbin.com/butore/1/edit?html,css,output

Answer 1

好吧，如果我理解你想要的是正确的，我会建议使用媒体查询——你不需要为每个单独的移动宽度设计；那将是可怕的。但是找到您的内容脱离流程的断点，并应用媒体查询来减少该元素的边距等。

或者，您可以添加一个 desktop-only 和 mobile-only，它们会根据您选择的设备宽度而改变。因此，在您的场景中，您的 mobile-only 类将包含您的段落和横幅下方的按钮。

例如:

.desktop-only {
        display:block;
}
.mobile-only {
        display:none;
}
@media screen and (max-width: 45em) {
        .desktop-only {
               display:none;
        }
        .mobile-only {
               display:block; 
        }
}