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="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">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;
}
}
게시글 목록
| 번호 | 제목 |
|---|---|
| 3199 | |
| 3198 |
CSS
scale () 메서드
|
| 3197 |
CSS
rotate () 메서드
|
| 3196 | |
| 3195 |
CSS
CSS3 단어 속보
|
| 3194 |
CSS
CSS3 워드 래핑
|
| 3192 |
CSS
css 굵은 글씨 사용
|
| 3191 |
CSS
css 원하는 글꼴 사용하기
|
| 3190 | |
| 3189 | |
| 3188 | |
| 3187 |
CSS
CSS3 상자 그림자 속성
|
| 3186 |
CSS
CSS3 그림자 효과 다섯번째
|
| 3185 |
CSS
CSS3 그림자 효과 네번째
|
| 3184 |
CSS
CSS3 그림자 효과 세번째
|
| 3183 |
CSS
CSS3 그림자 효과 두번째
|
| 3182 |
CSS
CSS3 그림자 효과
|
| 3181 | |
| 3180 | |
| 3179 |
CSS
CSS3 그라디언트 모양 설정
|
| 3178 | |
| 3177 |
CSS
CSS3 그라디언트 두번째
|
| 3176 |
CSS
CSS3 그라디언트
|
| 3175 |
CSS
CSS3 Colors
|
| 3174 | |
| 3173 | |
| 3172 | |
| 3171 | |
| 3170 |
CSS
CSS3 배경 크기
|
| 3169 |
CSS
CSS3 다중 배경
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기