다양한 화면 크기에 대해 효과적인 CSS 미디어 쿼리를 작성하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

다양한 화면 크기에 대해 효과적인 CSS 미디어 쿼리를 작성하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-25 13:46:11

원래의

750명이 탐색했습니다.

How to Write Effective CSS Media Queries for Different Screen Sizes?

화면 크기에 대한 CSS 미디어 쿼리: 종합 가이드

다양한 화면 크기에 원활하게 적응하는 레이아웃을 개발하는 것은 최신 반응형 디자인의 초석입니다. . 이 기술을 익히려면 CSS 미디어 쿼리를 이해하고 효과적으로 활용하는 것이 가장 중요합니다.

화면 크기 정의

이 시나리오에서는 대상 화면 크기가 나열됩니다. as:

640x480
800x600
1024x768
1280x1024(이상)

쓰기 효과적인 미디어 쿼리

창 너비에 따라 조정되는 레이아웃을 만들기 위해 미디어 쿼리가 사용됩니다. 제공된 코드 샘플에는 미디어 쿼리가 포함되어 있지만 올바르게 구성되지 않았습니다. 수정 사항은 다음과 같습니다.

수정된 미디어 쿼리:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width: 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  /* Styles */
}

로그인 후 복사

추가 리소스: