CSS 媒体查询@media

1. 概述

1.1 定义

@media可以针对不同的屏幕尺寸(媒体类型)设置不同的样式，在响应式页面中，@media非常有用。重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

1.2 使用

　　css语法：

@media mediatype and|not|only (media feature) {

    CSS-Code;

}

　　媒体类型(mediatype)：

- all —— 所有设备
- screen —— 用于电脑屏幕，平板电脑，智能手机等。
- print —— 用于打印机和打印预览。
- speech —— 应用于屏幕阅读器等发声设备

　　媒体功能(media feature)[常用]：

- max-width —— 定义输出设备中的页面最大可见区域宽度
- min-width —— 定义输出设备中的页面最小可见区域宽度。
- max-height —— 定义输出设备中的页面最大可见区域高度。
- min-height —— 定义输出设备中的页面最小可见区域高度。
- orientation —— 定义输出设备中的页面可见区域高度是否大于或等于宽度。
  　　有两个值 landscape(横屏) | portrait(竖屏)，portrait：指定输出设备中的页面可见区域高度大于或等于宽度；landscape：除portrait值情况外，都是landscape。

　　针对不同的媒体使用不同样式(stylesheets)：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

1.3 实例

　　如果文档宽度小于400像素，则设置html跟节点fontsize为30px，页面中的尺寸可使用rem进行处理。

    @media screen and (max-width: 400px) {

        html{

            font-size: 30px;

        }

    }

2. 媒体查询尺寸

　　说明：项目常用：

- min-width: 1200px —— 电脑
- max-width: 1100px —— iPad Pro
- max-width: 990px —— iPad
- max-width: 760px —— 手机

    @media screen and (min-width: 1200px) {

        html {

            font-size: 100px;

        }

    }

    @media screen and (max-width: 1100px) {

        html {

            font-size: 100px;

        }

    }

    @media screen and (max-width: 990px) {

        html {

            font-size: 80px;

        }

    }

    @media screen and (max-width: 760px) {

        html{

            font-size: 30px;

        }

    }

巴特西