Question

我的html中有一个视频，我只希望在桌面浏览器上显示，因为我相信从桌面到移动的带宽差异会使移动浏览器有些瘫痪。在html中是否有任何逻辑，或者我可以使用css来定位移动设备？

这是我目前的html：

  <div class="second-section">
    <video class="rocky" autoplay="true" loop>
      <source src="rocky_2.mp4" type="video/mp4">
      <source src="rocky_2.webm" type="video/webm">
    </video>
    <div class="overlay"></div>
  </div>

和我目前的css：

.second-section {
  position: relative;
  height: 100vh;
  background-color: #CD9B9B;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;
  overflow: hidden;
}
.rocky {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background: transparent;
}

是否有任何媒体查询或我可以实现的任何逻辑，以使此视频仅在桌面浏览器中显示？

Answer 1

您可以使用以下媒体查询来不在移动设备中显示second_section div。

除此之外，您还可以在同一媒体查询中显示针对移动设备优化的其他视频片段

@media (min-width:767px) {
    .second-section {
        display:block !important;
    }
    .second-section-mobile {
        display:none !important;
    }
}

@media (max-width: 766px) {
    .second-section {
        display:none !important;
    }
    .second-section-mobile {
        display:block !important;
    }
}

OPTIONALLY - 您可以使用以下行创建更多断点

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
}

是否可以在html / css中定位手持移动设备？

1 个答案: