基于屏幕分辨率的条件css设置

Question

我是后端开发人员，我的前端技能很弱，试图创建一个应该附加到信息框的向上箭头。

我当前的保证金设置，在大多数显示器上显示正常。

然而，在我的IMAC上，我看到了一个差距（分辨率为2560×1440）

如何说明条件设置？如果显示小于1920x1080 margin-top应为-1.5％，如果更多使用-1％

这是我的箭头的CSS。

.info-box:after {
              content: ' ';
              width: 0px;
              height: 0px;
              border-top: 10px solid transparent;
              border-left: 10px solid transparent;
              border-bottom: 20px solid;
              border-bottom-color: #FFFFFF;
              border-right: 10px solid transparent;
              margin-top: -1.5%;
              left: 8%;
              position: absolute;
              z-index: 10000;
            }

谢谢

Answer 1

使用：          @media（最大宽度：1920）（

           .your class {
              margin-top: ... 
           } 
      } 

定义属性，包括显示文档的最大宽度。

Answer 2

使用此.. ..

rails new <app_name> -d mysql

同样使用@media screen and (min-width: 1920px) { .info-box:after { content: ' '; width: 0px; height: 0px; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 20px solid; border-bottom-color: #FFFFFF; border-right: 10px solid transparent; margin-top: -1.5%; left: 8%; position: absolute; z-index: 10000; } }

Answer 3

更好的解决方案可能是在此实例中使用-10px边距而不是％。这可能是由于从较大的视口或容器中获取％。

.info-box:after {
    margin-top: -10px;
}

如果您愿意，可以使用媒体查询：

.info-box:after {
    margin-top: -1%;
}
@media (max-width:1920px) and (max-height:1080){
    .info-box:after{
        margin-top:1.5%
    } 
}

Answer 4

你可以这样做 -

＆＃13;

＆＃13;

@meida-screen and (min-width: 1920px) {
.info-box:after {
              content: ' ';
              width: 0px;
              height: 0px;
              border-top: 10px solid transparent;
              border-left: 10px solid transparent;
              border-bottom: 20px solid;
              border-bottom-color: #FFFFFF;
              border-right: 10px solid transparent;
              margin-top: -1.5%;
              left: 8%;
              position: absolute;
              z-index: 10000;
            }
  }

＆＃13;

＆＃13;

＆＃13;