移动设备的条件 CSS 高度

Question

有没有办法重写此代码，以便当屏幕全屏和平板电脑时，蓝色框边距顶部为-175，如果屏幕是例如iPhone 10或其他移动设备，则边距顶部为-150？

@media screen and (max-width: 767px) {}
.blue-cus-box {
margin-top: -175px !important;
z-index: 999 !important;
}

感谢任何帮助

Answer 1

您是否考虑过仅使用媒体查询？下面的代码片段会在超过 768 像素的任何屏幕尺寸上将边距顶部设置为 -175px。可以在CSS中使用媒体查询的指南，请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

.blue-cus-box {
margin-top: -150px;
}
@media screen and (min-width: 768px) {
.blue-cus-box {
margin-top: -175px;
}
}