CSS3 멀티미디어 쿼리 예
CSS3 멀티미디어 쿼리 예제
이 장에서는 몇 가지 멀티미디어 쿼리 예제를 보여드리겠습니다.
시작하기 전에 이메일 주소의 링크 목록을 만들어 보겠습니다. HTML 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>data-email 속성에 주의하세요. HTML에서는 정보를 저장하기 위해 data- 접두사가 붙은 속성을 사용할 수 있습니다.
520~699px 너비 - 이메일 아이콘 추가
브라우저 너비가 520~699px인 경우 이메일 링크 앞에 이메일 아이콘을 추가하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>700~1000px - 텍스트 접두사 정보 추가
브라우저 너비가 700~1000픽셀 사이인 경우 이메일 링크 앞에 "이메일:"이 추가됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>가 1001픽셀 너비보다 큽니다. - 이메일 주소를 추가하세요.
브라우저 너비가 다음과 같은 경우 1001px보다 크면 연결할 이메일 주소 추가 링크 뒤에 표시됩니다.
data- 속성을 사용하여 각 사람의 이름 뒤에 이메일 주소를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>너비가 1151px보다 큼 - 아이콘 추가
브라우저 너비가 1001px보다 크면 아이콘이 사람 이름 앞에 추가됩니다.
예제에서는 추가 쿼리 블록을 작성하지 않았으며 기존 쿼리 미디어 뒤에 쉼표 구분을 사용하여 다른 미디어 쿼리를 추가할 수 있습니다(OR 연산자와 유사):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>
새로운 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>
시사
Clear
- 코스 추천
- 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~
이 강좌를 시청한 학생들도 학습하고 있습니다.
PHP로 사업을 시작하는 방법에 대해 간단히 이야기해 보겠습니다.
웹 프론트 엔드 개발에 대한 빠른 소개
민망한 물건 백과사전 사이트를 모방한 Mini 버전 MVC 프레임워크의 대규모 실용 Tianlongbabu 개발
PHP 실용 개발 시작하기: 빠른 PHP 생성 [중소기업 포럼]
로그인 인증 및 클래식 게시판
컴퓨터 네트워크 지식 수집
빠른 시작 Node.JS 정식 버전
당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]
자신만의 PHP MVC 프레임워크 작성(깊이 있는 40개 장/자세한 내용/초보자가 발전하려면 읽어야 함)