# 2.响应式原理

# 2.响应式原理

 

- 响应式具有的特点

    1.网页宽度自动调整

    2.尽量少用绝对宽度

    3.字体要使用rem、em作为单位

    4.布局要使用浮动或者弹性布局

    响应式下任何东西都要随着屏幕的尺寸改变而改变不能使用绝对大小

 

- 媒体查询

    根据一个或多个基于设备类型、具体特点和环境来应用样式

 

    @media

 

    @规则

        @chartset  定义编码

        @import    引入css文件（css模块化）

        @font-face 自定义字体

        @keyframes animation里的关键帧

        @media     媒体查询

```html

媒体查询使用方式一：

 

媒体查询使用方式二：

 

媒体查询使用方式三：

```

 

- 媒体查询介绍

    1.媒体类型

        all 所有设备

        print 打印机设备

        screen 彩色的电脑屏幕

        speech 听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）

        注意：tty、tv、projection、braille、embossed、aural等几种类型在媒体查询4中已经废弃

 

```html

媒体类型

```

 

    2.媒体特性

        width 宽度

            min-width 最小的宽度，宽度只能比这个大    

            max-width 最大的宽度，宽度只能比这个小        

        height 高度

            min-height 最小的高度，高度只能比这个大    

            max-height 最大的高度，高度只能比这个小 

        orientation 屏幕方向

            landscape 横屏（宽度大于高度）

            portrait  竖屏（高度大于宽度）

        aspect-ratio 宽高比

        -webkit-device-pixel-ratio 像素比（webkit内核的私有属性）

```html

媒体特性

```

    3.逻辑运算符 用来做条件判断

        and 合并多个媒体类型（并且的意思）

        ,   匹配某个媒体查询的（或者的意思）

        not 对媒体查询取反

        only 仅在媒体查询匹配成功后应用样式（防范老旧浏览器）

```html

逻辑运算符

```

    媒体查询参考： https://drafts.csswg.org/mediaqueries/

 

以上是markdown格式的笔记