概念

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式

@media mediatype and|not|only (media feature) {
	CSS-Code;
}

mediatype
- screen
- print
- speech
media feature
- min-width
  
  width/height 使用 documentElement.clientWidth/Height 即 viewport 的值。该值以 CSS 的pixels来度量
- max-width
- device-width
  
  device-width/height 使用 screen.width/height 来做为的判定值
- device-aspect-ratio

使用

响应式布局

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 50%;
      }
      .container img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
      }
      @media (min-device-width: 600px) {
        img[data-src-600px] {
          content: "";
        }
      }

      @media (min-device-width: 800px) {
        img[data-src-800px] {
          content: "";
        }
      }
      table th,
      table td {
        padding: 0 0;
        text-align: center;
      }
      /* for 240 px width screen */
      @media only screen and (max-device-width: 240px) {
        div {
        }
      }
      /* for 320px width screen */
      @media only screen and (min-device-width: 241px) and (max-device-width: 320px) {
        div {
        }
      }
      /* for 480px width screen */
      @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
        div {
        }
      }
      @media only screen and (max-width: 800px) {
        table td:nth-child(2),
        table th:nth-child(2) {
          display: none;
        }
      }
      @media only screen and (max-width: 640px) {
        table td:nth-child(4),
        table th:nth-child(4),
        table td:nth-child(7),
        table th:nth-child(7),
        table td:nth-child(8),
        th:nth-child(8) {
          display: none;
        }
      }
      thead {
        float: left;
      }
      tbody {
        display: block;
        width: auto;
        overflow-x: auto;
      }
      @media only screen and (min-device-aspect-ratio: 1.5) {
        .button {
          border: none;
          padding: 0 16px;
          box-shadow: inset 0 0 1px #000000, inset 0 1px 0 #75c2f8,
            0 1px 1px -1px rgba(0, 0, 0, 0.5);
        }
      }
    </style>
  </head>
  <body>
    <div>
      <div class="container">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.wangchao.net.cn%2Ffengjing%2F1327205317794.jpg&refer=http%3A%2F%2Fimage.wangchao.net.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631245865&t=b111a5128a8a66f1be8b078a0ef846c3"
          alt=""
        />
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.wangchao.net.cn%2Ffengjing%2F1327205317794.jpg&refer=http%3A%2F%2Fimage.wangchao.net.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631245865&t=b111a5128a8a66f1be8b078a0ef846c3"
          data-src-600px="image-600px.jpg"
          data-src-800px="image-800px.jpg"
          alt=""
        />
      </div>
      <div class="button">button</div>
    </div>
  </body>
</html>

实现不同屏幕分辨率的终端上浏览网页的不同展示方式

设置 Meta 标签

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no" />

通过媒介查询来设置样式 Media Queries
设置多种视图宽度

宽度需要使用百分比

处理图片缩放

img { width: auto; max-width: 100%; }
data 属性

<picture> 根据不同屏幕加载不同图片

<picture>
  <source
    media="(min-width: 650px)"
    srcset="https://static.runoob.com/images/mix/html-css-js.png"
  />
  <source
    media="(min-width: 465px)"
    srcset="https://static.runoob.com/images/mix/htmlbig.png"
  />
  <img
    src="https://static.runoob.com/images/mix/img_avatar.png"
    style="width: auto"
  />
</picture>

pre ，iframe，video 等，都需要和 img 一样控制好宽度
表格 (table) 的响应式处理
- table，建议不要增加 padding 属性，低分辨率下使用内容居中
- 隐藏不重要数据列
- 多列横向变2列纵向 <thead>定位隐藏，<td>变块元素，并绑定对应<th>列名，然后用伪元素的 content:attr(data-th)实现 <th>
- 固定首列，剩余列横向滚动

svg、iconfont、image-set

.box {
  background-image: -webkit-image-set(
    url("https://static.runoob.com/images/mix/htmlbig.png") 1x,
    url("https://static.runoob.com/images/mix/html-css-js.png") 2x
  );
  background-image: image-set(
    url("https://static.runoob.com/images/mix/htmlbig.png") 1x,
    url("https://static.runoob.com/images/mix/html-css-js.png") 2x
  );
  width: 400px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
}

自适应布局

使用固定分割点来进行布局

CSS系列 - 媒体查询

概念

使用

响应式布局

自适应布局