关于前端:都1202年了你还不会CSS3的媒体查询嘛

40次阅读

共计 4020 个字符,预计需要花费 11 分钟才能阅读完成。

Hello 大家好,我是此岸繁華🌸,一个想进大厂的大三学生,为了有一个残缺的前端常识体系,当初我要从头开始学习、梳理、总结。

本系列文章在掘金首发,编写不易转载请取得容许

写在后面

媒体查问(英文:Media queries),这个个性十分的实用,尤其是须要依据设施的类型或者依据特定的特色和设施参数,来批改网站中的 CSS 款式。

例如视口宽度小于 400px 的时候,媒体查问的代码如下@media screen and (max-width: 400px)(前面会解说),这个时候只有宽度小于400px,就会利用指定的款式。

媒体查问常常被用于以下目标:

  • 有条件的通过 @media 或者 @import 用 CSS 装璜款式
  • media= 属性为 <style><link><source> 和其余 HTML 元素指定特定的媒体类型。如:
<!-- 引入的 CSS 仅仅能够用于屏幕,不可用于打印机等设施 -->
<link rel="stylesheet" src="styles.css" media="screen" />
<!-- 同上 -->
<link rel="stylesheet" src="styles.css" media="print" />
  • 应用 Window.matchMedia()MediaQueryList.addListener()办法来测试和监控媒体状态。

语法结构

媒体查问的语句大抵是上面这个样子:

@media media-type and (media-feature-rule) {/* CSS rules go here */}

它由以下局部组成:

  • 一个可选的媒体类型,通知浏览器这段代码是用在什么类型的媒体上的,具体的媒体类型如下:

    • all:实用于所有设施(如果不写默认为all)。
    • print:实用于在打印预览模式下在屏幕上查看的分页资料和文档。
    • screen:次要用于屏幕。
    • speech:次要用于语音合成器。
  • 一个或者多个媒体个性表达式,是一个被蕴含的 CSS 失效所需的规定或者测试,媒体个性数量泛滥,次要的有如下这么几个:

    • aspect-ratio:用于检测视口的宽高比
    • width:用于检测视口的宽度,能够应用前缀 min-widthmax-width别离查问最小值和最大值
    • height:用于检测视口的高度,能够应用前缀 min-heightmax-height别离查问最小值和最大值
    • orientation:用于检测视口的屏幕方向
    • hover:依据用户以后的环境是否容许悬停在元素之上来利用不同的款式(例如电脑就能够进行悬悬停,触摸屏用户就无奈进行悬停)
  • 一组 CSS 规定,会在测试通过且媒体类型正确的时候利用。

简略用法

检测宽度和高度

媒体查问最罕用的就是检测以后视口的宽度和高度,也就是应用 height 或者 width,也能够在后面增加min- 或者 max- 前缀来查问最大值或者最小值。

这种通常用于响应式布局,示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 检测宽度和高度 </title>
    <style>
        @media screen and (max-width:800px) {

            /* 以后视口最大屏幕宽度小于 800px 时,h1 的字体为蓝色 */
            h1 {color: blue;}
        }
    </style>
</head>

<body>
    <h1> 此岸繁華 </h1>
</body>

</html>

实现成果如下:

在下面的代码中,只有以后屏幕的宽度小于 800px 就会满足媒体查问的条件,从而执行那组 CSS 规定。

检测屏幕的朝向

除了能够检测屏幕宽度,还能够用来检测屏幕的朝向,简略的说就是以后属于横屏还是竖屏。

检测屏幕朝向应用的媒体个性表达式为orientation,该表达式具备两个值:

  • portrait:视口处于纵向,即高度大于等于宽度。
  • landscape:视口处于横向,即宽度大于高度。

示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 检测屏幕的朝向 </title>
    <style>
        @media screen and (orientation: portrait) {
            h2::after {content: '处于纵向';}

        }

        @media screen and (orientation: landscape) {
            h2::after {content: '处于横向';}

        }
    </style>
</head>

<body>
    <h2> 此岸繁華 </h2>
</body>

</html>

实现成果如下:

规范的桌面视口都是属于横向的,然而对于竖放的手机或者平板电脑上来说,可能你的布局就没有这么好。

这个时候对朝向的检测就能够帮忙咱们建设一个良好的布局(兼容横屏和竖屏)。

检测是否可悬浮

hover媒体特色能够用于检测用户以后是否在一个元素上悬浮,有些设施是不会呈现悬浮成果的,例如触摸屏。

hover具备两个值,别离是:

  • none:不可悬停
  • hover:能够悬停

当初咱们实现一个在能够悬停的设施的字体出现红色,不可悬停的设施上字体出现蓝色,代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 检测是否可悬停 </title>
    <style>
        @media (hover : hover) {
            h2 {color: red;}
        }

        @media (hover : none) {
            h2 {color: blue;}
        }
    </style>
</head>

<body>
    <h2> 此岸繁華 </h2>
</body>

</html>

实现成果如下:

媒体查问中的逻辑操作符

实现媒体查问中的“与”逻辑

媒体查问中也是能够应用“与”逻辑的,它的实现是通过 and 关键字。

当初咱们有一个新的需要,当屏幕宽度至多为 600px 时,且设施为横放时字体变成蓝色,示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 逻辑与 </title>
    <style>
        @media screen and (min-width: 600px) and (orientation: landscape) {
            h1 {color: blue;}
        }
    </style>
</head>

<body>
    <h1> 此岸繁華 </h1>
</body>

</html>

实现成果如下:

实现媒体查问中的“或”逻辑

媒体查问中应用“或”逻辑比较简单,就是应用一个逗号 , 来拆分多个查问。

新需要,当屏幕宽度至多为 600px 时,或者设施为横放时字体变成蓝色,示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 逻辑或 </title>
    <style>
        @media screen and (min-width: 600px),
        screen and (orientation: landscape) {
            h1 {color: blue;}
        }
    </style>
</head>

<body>
    <h1> 此岸繁華 </h1>
</body>

</html>

实现成果如下:

实现媒体查问中的“非”逻辑

媒体查问中的“非”逻辑应用的是 not 关键字,如果应用的逻辑非,示意你的 CSS 样式表除了不利用你写的规定,其余的都利用。

新需要:当视口只有不是处于横向,字体就变成蓝色,示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 逻辑非 </title>
    <style>
        @media not all and (min-width: 800px) {
            h1 {color: blue;}
        }
    </style>
</head>

<body>
    <h1> 此岸繁華 </h1>
</body>

</html>

实现成果如下:

总结

精彩文章

【从头学前端】04- 搞懂 JavaScript 中的根本数据类型

【从头学前端】03- 这次我就搞懂了 JavaScript 中的变量

【从头学前端】02-JavaScript 词法构造

【从头学前端】01- 什么是 JavaScript

正文完
 0