前端媒体查询前端媒体查询媒体查询是一种提供给开发者的针对不同的设备需求的进行定制化开发的一个接口就是我们是可以通

前端媒体查询

前端 CSS 学习目录导航

1. CSS 字体属性和文本属性

2. CSS 特性、盒子模型

3. CSS 背景设置、高级元素 form表单使用

4. CSS 结构伪类以及其他前端开发知识补充

5. CSS 定位流布局——position

6. CSS 浮动流布局——float

7. CSS 弹性盒布局——flex

8. CSS 形变和动画

9. CSS HTML5拓展和 CSS函数使用

10. CSS BFC的理解

11. CSS 媒体查询

12. CSS 单位拓展、预处理器、移动端适配方案

媒体查询是一种提供给开发者的针对不同的设备需求的进行定制化开发的一个接口
- 就是我们是可以通过不同的设备类型（屏幕设备，打印机设备）或者其他的特性的设备来实现修改我们的页面

媒体查询的使用方式（移动端适配中常用）

通过@media 和 @import 来实现使用不同的 CSS 规则

CSS 部分

body {
  padding: 0;
  margin: 0;
  background-color: rgba(184, 129, 27, .4);
}

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 开始实现书写我们的媒体查询的限制 */
    @import url(CSS/body.css) (max-width: 800px);
  </style>
</head>
<body>
  
</body>
</html>

使用media 属性为 link style source 和其他的 HTML 元素指定特定的媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media (max-width: 800px) {
      body {
        background-color: orange;
      }
    }
  </style>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./CSS//body.css" media="(max-width: 800px)">
</head>
<body>
  
</body>
</html>

使用 Window.matchMedia() 或者 MediaQueryList.addListener() 方法测试和监控媒体状态
- 这个就是实现使用我们的 javascript 来实现的我们的对对应部分的监视

媒体查询 - 媒体类型（Media types）
- 在我们实现使用我们的媒体查询的时候，我i们必须指定需要使用的媒体类型
  - 媒体类型是可选的，默认的话是应用 all 类型
- 常见的媒体类型含有：
  - all 适用于所有的设备
  - print 适用于打印预览模式下的屏幕上查看的文档资料和文档
  - screen 就是用来实现的是我们的屏幕
  - speech 主要用于语音合成器
  - tv 实现的是适应电视类型设备
  - projection 放映机
  - braille 盲人用点字法反馈设备

媒体查询 - 媒体特性（Media features）
- 用来实现的是我们的描述浏览器，输出设备，或者预览环境的具体特性
  - 我们通常将媒体特性描述为一个表达式
  - 每一条媒体特性必须使用括号是包括起来
  - 不同的条件使用我们的逻辑运算符: and not only

常见的移动端设备

常见的设备宽度: 320 375 414 480

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      
    :root {
      --my-ttz-font-size: 16px;  /* 320px */
      --my-tsf-font-size: 20px;  /* 375px */
      --my-fof-font-size: 24px;  /* 414px */
      --my-fez-font-size: 28px;  /* 480px */

      @media (max-width: 375px) and (min-width: 320px) {
        font-size: var(--my-ttz-font-size);
      }

      @media (max-width: 414px) and (min-width: 375px) {
        font-size: var(--my-tsf-font-size);
      }

      @media (max-width: 480px) and (min-width: 414px) {
        font-size: var(--my-fof-font-size);
      }

      @media (min-width: 480px) {
        font-size: var(--my-fez-font-size);
      }

    }
  </style>
</head>
<body>
  <div class="box">hello front-end</div>
</body>
</html>

前端 媒体查询

前端 媒体查询

前端媒体查询

前端媒体查询