CSS3 基础（015_媒体查询 - 示例）

来源：互联网发布：陈奕迅专辑知乎编辑：程序博客网时间：2024/05/29 02:41

原始网址：http://www.w3schools.com/css/css3_mediaqueries_ex.asp

翻译：

CSS3 媒体查询 - 示例（CSS3 Media Queries - Examples）

CSS3 媒体查询 - 更多示例（CSS3 Media Queries - More Examples）

请查看使用 media queries 的更多示例。
我们以名称列表开始，该名称列表的功能实为邮件链接。HTML 如下：

<!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 至 699 像素之间时，我们将对每个邮件链接应用邮件图标：

@media screen and (max-width: 699px) and (min-width: 520px) {    ul li a {        padding-left: 30px;        background: url("http://www.w3schools.com/css/email-icon.png") left center no-repeat;    }}

<!DOCTYPE html><html><head><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("http://www.w3schools.com/css/email-icon.png") left center no-repeat;    }}</style></head><body>    <h1>Resize the browser window to see the effect!</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 至 1000 像素 - 以文本为链接的开头

当浏览器的宽度在 700 至 1000 像素之间时，我们将以文本 "Email: " 作为每个邮件链接的开头：

@media screen and (max-width: 1000px) and (min-width: 700px) {    ul li a:before {        content: "Email: ";        font-style: italic;        color: #666666;    }}

<!DOCTYPE html><html><head><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("http://www.w3schools.com/css/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>Resize the browser window to see the effect!</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>

宽度在 1001 像素之上 - 应用邮件地址作为链接

当浏览器的宽度在 1001 像素之上时，我们将对链接附上邮件地址。
我们将使用 data- 属性的值在人名之后添加邮件地址：

@media screen and (min-width: 1001px) {    ul li a:after {        content: " (" attr(data-email) ")";        font-size: 12px;        font-style: italic;        color: #666666;    }}

<!DOCTYPE html><html><head><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("http://www.w3schools.com/css/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>Resize the browser window to see the effect!</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>

宽度在 1151 像素之上 - 添加我们之前使用过的图标

对于浏览器的宽度在 1151 像素之上，我们将再次添加我们之前使用过的图标。
在此，我们不必写一个额外的媒体查询块，我们可以用 ,（类似于 OR 操作符）将这个额外的媒体查询附于已存在的媒体查询块之后：

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {    ul li a {        padding-left: 30px;        background: url("http://www.w3schools.com/css/email-icon.png") left center no-repeat;    }}

<!DOCTYPE html><html><head><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("http://www.w3schools.com/css/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>Resize the browser window to see the effect!</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>

更多示例

在 web 页面的工具栏内使用邮件链接列表

<!DOCTYPE html><html><head><style>#nav {    list-style-type: none;}#nav li a {    color: green;    text-decoration: none;    padding: 3px;    display: block;}#nav {    width: 35%;    float: left;}@media screen and (max-width: 699px) and (min-width: 520px) , ( min-width    : 1151px) {    #nav li a {        padding-left: 30px;        background: url("http://www.w3schools.com/css/email-icon.png") left center no-repeat;    }}@media screen and (max-width: 1000px) and (min-width: 700px) {    #nav li a:before {        content: "Email: ";        font-style: italic;        color: #666666;    }}@media screen and (min-width: 1001px) {    #nav li a:after {        content: " (" attr(data-email) ")";        font-size: 12px;        font-style: italic;        color: #666666;    }}</style></head><body>    <h1>Resize the browser window to see the effect!</h1>    <ul id="nav">        <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>    <div id="main">        <p>            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut            aliquip ex ea commodo consequat. Duis aute irure dolor in            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in            culpa qui officia deserunt mollit anim id est laborum.        </p>    </div></body></html>

0 0