媒体查询联系——联系人列表

来源：互联网发布：蘑菇插件mac 编辑：程序博客网时间：2024/04/29 17:47

CSS3多媒体查询

CSS3的多媒体查询继承了CSS2多媒体类型的所有思想，取代了查找设备的类型，CSS3根据设置自适应显示。
媒体查询可用于检测很多事情，例如：
1、viewport(视窗)的宽度与高度
2、设备的宽度与高度
3、朝向（智能手机横屏，竖屏）
4、分辨率

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回true或false。

例如：

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

上面的查询条件就是：当屏幕宽度在520px<=屏幕宽度<=699px或者屏幕宽度在屏幕宽度>=1151px时候生效。
具体演示示例如下：

1、

2、

3、

4、

<!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <title>媒体查询自适应邮件联系人列表</title>
 
    <head>
        <style>
            body{
                margin: 0px;
                padding: 0px;
                font:24px/32px "blackadder itc";
            }
            section{
                width: 500px;
                height: 500px;
                margin: 0 auto;
                background:linear-gradient(135deg,#f0f8ff 5%,#deb887 88%) ;
                box-shadow: 5px 5px 10px #808080;
                display: flex;
            }
            ul {
                list-style-type: none;
                margin-top: 10%;
                margin-left: 10%;                
            }
            ul li{
                margin-top: 10px;
                text-decoration: underline;
            }
            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.runoob.com/try/demo_source/email-icon.png) left center no-repeat;
                }
            }
            @media screen and (max-width: 1000px) and (min-width: 700px) {
                ul li a:before{
                    content: "Email: ";
                }
            }
            @media screen and (min-width: 1001px) {
                ul li a:after{
                    content: "(" attr(data-email) ")";
                }
            }
        </style>
    </head>
 
    <body>
 
        <section>
            <ul>
                <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
                <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
                <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
                <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>
        </section>
    </body>
 
</html>

0 0