css3 媒体查询

[toc]

1. 媒体类型

媒体类型是不同媒体的标志符

序号	类型	描述
1	`all`	所有媒体类型，即不限制
2	`print`	打印机，预览打印预览使用
3	`screen`	屏幕，如浏览器等用户代理
4	`projection`	幻灯片

多媒体类型之间使用逗号分隔：@media screen,print

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询</title>
    <style>
        h1{
            color: rgb(205, 50, 50);
        }
        body{
            background-color: turquoise;
        }
        /* 媒体查询 */
        /* 当屏幕尺寸大于等于500px时，以下样式有效 */
        @media screen and (min-width: 500px){
        h1{
            color: rgb(50, 112, 205);
        }
        body{
            background-color: rgb(212, 224, 176);
        }
        }
    </style>
</head>
<body>
    <h1>hello,欢迎来学习我的课程</h1>
</body>
</html>

2. 媒体描述符

媒体类型通常会添加“媒体描述符”进行精准限制，例如设置媒体尺寸，分辨率等
媒体描述符的语法和css样式声明非常类似，如min-width: 500px
与css声明的不同之处在于，媒体描述符允许没有值，如print and (color)
多个“媒体描述符”之间使用“逻辑关键字”连接，如and和not
and表示多个“媒体描述符”必须同时满足,not则是整个查询取反，且必须写在and前面

常用 “媒体描述符”(显示区域相关)

序号	媒体描述符	描述
1	`width`	显示区域宽度
2	`min-width`	显示区域最小宽度
3	`max-width`	显示区域最大宽度
4	`device-width`	设备显示区域宽度
5	`min-device-width`	设备显示区域最小宽度
6	`max-device-width`	设备显示区域最大宽度
7	`height`	显示区域高度
8	`min-height`	显示区域最小高度
9	`max-height`	显示区域最大高度
10	`device-height`	设备显示区域高度
11	`min-device-height`	设备显示区域最小高度
12	`max-device-height`	设备显示区域最大高度

max-width与max-device-width区别:

max-width: 浏览器显示区域宽度,与设备无关,通常用于 PC 端
max-device-width: 设备分辨率的最大宽度,通常用于移动端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部媒体查询</title>
    <style>
        .nav{
            height: 50px;
            background-color: white;
            display: flex;
            align-items: center;
        }
        .nav ul{
            display: flex;
            list-style: none;
        }
        .nav ul a{
            color: turquoise;
            text-decoration: none;
            padding: 0 15px;
        }
        /* 局部媒体查询，当屏幕宽度小于等于500px，显示以下样式 */
        @media screen and (max-width: 500px){
            /* 隐藏列表项 */
            .nav ul{
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="log">LOGO</div>
        <ul>
            <li>
                <a href="">首页</a>
                <a href="">视频</a>
                <a href="">问答</a>
                <a href="">下载</a>
            </li>
        </ul>
    </div>
</body>
</html>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0401.教学内容

2020-04-04 09:23:42