media query和media type总结

2024年5月14日 92次阅读 来源: listenWind

media type — 媒体类型

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

media type的种类：

  • all — 适用于所有设备

  • print — 用于打印机

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

  • speech — 用于语音类型

注意：CSS2.1和CSS3 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 — 定义width与height的比率，可以设置min/max

  • device-aspect-ratio — 定义device-width与device-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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞