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="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;
}
}
게시글 목록
| 번호 | 제목 |
|---|---|
| 3168 | |
| 3167 | |
| 3166 | |
| 3165 |
HTML
HTML5 로컬 저장소
|
| 3164 |
HTML
HTML5 드래그 앤 드롭
|
| 3163 | |
| 3162 |
HTML
YouTube 동영상 ID
|
| 3161 |
HTML
HTML 도우미 (플러그인)
|
| 3160 | |
| 3159 |
HTML
HTML5 비디오
|
| 3158 |
HTML
HTML 멀티미디어 오디오 형식
|
| 3157 |
HTML
HTML 멀티미디어
|
| 3156 |
기타
Google 아이콘
|
| 3155 |
기타
부트 스트랩 아이콘
|
| 3154 |
기타
아이콘을 추가하는 방법
|
| 3153 | |
| 3152 |
반응형
부트 스트랩 <abbr>
|
| 3151 |
반응형
부트 스트랩 <mark>
|
| 3150 | |
| 3149 |
반응형
부트 스트랩의 기본 설정
|
| 3148 |
반응형
부트 스트랩 그리드 시스템
|
| 3147 |
CSS
왼쪽에 툴팁 나오게 하는 소스
|
| 3146 | |
| 3145 |
CSS
css를 이용한 툴팁만들기
|
| 3144 | |
| 3143 | |
| 3142 | |
| 3136 |
CSS
css 이미지 갤러리
|
| 3135 |
CSS
CSS 드롭 다운
2
|
| 3134 |
CSS
css 기본 툴팁
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기