时间戳

首页 > 解决方案 > 移动设备的条件 CSS 高度

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

问题描述

有没有办法重写这段代码，所以当屏幕是全屏和平板电脑时，蓝色-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;
}

感谢任何帮助

标签： htmlcssmobileconditional-statements

解决方案

您是否考虑过只使用媒体查询？下面的代码片段将在任何超过 768px 的屏幕尺寸上将 margin-top 设置为 -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;
  }
}

推荐阅读