CSS3媒体查询media_queries响应式布局入门指南知识点总结

时间 2021-08-12

标签 css html css3 segmentfault 浏览器 dom 布局性能字体栏目 CSS 繁體版

原文原文链接

什么是媒体查询

咱们知道，咱们给网页HTML写样式用的主要是CSS（层叠样式表）语言的规则，好比：盒模型设置宽高背景色什么的。css

目前咱们使用的最新版本的层叠样式表主要是CSS第三版，也就是CSS3，CSS3带来的新特性、新功能有不少，好比：圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、媒体查询等等。html

因此，什么是媒体查询呢？
媒体查询就是CSS3带来的新的功能特性css3

通常认为媒体查询是CSS3的新增内容，实际上CSS2就已经有媒体查询了，只不过css3又增长了新功能使其更增强大，从而让媒体查询发扬光大

媒体查询的功能

功能就是：segmentfault

CSS3中新特性媒体查询（mediaqueries），可为根据不一样的分辨率（设备）设置不一样的样式效果浏览器

以前css2中定义的设备有tv设备、tty设备、屏幕screen设备、打印机print设备等等。到css3中基本上废弃了不少用不到的设备，基本上只保留screen设备、print设备这样的。print设置偶尔使用，比较经常使用的就是screen设备。dom

print设备咱们能够经过Ctrl+P快捷键预览一下打印的效果布局

简而言之，媒体查询主要是用来作响应式布局的性能

什么是响应式布局

响应式布局就是：
咱们作好的页面，在不一样尺寸的屏幕上有不一样的样式效果回馈。好比，在大屏幕上咱们须要更多的展现信息，毕竟屏幕大嘛，信息展现少了就浪费了。在小屏幕上，咱们须要隐藏一些东西，由于屏幕过小了，信息展现多了反而显得过于臃肿。不一样屏幕有不一样的相应，即为响应式布局字体

好比有这样一个需求：在可视区域屏幕的宽度小于480像素时，咱们让屏幕中文字由原来的黑色black变成绿色green。（默认是黑色）ui

使用js解决

思路：经过screen对象，获取屏幕分辨率的宽度width，进行判断，若小于480的时候，就改变文字的颜色。

打印screen对象的信息

Screen对象能够获取浏览器窗口的相关数据，好比分辨率、屏幕大小之类的数据，能够经过window.screen获取到，同时Screen也自带一些方法能够作其余事情，好比解锁或锁定屏幕转向等。具体关于screen对象的详细信息，欢迎访问MDN官方网址： https://developer.mozilla.org...

对应代码

<!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>Document</title>
</head>
<body>
    <div class="meiti">哈喽，我是媒体查询</div>
    <script>
        window.onresize = () => {
            console.log(screen.width); // 打印看看screen对象信息
            // 经过js去控制
            if (screen.width <= 480) { 
                document.querySelector('div').style.color = "green"
                document.querySelector('div').style.fontWeight = "bolder"
            } else {
                document.querySelector('div').style.color = "black"
                document.querySelector('div').style.fontWeight = "normal"
            }
        }
    </script>
</body>
</html>

效果图

使用媒体查询解决

代码

<style>
        /* 使用媒体查询，去设置样式更加方便 */
        @media screen and (max-width: 480px) {
            div {
                color: green;
                font-weight: bolder;
            }
        }
    </style>

当，是屏幕设备，而且，最大宽度不超过480px的时候，让文字的颜色变成绿色加粗字体
max-width最大宽度，也就是小于等于的时候
min-width最小宽度，也就是大于等于的时候

效果图和上图同样的，就再也不附图了。

两者对比

经过上述的例子，咱们发现的确是媒体查询在书写的过程当中更加方便，一方面js要尽可能少操做dom，尽可能减小回流重绘，在一个经过css控制样式的确是比经过js操做样式更加节省性能。因此综上所述，css3带来的新特性，媒体查询的确是有必定的应用场景

媒体查询语法

媒体设备类型

直接写在style标签里面，目前比较经常使用的是四种设备，实际上是三种，以下：

<!-- 指定屏幕设备 -->
<style media="screen"></style>
<!-- 指定打印机设备 -->
<style media="print"></style>
<!-- 指定屏幕阅读器设备 -->
<style media="speech"></style>
<!-- 指定全部设备，至关于公共的样式了 -->
<style media="all"></style>

引入的话，也能够经过重置样式表引入，以下：

<!-- 指定屏幕设备 -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- 指定打印机设备 -->
<link rel="stylesheet" href="css/style.css" media="print">
等 ......

还能够经过@import引入并指定媒体插叙语法，以下：

<!-- 当屏幕的宽度大于360px的时候，就使用 one.css 文件里面所书写的样式 -->
@import url(./one.css) (min-width:360px);
<!-- 当屏幕的小于880px的时候，就使用 two.css 文件里面所书写的样式 -->
@import url(./two.css) (max-width:880px);

逻辑运算符之三个关键字and 、not和only

and关键字（且）

and表示而且的意思，须要同时知足 and前和and后的两个条件，才会执行对应的媒体查询语句，好比：
@media screen and (max-width: 480px) { 相应css语句 }

意思以下：

@media
- 表示：使用媒体查询
screen
- 表示：屏幕设备（好比电脑手机什么的），也能够不写，不写的话，默认就是屏幕screen 设备，不写screen 语法以下：
- @media (max-width: 480px) { 相应css语句 } 效果是同样的，只不过省去默认值罢了
and
- 表示：且的意思，and后面通常会跟限定条件，表示在什么条件下才会触发相应的媒体查询的样式。能够写多个and，表示多个条件的意思，举例子
- @media screen and (max-width: 480px) and (min-width: 360px) { 相应css语句 }
- 上述案例的意思是：当为屏幕设备的时候，且屏幕宽度大于360像素，小于480像素的时候，执行相应的css语句
(max-width: 480px)
- 条件的话用括号来包裹，括号里写上相应的条件语句，这里的意思是最大宽度不能超过480px，也就是小于等于的意思
{ 相应css语句 }
- 实现对应样式效果的语句

not关键字（非）

not关键字就是取反的意思，要放在@media后面，其余的语句前面，以下案例：

<style>
    /* 小于等于360px的变成绿色加粗字体 */
    /* @media screen and (max-width: 360px) {  */

    /* 加上not取反就是表示 就变成大于360px的变成绿色加粗字体了 */
    @media not screen and (max-width: 360px) { 
        div {
            color: green;
            font-weight: bolder;
        }
    }
</style>

only关键字（仅）

支持媒体查询语法就使用对应媒体查询语法，不支持就忽略。以下：
@media only screen and (max-width: 360px) { css语句 }
这种写法使用不多，毕竟目前只有低版本浏览器才不支持，图示一下，相应浏览器从何时开始支持的

由上图咱们能够看到，的确是比较低版本的浏览器才不支持，谷歌浏览器21版本，这个是不少年之前的版本了......

补充（或）关键字（使用逗号 , 隔开便可）

若是咱们有这样的一个需求：当屏幕的宽度小于360px或者屏幕的宽度大于480px的时候，才让字体变成绿色加粗样式

此时，咱们就须要使用或的语法，代码以下：

<style>
    @media 
        screen and (max-width: 360px) ,  /* 多个或的条件使用逗号隔开就好了 */
        screen and (min-width: 480px) {
            div {
                color: green;
                font-weight: bolder;
            }
        }
</style>

完整语法

@media  not或only或不写  mediatype或不写（不写就默认screen）  and  ( mediafeature媒体特性  ) {
   相应css语句
}

媒体特性就是限制条件，在什么条件下，才使用相应的书写的css语句

经常使用的媒体特性

max-height
- 最大高度，即小于等于这个高度的意思
min-height
- 最小高度，即大于等于这个高度的意思
max-width
- 最大宽度，即小于等于这个宽度的意思
min-width
- 最小宽度，即大于等于这个宽度的意思

媒体特性其实有不少，具体的使用什么特性根据项目实际状况。最后再附上官方的媒体查询网址

附录官网

W3school的媒体查询： https://www.w3school.com.cn/c...
MDN的媒体查询： https://developer.mozilla.org...