How Can I Use Media Queries for Responsive Layouts in Bootstrap 3?

Harnessing Media Queries for Responsive Layouts in Twitter Bootstrap 3

In Bootstrap 3, media queries play a pivotal role in adapting layouts to diverse screen sizes. For instance, you may want to adjust font sizes based on the screen width. Here's how to achieve this using media queries:

Media Query Selectors for Bootstrap 3

To target specific screen sizes, utilize the following selectors:

• @media(max-width:767px): Screens with a maximum width of 767px
• @media(min-width:768px): Screens with a minimum width of 768px (equivalent to tablets)
• @media(min-width:992px): Screens with a minimum width of 992px (laptops)
• @media(min-width:1200px): Screens with a minimum width of 1200px (large desktops)

Font Size Adjustments

To adjust font sizes according to screen size, use CSS rules within the appropriate media query. For example:

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

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

Note:

Keep in mind that there are hidden classes available in Bootstrap 3 to help with debugging:

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

The above is the detailed content of How Can I Use Media Queries for Responsive Layouts in Bootstrap 3?. For more information, please follow other related articles on the PHP Chinese website!