如何使引导卡高度敏感

Question

我有一个这样的引导卡：

<div class="card">
     <div class="card-body">
          This is some text within a card body.
     </div>
</div>

我想使身高敏感。例如：对于大屏幕h-70，对于中等设备h-50，我该怎么做。

Answer 1

您可以在CSS之类的媒体查询中使用

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { height:10% }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { height:25% }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { height:50% }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { height:70% }

您还可以根据需要根据屏幕尺寸更改宽度，例如带有maximum width 500px的窗口需要有height of 20%，以便您可以这样写

@media (max-width: 500px) { height:20% }