CSS3 미디어 쿼리 - 추가 예제
CSS3 미디어 쿼리 - 추가 예제
미디어 쿼리를 사용하는 몇 가지 예를 살펴 보겠습니다.
이메일 링크로 작동하는 이름 목록부터 시작하겠습니다. HTML은 다음과 같습니다.
예제 1
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
</style>
</head>
<body>
<ul>
<li><a data-email="[email protected]" href="mailto:[email protected]">John Doe</a></li>
<li><a data-email="[email protected]" href="mailto:[email protected]">Mary Moe</a></li>
<li><a data-email="[email protected]" href="mailto:[email protected]">Amanda Panda</a></li>
</ul>
</body>
</html>
data-email속성을 주목하십시오 . HTML5에서는 접두사가 붙은 속성을 사용하여 data-정보를 저장할 수 있습니다. data-나중에이 속성 을 사용하겠습니다 .
너비 520에서 699 픽셀까지 - 각 링크에 이메일 아이콘 적용
브라우저의 너비가 520 ~ 699px 사이 인 경우 각 이메일 링크에 이메일 아이콘을 적용합니다.
예제 2
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
너비는 700에서 1000px까지입니다.
브라우저의 너비가 700에서 1000px 사이 인 경우 각 이메일 링크 앞에 "이메일 :"텍스트가 붙습니다.
예제 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
너비가 1001px 이상인 경우 - 링크에 이메일 주소 적용
브라우저의 너비가 1001px 이상이면 링크에 이메일 주소가 추가됩니다.
data-개인의 이름 뒤에 전자 메일 주소를 추가하기 위해 특성 값을 사용합니다 .
예제 4
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
폭 1151px 이상 - 이전에 사용한 아이콘 추가
브라우저 너비가 1151px 이상인 경우 이전에 사용한 아이콘을 다시 추가합니다.
여기에서는 추가 미디어 쿼리 블록을 작성할 필요가 없으며 쉼표를 사용하여 기존 미디어 쿼리에 추가 미디어 쿼리를 추가 할 수 있습니다 (이 연산자는 OR 연산자처럼 동작합니다).
보기 5
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}