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): 최소 너비가 1200px인 화면(대형 데스크톱)

글꼴 크기 조정

화면 크기에 따라 글꼴 크기를 조정하려면 적절한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!