다양한 화면 크기나 기기에 다양한 CSS 스타일을 적용하려는 경우 @media규칙, 특히 규칙을 사용하세요 @media screen. 이를 통해 너비, 높이, 방향 등과 같은 다양한 화면 특성을 기반으로 다양한 화면 크기에 대해 다양한 스타일을 설정할 수 있습니다.
특히 @media screen규칙은 CSS에서 웹 페이지가 다양한 장치에서 최적으로 보이고 배치되도록 반응형 디자인을 만드는 데 사용됩니다. 다양한 CSS 규칙을 정의하여 특정 화면 크기 범위 내에서 다양한 스타일을 적용할 수 있습니다.
다음은 규칙을 사용하는 방법을 보여주는 간단한 예입니다 @media screen.
/* 默认样式 */
body {
font-size: 16px;
background-color: white;
color: black;
}
/* 在屏幕宽度小于或等于 768px 时应用的样式 */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
background-color: lightgray;
}
h1 {
font-size: 24px;
}
}
/* 在屏幕宽度大于 1200px 时应用的样式 */
@media screen and (min-width: 1200px) {
body {
font-size: 20px;
background-color: beige;
}
}
이 예에서는 화면 너비가 768px 이하인 경우 텍스트 글꼴 크기는 14px이 되고 배경색은 연한 회색이 됩니다. 화면 너비가 1200px보다 크면 텍스트 글꼴 크기는 20px이 되고 배경색은 베이지색이 됩니다.
다양한 화면 크기와 장치에 적응하기 위해 필요에 따라 다양한 미디어 쿼리 조건을 설정할 수 있습니다. 이러한 방식으로 모든 종류의 화면에서 우아하게 보이는 반응형 디자인을 얻을 수 있습니다.
구체적인 예는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width",initial-scale=1,maxinum-scale=1.0,user-scalable=”no”>
<!--指定页头信息-->
<title>使用CSS图片</title>
<style>
/*当屏幕宽度大于800像素时*/
@media screen and (min-width: 800px) {
.bcImg {
background-image:url(m3.jpg);
background-repeat: no-repeat;
height: 500px;
}
}
/*当屏幕宽度小于等于800像素时*/
@media screen and (max-width: 800px) {
.bcImg {
background-image:url(m4.jpg);
background-repeat: no-repeat;
height: 500px;
}
}
</style>
</head>
<body>
<div class="bcImg"></div>
</body>
</html>
효과는 다음과 같습니다.
