媒体查询

样式

为了能够在不同的尺寸的设备屏幕上获得更好地显示效果，就产生了媒体查询。

我们可以为不同的屏幕尺寸编写不同的CSS样式

看下面的代码


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Queries</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .container {
      width: 300px;
      height: 300px;
      background: black;
    }

    @media screen and (max-width: 1200px) {
      .container {
        background: red;
      }
    }

    @media screen and (max-width: 1000px) {
      .container {
        background: blue;
      }
    }

    @media screen and (max-width: 800px) {
      .container {
        background: green;
      }
    }

    @media screen and (max-width: 400px) {
      .container {
        background: yellow;
      }
    }

  </style>
</head>

<body>
  <div class="container">

  </div>
</body>

</html>

代码中的@media 为关键字，后面的screen 为屏幕显示设备，除了screen之外还可以为all、print、speech

同时允许逻辑运算and not , only


@media screen, print {...}

上面的 @media screen and (max-width: 800px) 就是最大尺寸为800像素的屏幕显示设备

图片

查看参考 2 和参考 3

目前没有看明白，也没有实验成功，正在寻求样例和使用方式

文件

我们也可以根据不同显示设备直接加载不同的css文件，使用下面的代码就可以实现


<link rel="stylesheet" href="..." media="screen and (max-width: 500px)" />

参考内容

使用媒体查询 - CSS（层叠样式表） | MDN

逻辑操作符（ logical operators） not, and, 和 only 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。 and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。 not 运算符用于否定媒体查询，如果不满足这个条件则返回 true，否则返回 false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 not 运算符，则还必须指定媒体类型。备注：在 Level 3 中， not 关键字不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。 only运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。当不使用 only时，旧版本的浏览器会将 screen and (max-width: 500px)简单地解释为 screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 only运算符，则还必须指定媒体类型。逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为 true，则整个 media 语句均返回 true。换句话说，列表的行为类似于逻辑或 or 运算符。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries

HTML5响应式图片技术中文图解 " 张鑫旭-鑫空间-鑫生活

本文主要图解了几种HTML侧的响应式图片的用法说明，希望可以对移动端同学的学习有所帮助。

https://www.zhangxinxu.com/wordpress/2015/11/anatomy-of-responsive-images/

响应式图片srcset全新释义sizes属性w描述符 " 张鑫旭-鑫空间-鑫生活

by zhangxinxu from http://www.zhangxinxu.com 本文地址： http://www.zhangxinxu.com/wordpress/?p=4371 ...

https://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/