引导程序-根据屏幕大小应用类

Question

我可以不使用@media only屏幕吗？还是this是最好的方法？

例如，我可以用CSS编写此代码吗？：

@include media-breakpoint-up(md) {
  .card {
    transform: translate(0px, -75px);
    z-index: 200;
  }
}

我还想根据屏幕大小隐藏/显示div。

Answer 1

您可以做的是根据媒体屏幕尺寸创建多个CSS样式表。然后在其中一个特定屏幕尺寸的CSS样式表中，您可以隐藏div。

html中的示例链接：

<link rel = "stylesheet" media="screen and (min-width: 480px) and (max-width: 1920px)" href= "styles/desktop.css"/>

然后在desktop.css中可以拥有：

.card { display = none; }

当屏幕尺寸在480px至1920px之间时，这将隐藏div。

Answer 2

您需要对转换使用媒体查询，但是可以对display属性使用内置的Bootstrap断点。例如。 d-md-none将隐藏大小为md的元素。

Answer 3

为了根据屏幕尺寸显示/隐藏div，bootstrap有一些类适合标准的bootstrap断点，以根据屏幕尺寸显示/隐藏： https://getbootstrap.com/docs/4.0/utilities/display/