如何在 Bootstrap 3 中使用媒體查詢進行響應式佈局？

在Twitter Bootstrap 3 中利用媒體查詢實現響應式佈局

在Bootstrap 3 中，媒體查詢在使佈局適應不同螢幕方面發揮關鍵作用尺寸。例如，您可能想要根據螢幕寬度調整字體大小。以下是使用媒體查詢實現此目的的方法：

Bootstrap 3 的媒體查詢選擇器

要定位特定的螢幕尺寸，請使用以下選擇器：

• @media(max-width:767px)：最大寬度為的螢幕767px
• @media(min-width:768px)：最小寬度為768px的螢幕（相當於平板電腦）
• @media(min-width:992px)：最小寬度的螢幕992px（筆記型電腦）
• @media（最小寬度：1200px）：最小寬度為1200 像素的螢幕（大型桌面）

字體大小調整

要根據螢幕大小調整字體大小，請在適當的範圍內使用CSS 規則媒體查詢。例如：

@media (max-width: 767px) {
  body {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 14px;
  }
}

注意：

請記住，Bootstrap 3 中有隱藏類別可協助除錯：

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

以上是如何在 Bootstrap 3 中使用媒體查詢進行響應式佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！