响应式布局之@media媒体查询

要实现响应式布局有很多种方法，媒体查询是其中的一种，今天来学习一下@media媒体查询

---

一、媒体查询的概念

概念：

   媒体查询是可以让我们可以根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，就是说我们可以设置多个CSS样式表，根据不同的条件使用不同的样式表来改变样式。
媒体类型
   媒体类型描述了设备的类别，媒体类型是可选的，默认是all。
以下是部分媒体类型：

• all 所有的设备上都加载
• print 在打印预览模式下加载
• screen 电脑屏幕，平板电脑，智能手机等中加载(彩色屏幕)
• spech 屏幕阅读器等发声设备中加载
• …

媒体属性
   我们可以根据媒体属性判断和检测当前使用css所在的设备的具体特征。
以下是常用的媒体属性：

• height 输出设备的页面可见区域的高度
• width 输出设备的页面可见区域的宽度
• min-height 输出设备中的页面最小可见区域的高度
• mix-width 输出设备中的页面最小可见区域的宽度
• max-height 输出设备中的页面最大可见区域的高度
• max-width 输出设备中的页面最大可见区域的宽度
• max-device-height 输出设备的屏幕可见的最大高度
• max-device-width 输出设备的屏幕可见的最大宽度
• orientation portrait竖屏/landscape横屏

逻辑运算符
   逻辑运算符用于组成一个复杂的媒体查询，还可以用逗号分隔多个媒体查询来将它们合并成一个规则
以下是常用的逻辑运算符

• not 用于排除某种制定的媒体类型，也就是用来排除符合表达式的设备
• only 表示仅在媒体查询匹配成功时应用指定样式
• and 将多个媒体特征组合到一个媒体查询中，还用于将媒体功能和媒体类型连接起来
• 逗号 用于将多个媒体查询组合成一个规则

二、媒体查询的应用

link标签上加载

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

style标签上加载

<style>
	/* 页面可见的宽度小于800px时，样式如下 */
    @media (max-width: 800px) {
      .box {
        background-color: red;
        width: 500px;
        height: 500px;
      }
    }
	/* 页面可见的宽度大于800px时，样式如下 */
    @media (min-width: 800px) {
      .box {
        background-color: blue;
        width: 500px;
        height: 500px;
      }
    }
</style>

@import时加载

<style>
	  /* 页面可见的宽度大于800px时，加载下面这个样式表 */
      @import url(./媒体查询样式1.css) (min-width:800px);
      /* 页面可见的宽度小于800px时，加载下面这个样式表 */
      @import url(./媒体查询样式2.css) (max-width:800px);
</style>

pictrue标签

  <picture>
    <source media="(min-width:800px)" srcset="柯基1.jpg">
    <source media="(min-width:600px)" srcset="柯基2.jpg">
    如果没有匹配到或浏览器不支持pictrue属性则使用img标签
    <img src="柯基1.jpg">
  </picture>