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

【问题标题】：Query regarding Responsive web page with Bootstrap grid system and CSS media queries使用 Bootstrap 网格系统和 CSS 媒体查询查询响应式网页
【发布时间】：2019-03-28 10:13:47
【问题描述】：

我用 Bootstrap 创建了一个网站，并根据 col-xs、col-md 使用它的网格系统和 CSS 媒体查询，它是响应式的，但我必须根据媒体查询中的最小宽度设置字体大小当它达到相同媒体查询的最大宽度时，它会变小。如何调整适合该媒体查询中所有屏幕尺寸的字体大小？我是否需要为所有案例编写单独的媒体查询？ Bootstrap Carousel 也是如此。

我想在所有尺寸上实现相似的外观，有可能吗？

【问题讨论】：

标签： html css bootstrap-4 bootstrap-carousel

【解决方案1】：

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

Sass 混合 -

@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 -

【讨论】：