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 699px로에서 폭 - 각 링크에 이메일 아이콘을 적용
브라우저의 폭이 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로에서 폭 - 텍스트와 링크를 머리말
브라우저의 폭이 1000px로 700 사이에있을 때, 우리는 텍스트와 각 이메일의 링크 서문 것 "이메일 :":
예 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;
}
}
»그것을 자신을 시도 
더 예
웹 페이지의 사이드 바의 이메일 링크 목록을 사용하여
이 예제는 웹 페이지의 왼쪽 사이드에 이메일 링크 목록을 넣습니다.