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;
        }
    }