media query和media type总结

media type — 媒体类型

media type是css2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面。下面要说到css3中的media query是对media type的一种增强。

media type的种类:

  • all — 适用于所有设备

  • print — 用于打印机

  • screen — 适用于彩色电脑显示器(也包括手机、iPad等手持设备)

  • speech — 用于语音类型

注意:CSS2.1CSS3 media query定义了tty, tv, projection, handheld, braille, embossed, aural这些media type,但是它们在media query 4 中都废弃了,所以不推荐使用了

media type的使用方法:

第一种:<link> 标签的media属性

<link href="style.css" media="screen print" ...

第二种:<style> 标签的 media 属性

<style media="all" type="text/css">
    p{
        color: #ff0000
    }
</style>

第三种:@import方式

<style>
    @import url("xxx.css") "screen,print";
</style>

第四种:在style里为某些样式指定 media

@media speech {
    p{
        color: #ff0000
    }
}

注:若没有指定media,默认为all

media query — 媒体查询

媒体查询是通过不同的媒体类型和条件定义不同的样式表,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。也是media type的增强。

语法

媒体查询包含一个媒体类型(media type) 以及一个到多个测试媒体特性(media feature)的表达式,表达式和媒体类型将根据实际情况计算得到true或者false。如果指定的媒体类型符合当前设备并且媒体特性表达式都为真,那当前媒体查询为。

@media screen and (min-width: 700px) and (orientation: landscape) {}
/*其中screen就是媒体类型,min-width: 700px是媒体特性表达式*/

逻辑运算符

  • and运算符 — 用于结合多个媒体特性(media feature)到一个media query
    @media screen and (min-width: 700px) and (orientation: landscape) {
        .name {
            color:red;
        }
    }

    当设备类型为screen,且viewport的宽度大于700px,并且设备可见区域宽度大于高度(横屏),三个条件都满足时,大括号内的样式才会生效。

  • 逗号(,)运算符 — 用于结合多个media query
    @media (min-width: 700px), screen and (orientation: landscape) {
        .name {
            color:red;
        }
    }

    上面代表两种不同设备,一种all,一种screen,用逗号分隔。

  • not运算符 — 用于对整个media query 取反,必须位于一个media query的开头
    @media not all and (monochrome) {}

    等价于:

    @media not (all and (monochrome)) {}

    注意:not 是对整个media query进行否定,不能对单个media feature否定

  • only运算符 –用来定某种特别的媒体类型

    对于支持Media Query的设备来说,如果存在only关键字,Web浏览器会忽略only关键字,并直接根据后面的表达式应用样式文件。对于不支持Media Query的设备,但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

    @media only screen and (min-width: 400px) and (max-width: 600px) {}

    不支持media query但是支持media type的web浏览器,会省略后面的样式文件,上面的实例解释为:

    @media only {}

    支持media query 的web浏览器会省略only关键字,上面实例解释为:

    @media screen and (min-width: 400px) and (max-width: 600px) {}

media feature — 媒体特性

下面是一些媒体特性,不是全部

  • width — 定义输出设备中的页面可见区域宽度

  • height — 定义输出设备中的页面可见区域高度

  • device-width — 定义输出设备的屏幕可见宽度

  • device-height — 定义输出设备的屏幕可见高度

  • orientation — 定义’height’是否大于或等于’width’。portrait代表是(竖屏),landscape代表否(横屏)

  • aspect-ratio — 定义widthheight的比率,可以设置min/max

  • device-aspect-ratio — 定义device-widthdevice-height的比率。可以设置min/max。如常见的显示器比率:4/3, 16/9, 16/10

  • resolution — 定义设备的分辨率。可以设置min/max。如:96dpi, 300dpi, 118dpcm

  • color — 定义每一组输出设备的彩色原件个数。如果不是彩色设备,则值等于0。可以设置min/max

media query 常用方法

  • 排他 (exclusive) 为确保在某一个条件下只有一个样式表生效,将查询条件严格划分,如下面:
    @media (max-width: 400px) {
        html {
            background: red;
        }
    }
    
    @media (min-width: 401px) and (max-width: 800px) {
        html {
            background: green;
        }
    }
    
    @media (min-width: 801px) {
        html {
            background: blue;
        }
    }
  • 覆盖(overriding) 可以对元素设置相同优先级,使用样式顺序,通过覆盖,避免排他
    @media (min-width: 400px) {
        html {
            background: red;
        }
    }
    
    @media (min-width: 600px) {
        html {
            background: green;
        }
    }
    
    @media (min-width: 800px) {
        html {
            background: blue;
        }
    }
  • 无线端优先(Mobile first) 默认样式假设为移动设备宽度,然后通过min-width控制扩展样式
    html {
        background: red;
    }
    
    @media (min-width: 600px) {
        html {
            background: green;
        }
    }
  • PC优先(desktop first) 默认以宽屏进行样式设置,通过max-width控制样式覆盖
    html {
        background: red;
    }
    
    @media (max-width: 600px) {
        html {
            background: green;
        }
    }

参考资料:

    原文作者:listenWind
    原文地址: https://segmentfault.com/a/1190000008701062
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞