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;
}
}
게시글 목록
| 번호 | 제목 |
|---|---|
| 2952 |
HTML
zencoding
|
| 2951 | |
| 2950 |
HTML
html table 2
|
| 2949 |
HTML
HTML Table 1
|
| 2948 |
HTML
HTML 파일 경로
|
| 2947 |
HTML
HTML <script> 태그
|
| 2946 |
HTML
Iframe 구문
|
| 2945 |
HTML
html 하이퍼링크2
|
| 2944 |
HTML
html 하이퍼링크 1
|
| 2943 |
HTML
HTML comment 태그
|
| 2942 | |
| 2941 | |
| 2940 | |
| 2939 |
HTML
짧은 인용문을위한 HTML
|
| 2938 |
HTML
HTML 서식 예제
|
| 2937 |
HTML
HTML 서식 요소
|
| 2936 | |
| 2935 |
HTML
HTML 줄 바꿈
|
| 2934 | |
| 2933 |
HTML
Headings 에 중요성
|
| 2932 |
HTML
HTML 스타일 속성
|
| 2931 |
HTML
HTML <pre> 요소
|
| 2930 |
HTML
HTML 줄 바꿈
|
| 2929 | |
| 2928 |
CSS
CSS 코멘트 삽입
|
| 2927 |
CSS
CSS 기본 문법
|
| 2926 |
HTML
HTML addr
|
| 2925 |
HTML
HTML 서식 요소
|
| 2924 |
기타
디바이스별 해상도
|
| 2923 |
HTML
HTML 이미지 img 태그
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기