媒体查询

媒体类型:

            all

            screen

            print

媒体参数:

            width: 浏览器可视区宽度

            device-width: 设备宽度

            height:浏览器可视区高度

            device-width :设备高度

            orientation:检测设备目前处于横向还是纵向状态。

                landscape横向  portrait 纵向

            aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)

            device-aspect-ratio:检测设备的宽度和高度的比例。

可以设置为一个范围:

            min-width  : 最小宽度  例: min-width:768px; 大于等于768px

            max-width : 最大宽度  例:max-width:414px; 小于等于414px

            min-device-width 

            max-device-width

            //查询大于等于375px并且小于等于414px

            @media screen and (min-width:375px) and (max-width:414px){

            }

css2查询方式: 衬线写法

            <link rel="stylesheet" href="style1.css" media="screen and (width:320px)">

css3媒体查询   

            @media screen and (width:320px){

                .box{

                    background-color: green;

                }

            }