gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 17:37:11 28 4
gpt4 key购买 nike

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

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

最佳答案

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

或者,您可以添加一个 desktop-onlymobile-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;
}
}

关于html - 针对不同的移动屏幕分辨率呈现带有文本的横幅图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29658502/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com