html - 移动设备的条件 CSS 高度

Question

有没有办法重写此代码，以便当屏幕为全屏和平板电脑时，blue-cus-box margin-top 为 -175，如果屏幕为 iPhone 10 或其他移动设备，则margin-top 是-150？

@media screen and (max-width: 767px) {}

.blue-cus-box {
  margin-top: -175px !important;
  z-index: 999 !important;
}

感谢任何帮助

Answer 1

您是否考虑过只使用媒体查询？下面的代码片段会在超过 768 像素的任何屏幕尺寸上将边距顶部设置为 -175 像素。可以在此处找到在 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;
  }
}