使用Bootstrap网格系统和CSS媒体查询查询响应式网页

Question

我已经用Bootstrap创建了一个网站，并根据col-xs，col-md使用了其网格系统和CSS媒体查询，它具有响应性，但是我不得不根据媒体查询中的最小宽度设置字体大小，当达到相同媒体查询的最大宽度时，使其变小。如何调整适合该媒体查询中所有屏幕尺寸的字体大小？我是否需要针对所有情况编写单独的媒体查询？ Bootstrap Carousel也是如此。

我想在所有尺寸上都达到相似的外观吗？

Answer 1

您可以使用媒体查询来设置不同视口的字体大小。确定基本字体大小，一切都会改变。

无礼的mixins-

@include media-breakpoint-down(xs) {
  body{font-size: 10px;}
}

@include media-breakpoint-down(sm) {
  body{font-size: 14px;}
}

较少-

@media (max-width: @screen-xs) {
  body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
  body{font-size: 14px;}
}

---

您还可以使用CSS VW单位来调整相对于当前视口大小的尺寸。

来自CSS tricks-