CSS 미디어 쿼리

미디어 쿼리는 반응형 웹 디자인에 매우 유용합니다. 모든 사람이 항상 데스크톱을 사용하는 것은 아닙니다. 대부분의 사람들은 온라인에서 하는 일에 대부분의 시간을 휴대폰을 사용하고 있을 것입니다. Using media queries is a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones). 미디어 쿼리를 사용하면 장치 크기에 따라 CSS를 변경할 수 있습니다. 휴대전화로 사이트를 방문하고 방문 페이지 정보를 보기 위해 끝없이 스크롤해야 하는 경우 얼마나 답답한지 알 것입니다.

시작하려면 지정된 미디어 유형을 대상으로 지정하는 데 사용되는 @media 규칙을 사용합니다. 구문은 다음과 같습니다.

@media (condition) {
  // CSS that we want to happen when the condition is met
}

예를 들어 누군가가 데스크톱 대신 모바일 장치를 사용할 때 글꼴 크기를 변경하고 작게 하려면 다음과 같은 미디어 쿼리를 사용합니다.

p {
  font-size: 25px;
}

@media (max-width: 375px) {
  p {
    font-size: 18px;
  }
}

즉, 중단점에 도달하면 정의한 사용자 지정 규칙이 적용됩니다. 다양한 크기의 장치가 많이 있지만 일반적으로 사용되는 장치가 있습니다breakpoints..

• 320px — 480px: 휴대기기
• 481px — 768px: iPad, 태블릿
• 769px — 1024px: 작은 화면, 노트북
• 1025px — 1200px: 데스크탑, 대형 화면
• 1201픽셀 이상 —  초대형 화면, TV

조건에 미디어 유형을 포함할 수도 있습니다(화면을 사용할 가능성이 높음). four categories:

• all — 모든 미디어 유형용
• print — 프린터용
• screen — 컴퓨터 화면, 태블릿 및 스마트폰용
• Speech — 페이지를 소리내어 "읽는"스크린 리더용

이 모든 부분을 종합하면 태블릿에 대한 최종 미디어 쿼리는 다음과 같습니다.

.opening-paragraph {
  font-size: 25px;
}

@media screen and (max-width: 768px) {
  .opening-paragraph {
    font-size: 20px;
  }
}

거의 모든 것에 대한 특정 CSS 규칙을 만들 수 있습니다. 여백, 패딩, 글꼴 크기, 색상 등을 조정할 수 있습니다. 매우 강력합니다. 조금이나마 도움이 되었으면 합니다. 과거에는 일반적으로 응답성을 잘 처리하는 Bootstrap과 같은 라이브러리나 프레임워크를 사용했지만 평범한 오래된 CSS 미디어 쿼리를 사용하는 경우 가장 친한 친구가 될 것입니다. 읽어 주셔서 감사합니다!