媒体查询

何以庆余年
1,535 阅读5分钟

媒体查询

在需要根据设备的类型或某些特征来对css样式做特殊处理时，媒体查询是我们必须了解和学会使用的。接下来，我们就一起来学习媒体查询这一特性。

引言

我们经常会遇到一种场景：同一个网页，在大屏设备（如电脑）、中屏设备（如Ipad）、小屏设备（如mobile）上有不同的展示。比如，我们需要在屏幕宽度小于750px时，将标题颜色设置为红色，否则设置为粉色。我们来code一下：

h1 {
    color: pink;
}

@media screen and (max-width: 750px) {
    h1 {
       color: red; 
    } 
}

接下来，我们来具体学习媒体查询如何使用。

语法结构

@media media-type and (media-feature-rule) {
    /* 在这里写符合查询条件的css的规则 */
}

media-type是要指定的媒体类型，告诉浏览器这段代码是要用在什么类型的媒体上，包括以下几种：

  • all: 适用于所有设备，如果不写默认为all
  • print: 适用于在打印预览模式下在屏幕上查看的分页材料和文档
  • screen: 主要用于屏幕
  • speech: 主要用于语音合成器

我们在前端开发中，一般主要使用screen。

media-feature-rule是一个或多个媒体特性表达式，是一个被包含的css生效所需的规则或者测试。主要包括以下几种：

  • width: 检测视口的宽度
    • max-width
    • min-width
  • height: 检测视口的高度
    • max-height
    • min-height
  • orientation: 检测视口的屏幕方向
    • portrait: 竖屏
    • landscape: 横屏
  • hover: 根据是否允许悬停在元素之上来应用不同的样式（例如：电脑可以悬停，触摸屏无法进行悬停）
    • none: 不可悬停
    • hover: 可以悬停

项目中使用

检测视口宽度

这是我们最常用的场景，我们会根据视口的不同宽度，对padding、font-size、图片大小等css属性，甚至某一个组件整体布局做调整。

示例

我们有一个pc网站，设计最大宽度为1440px，当视口宽度大于1440px时，我们的宽度设置为1440px，左右外边距由视口宽度超出部分决定；当视口宽度小于等于1440px时，左右各留40px的外边距，我们的宽度自适应。

.root {
    width: 1440px;
    margin: 0 auto;
    background: pink;
    min-height: 100vh
}

@media screen and (max-width: 1439px) {
    .root {
       margin: 0 40px;
       width: auto;
       background: powderblue;
    } 
}

检测视口的屏幕方向

我们一般用于iPad或mobile，当用户横屏或竖屏使用设备时，我们给用户展示不同的UI样式。

示例

我们的网站，在iPad上竖屏时左右外边距留20px，横屏时左右外边距留32px，宽度自适应。

@media screen and (orientation: portrait) {
    .root {
        width: auto;
        margin: auto 20px;
        background: pink;
    }
    .root::after {
        content: "处于竖屏"
    }
}
@media screen and (orientation: landscape) {
    .root {
        width: auto;
        margin: auto 32px;
        background: pink;
    }
    .root::after {
        content: "处于横屏"
    }
}

检测是否允许悬停在元素之上

hover用来检测能否在一个元素上悬停，但是像触摸屏是不能悬停的。

示例

我们的网站中，在可以悬停的设备中，我们让链接的底部有一条横线，否则没有横线。当可以悬停时，鼠标悬停在链接上，链接展示为红色。

a {
    text-decoration: none;
}

@media screen and (hover: hover) {
    a {
        border-bottom: 1px solid blue;
    }
    a:hover {
        color: red;
    }
}
@media screen and (hover: none) {
    a {
        border-bottom: 0;
    }
}

媒体查询中的逻辑操作符

逻辑与

我们通过and关键词，来实现媒体查询中的逻辑与。

示例

当我们的网站处于一个屏幕宽度至少为600px，并且横放的设备时，标题展示为黄色，否则默认为黑色。

@media screen and (min-width: 600px) and (orientation: landscape) {
    h1 {
        color: yellow;
    }
}

逻辑或

我们通过,拆分多个查询，来实现媒体查询的逻辑或。

示例

当我们的网站处于的设备竖放，或者屏幕宽度至多为375px时，标题展示为绿色，否则默认为黑色。

@media srceen and (max-width: 375px),
screen and (orientation: portrait) {
    h1 {
        color: green;
    }
}

逻辑非

我们通过not关键词，来实现媒体查询的逻辑非。

not关键词不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。

示例

只要我们的设备不处于横向，字体就展示金色。

@media not screen and (orientation: landscape) {
    h1 {
        color: gold;
    }
}

配合@import规则使用

@import规则用于导入其他的样式表，可以配合媒体查询使用。

语法结构

@import url('path') list-of-media-queries

一个完整的@import规则，语法由两部分组成：

  • url("path"): css样式表路径

  • list-of-media-queries: 媒体查询条件(遵循上面的语法规则)

项目中使用

示例

我们的网站，在宽度不大于375px的情况导入mobile.css样式表，否则导入desktop.css样式表。

@import url("./mobile.css") screen and (max-width: 375px);
@import url("./desktop.css") screen and (min-width: 376px);

总结

在这一节，我们学习了媒体查询的使用，同时通过code学习了几个常见例子的实现。

我是何以庆余年，如果文章对你起到了帮助，希望可以点个赞，谢谢！

如有问题，欢迎在留言区一起讨论。

avatar
文章
阅读
粉丝