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-width和max-width别离查问最小值和最大值
    • height：用于检测视口的高度，能够应用前缀min-height和max-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