CSS 미디어 사용법에 대한 자세한 설명-프런트엔드 Q&A-php.cn

CSS 미디어 사용법에 대한 자세한 설명

PHPz

풀어 주다： 2023-04-21 17:05:17

원래의

1711명이 탐색했습니다.

웹사이트 개발에서 CSS의 중요성은 자명합니다. CSS를 사용하여 웹사이트의 스타일, 레이아웃, 글꼴 등과 같은 다양한 모양 속성을 설정하여 웹사이트를 더욱 매력적이고 읽기 쉽게 만들 수 있습니다. 그러나 다양한 장치(예: 데스크톱 컴퓨터, 태블릿, 휴대폰 등)에는 서로 다른 화면 크기와 해상도가 있습니다. 다양한 장치에 대한 CSS 스타일 설정이 없으면 웹사이트 표시 효과가 매우 만족스럽지 못할 수 있습니다.

이 문제를 해결하는 방법 중 하나는 장치마다 다른 CSS 스타일을 작성할 수 있는 CSS Media Query 기능입니다. 이 글에서는 CSS 미디어 쿼리의 기본 개념, 구문, 적용 사례를 심도 있게 소개하여 이 실용적인 기술을 시작할 수 있도록 하겠습니다.

CSS 미디어 쿼리란 무엇입니까

CSS 미디어 쿼리는 다양한 화면 크기와 장치 유형에 적용할 다양한 CSS 스타일을 지정하는 데 사용되는 스타일 시트에 포함된 조건문입니다. CSS Media Query를 통해 반응형 웹사이트 디자인(Responsive Web Design)을 구현할 수 있어 웹사이트가 다양한 디바이스에서 최고의 사용자 경험을 제공할 수 있습니다.

CSS 미디어 쿼리 부분은 미디어 유형과 미디어 기능으로 구성됩니다.

@media mediatype and|not|only (media feature) {
   CSS rules;
}

로그인 후 복사

여기서 mediatype은 스크린, 인쇄, 핸드헬드 등 CSS 스타일을 적용할 미디어 유형을 지정합니다. , 미디어 기능은 CSS 스타일이 적용되도록 지정합니다. 장치 너비, 장치 높이, 방향 등과 같은 미디어 특성입니다.

미디어 유형

미디어 유형은 문서를 렌더링하는 데 사용되는 장치 유형을 나타냅니다. 일반적인 미디어 유형은 다음과 같습니다.

all: 모든 기기에서 작동합니다.
print: 프린터, 인쇄 미리보기 등의 출력 장치에 적합합니다.
screen: 컴퓨터 화면, 태블릿, 스마트폰 및 기타 화면 장치에 적합합니다.
휴대용: 작은 화면을 갖춘 휴대용 장치(예: 스마트폰)에 적합합니다.
speech: 스크린 리더와 같은 사운드 장치에 적합합니다.

미디어 속성

미디어 속성에는 다음이 포함되지만 이에 국한되지는 않습니다.

width: 뷰포트 너비, 단위 px.
height: 뷰포트 높이, 단위 px.
device-width: 장치 너비.
device-height: 장치 높이.
방향: 장치 방향, 가로(수평) 또는 세로(수직).
aspect-ratio: 뷰포트 너비와 높이의 비율입니다.
color: 장치 색상 비트 심도입니다.
해상도: 장치 해상도, 단위 dpi.

위의 두 가지 조합을 통해 다양한 장치 유형 및 화면 속성에 대해 다양한 CSS 스타일을 정의할 수 있습니다.

CSS 미디어 쿼리 사용 예

다음은 다양한 장치 및 화면 특성에 맞게 사용자 정의된 스타일을 포함하는 CSS 미디어 쿼리 사용의 몇 가지 구체적인 예입니다.

1. 기기 유형에 따라 스타일을 다르게 설정하세요

/* 设备为电脑屏幕 */
@media screen and (min-width: 768px) {
   body {
      background-color: #333333;
   }
}

/* 设备为智能手机屏幕 */
@media handheld and (max-width: 599px) {
   body {
      background-color: #ffffff;
   }
}

로그인 후 복사

위의 두 CSS 코드는 각각 컴퓨터 화면과 스마트폰 화면에 서로 다른 배경색을 적용합니다.

2. 장치 방향에 대해 서로 다른 스타일 설정

/* 设备为横向 */
@media screen and (orientation: landscape) {
   body {
      background-color: #f3f3f3;
   }
}

/* 设备为竖向 */
@media screen and (orientation: portrait) {
   body {
      background-color: #ffffff;
   }
}

로그인 후 복사

위의 두 CSS 코드는 장치 방향(가로 또는 세로)에 대해 서로 다른 배경색을 설정합니다.

3. 뷰포트 너비에 따라 서로 다른 스타일 설정

/* 视口宽度大于等于 960px */
@media screen and (min-width: 960px) {
   body {
      font-size: 16px;
   }
}

/* 视口宽度小于 960px */
@media screen and (max-width: 959px) {
   body {
      font-size: 14px;
   }
}

로그인 후 복사

위의 두 CSS 코드는 뷰포트 너비에 따라 서로 다른 글꼴 크기를 적용합니다.

4. 여러 조건 결합

물론 실제 사용에서는 특정 상황에 따라 여러 조건을 결합해야 합니다. 예를 들어 스마트폰에 적합한 로고 이미지를 설정하고 싶지만 장치의 뷰포트 너비가 800px 이하인 경우에만 적용됩니다. 이때 다음 코드를 사용할 수 있습니다.

@media handheld and (max-device-width: 800px), 
(-webkit-min-device-pixel-ratio: 1.5) {
   #logo {
      content:url('logo-for-smartphone.png');
   }
}

로그인 후 복사

이 CSS 코드에서는 handheld and (max-device-width: 800px)和(-webkit-min-device-pixel-ratio: 1.5)두 가지 조건을 사용합니다. 전자는 장치가 휴대용 장치이고 장치 표시 영역 너비가 800px 미만임을 지정합니다. 후자는 WebKit 렌더링 엔진과 호환되며 장치 픽셀 비율을 1.5보다 크게 지정합니다.

요약

CSS 미디어 쿼리 기능은 반응형 웹사이트 디자인의 중요한 부분으로, 다양한 장치 유형과 화면 특성에 맞게 다양한 CSS 스타일을 작성하는 데 도움이 될 수 있습니다. 이 글의 소개를 통해 CSS 미디어 쿼리의 기본 개념, 구문 및 적용 방법을 이해하고 이를 활용하여 웹 사이트 디자인에 보다 세련되고 개인화된 스타일을 제공할 수 있습니다.

위 내용은 CSS 미디어 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!