미디어 쿼리를 사용하여 부트스트랩에서 글꼴 크기를 어떻게 반응적으로 조정할 수 있습니까?

미디어 쿼리를 사용하여 Bootstrap에서 반응적으로 글꼴 크기 조정

Bootstrap 3은 개발자가 화면 크기에 따라 스타일을 수정할 수 있도록 미디어 쿼리를 제공합니다. 미디어 쿼리를 사용하여 글꼴 크기를 조정하려면:

Bootstrap 3

1. 다음 미디어 쿼리를 사용하세요. 선택기:

@media (max-width: 767px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

2. 예:

@media (min-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
}

Bootstrap 4

1. 사용 수행원 선택기:

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

2. "매우 작음"이 기본값이므로 XS 크기를 먼저 코딩한 다음 미디어 쿼리로 재정의합니다.

부트스트랩 5

1. 다음을 사용하세요 선택기:

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}

2. 예:

@media (min-width: 992px) {
  h1 {
    font-size: 1.75rem;
  }
}

참고: 이러한 선택기는 Bootstrap 버전 3.4부터 일관되게 유지되었습니다. 1, 4.6.0, 5.3.0.

위 내용은 미디어 쿼리를 사용하여 부트스트랩에서 글꼴 크기를 어떻게 반응적으로 조정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!