禁用桌面视图上的css框，但在移动视图上启用

Question

我想添加自定义css以禁用桌面视图上的浮动框，但在移动视图上启用。 继承人css：

.floating-box {
position: fixed;
bottom: 0px;
 left: 50%;
 .transform(translateX(-50%));
.clearfix();
background-color: #000;
 border-radius: @globalBorderRadius @globalBorderRadius 0px 0px;
padding: 10px 10px 8px 10px;
z-index: 9999;
width: 1100px;
}

我应该添加什么来实现它？

Answer 1

您可以使用css媒体查询，并设置最大宽度

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

    .floating-box {

    }
}

Answer 2

使用CSS媒体查询。对于宽度大于768px（标准桌面宽度大小），将可见性设置为隐藏并显示为无。对于移动设备和平板电脑视图，请以正常格式编写css代码。

@media screen and (min-width: 768px) {
  .floating-box {
    visibility: hidden;
    display: none;
    /* your any other css styles */
  }
}