CSS3 멀티미디어 쿼리 예


이 장에서는 몇 가지 멀티미디어 쿼리 예제를 보여 드리겠습니다.

시작하기 전에 이메일 주소의 링크 목록을 만들어 보겠습니다. HTML 코드는 다음과 같습니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

데이터 이메일 속성. HTML에서는 data- 접두사가 붙은 속성을 사용하여 정보를 저장할 수 있습니다. data-email 属性。在 HTML 中我们可以使用带 data- 前缀的属性来存储信息。

520 到 699px 宽度 - 添加邮箱图标

当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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="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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

700 到 1000px - 添加文本前缀信息

当浏览器的宽度在 700 到 1000px, 会在邮箱链接前添加 "Email: ":

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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="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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

大于 1001px 宽度 - 添加邮件地址

当浏览器的宽度大于 1001px 时，会在链接后添加邮件地址接。

我们会使用 data-

폭 520~699px - 편지함 아이콘 추가

브라우저 너비가 520~699px인 경우 편지함 링크 앞에 메일 아이콘을 추가하세요.

Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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="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>

인스턴스 실행»

"실행"을 클릭하세요. 인스턴스" 온라인 예시 보기 버튼

700~1000px - 텍스트 접두사 정보 추가

브라우저의 너비가 700~1000px이면 이메일 링크 앞에 "이메일:"이 추가됩니다.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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="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>

예제 실행 »

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

너비가 1001px보다 큼 - 이메일 주소를 추가하세요


브라우저의 너비가 1001px보다 크면 이메일 주소가 링크 뒤에 추가하겠습니다.

data- 속성을 ​​사용하여 각 사람의 이름 뒤에 이메일 주소를 추가합니다:

🎜Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행»🎜🎜보려면 "인스턴스 실행" 버튼을 클릭하세요. 온라인 인스턴스🎜 🎜🎜🎜1151px보다 큰 너비 - 아이콘 추가 🎜🎜브라우저의 너비가 1001px보다 크면 사람 이름 앞에 아이콘이 추가됩니다. 🎜🎜예제에서는 추가 쿼리 블록을 작성하지 않았습니다. 기존 쿼리 미디어 뒤에 쉼표 구분을 사용하여 다른 미디어 쿼리를 추가할 수 있습니다(OR 연산자와 유사). 🎜🎜🎜Example🎜🎜rrreee🎜🎜🎜예제 실행» 🎜🎜온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요. 🎜🎜🎜더 많은 예제 🎜🎜🎜🎜웹 페이지 사이드바의 메일링 목록 링크 사용🎜이 예제에서는 웹페이지 왼쪽 사이드바에 메일링 링크 목록을 추가합니다. . 🎜🎜🎜🎜