前端媒体查询

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

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

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

CSS 部分

CSS 复制代码

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

HTML 部分

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 元素指定特定的媒体查询

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>

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

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>
      
    :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>

前端 媒体查询

前端 媒体查询

前端媒体查询

前端媒体查询