欢迎光临
我们一直在努力

移动web入门 | 媒体查询

媒体查询简介

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

简单案例

@media screen and (min-width:900px){
    background-color:red;
}
  • @media 媒体,可以理解为固定句式
  • screen 为显示类型,这里指除打印或残障人士之外使用的所有类型
  • (min-width:900px) 为特征语句
  • { } 内写CSS样式,当满足媒体查询时执行

媒体类型

  • all 所有类型(默认值)
  • screen (屏幕设备)
  • print (打印设备)
  • speech (为残障人士准备的阅读器)
@media print and (min-width:900px){
    background-color:red;
}

如以上代码指的是使用打印设备,且最小宽度为900px时的查询语句,当满足时,背景色将改为红色。

媒体查询逻辑

  • 与 (and)
  • 或 (,)
  • 非 (not)
@media screen and (min-width:900px) and(max-width:1200px){
    background-color:red;
}

如以上代码指的是当使用屏幕阅读时,屏幕在900px~1200px时,背景色将变为红色。

注意:当使用not时,指的是后面所有跳转都不满足,才执行条件。可以理解为,not的优先级最低,需要最后执行。

媒体特征表达式

描述
aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率
color定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
color-index定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
device-aspect-ratio定义输出设备的屏幕可见宽度与高度的比率。
device-height定义输出设备的屏幕可见高度。
device-width定义输出设备的屏幕可见宽度。
grid用来查询输出设备是否使用栅格或点阵。
height定义输出设备中的页面可见区域高度。
max-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。
max-color定义输出设备每一组彩色原件的最大个数。
max-color-index定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height定义输出设备的屏幕可见的最大高度。
max-device-width定义输出设备的屏幕最大可见宽度。
max-height定义输出设备中的页面最大可见区域高度。
max-monochrome定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution定义设备的最大分辨率。
max-width定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color定义输出设备每一组彩色原件的最小个数。
min-color-index定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width定义输出设备的屏幕最小可见宽度。
min-device-height定义输出设备的屏幕的最小可见高度。
min-height定义输出设备中的页面最小可见区域高度。
min-monochrome定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution定义设备的最小分辨率。
min-width定义输出设备中的页面最小可见区域宽度。
monochrome定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
scan定义电视类设备的扫描工序。
width定义输出设备中的页面可见区域宽度。

媒体查询策略

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>媒体查询-策略</title>
        <style>
            *{
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }
            body{
                padding-top: 200px;
            }
            img{
                width: 100%;
                height: 100%;
            }
            .row{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
            }
            .col{
                padding-top: 10px;
                padding-bottom: 10px;
                background-color: rgba(86,61,124,0.15);
                border: 1px solid rgba(86,61,124,0.2);
            }
            
            /* 断点
                xs: < 576px
                sm: 576 ~ 768px
                md: 768 ~ 992px
                lg: 992 ~ 1200px
                xl: > 1200px
                
                断点怎么来的:当改变屏幕大小的时候,页面会显示不正常,就需要设置断点了。
                            经验值,预设一些。
                            
             */
            
            /* @media (max-width:576px){
                .col{
                    width: 100%;
                }
            }
            @media (min-width:577px) and (max-width:768px){
                .col{
                    width: 50%;
                }
            }
            @media (min-width:769px) and (max-width:992px){
                .col{
                    width: 25%;
                }
            }
            @media (min-width:993px) and (max-width:1200px){
                .col{
                    width: 16.66666667%;
                }
            }
            @media (min-width:1201px){
                .col{
                    width: 8.333333333%;
                }
            } */
            
            /* PC first 从宽到窄检测,后面的会覆盖前面的,如果检测到匹配的大小就会停止匹配后面的代码 */
            .col{
                width: 8.33333333%;
            }
            @media (max-width:1200px){
                .col{
                    width: 16.66666667%;
                }
            }
            @media (max-width:992px){
                .col{
                    width: 25%;
                }
            }
            @media (max-width:768px){
                .col{
                    width: 50%;
                }
            }
            @media(max-width:576px){
                .col{
                    width: 100%;
                }
            }
            
            /*  mobile first 从最小屏幕开始判断,从小往大设置的是下限,即min-width*/
            .col{
                width: 100%;
            }
            @media(min-width: 576px){
                .col{
                    width: 50%;
                }
            }
            @media (min-width:768px){
                .col{
                    width: 25%;
                }
            }
            @media (min-width:992px){
                .col{
                    width: 16.66666667%;
                }
            }
            @media (min-width:1200px){
                .col{
                    width: 8.33333333%;
                }
            }
        </style>
    </head>
    <body>
        
         <div class="row">
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
                <div class="col">
                    <img src="img/3.8-1.png" alt="">
                </div>
            </div>
    </body>
</html>
赞(0) 打赏
未经允许不得转载:散人研 » 移动web入门 | 媒体查询
分享到: 更多 (0)

评论 抢沙发

3 + 4 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏