媒体查询表达式的使用方法

语法

@media  设备类型 and (设备特性){样式}

制定设备的值	设备类型
all	所有设备
screen	电脑显示器
print	打印用纸或者打印预览视图
handheld	便携设备
tv	电视类型设备
speech	语音和音频合成器
braille	盲人用点字法触觉回馈设备
embossed	盲文打印机
projection	各种投影设备
tty	使用固定密度字母删格的媒介，比如电打字机和终端

css中13中设备特性：

特性	特性值	使用min/max前缀	说明
width	400px	允许	浏览器窗口宽度
height	200px	允许	浏览器窗口高度
device-width	400px	允许	设备屏幕分辨率的宽度值
device-height	400px	允许	设备屏幕分辨率的高度值
orientation	portrait或者landscape	不允许	浏览器窗口是横向还是纵向，当高度大于宽度的时候，特性值是portrait，否则landscape
aspect-ratio	比例值，16/9	允许	浏览器窗口的纵横比例，比例值为浏览器宽度/高度
device-aspect-ratio	同上	同上	屏幕分辨率纵横比，比例值为设备屏幕分辨率的宽度值/高度
color	整数值	允许	设备使用多少位颜色值，若不是彩色设备，该值为0
color-index	整数值	允许	彩色表中的彩色数值
monochrome	整数值	允许	单色帧缓冲器中每像素的字节数
resolution	分辨率值 ，300dpi	允许	设备分辨率
scan	指定两个值：progressive/interlace	不允许	电视机设备的扫描方式，progressive表示逐行扫描，interlace：隔行扫描
grid	0/1	不允许	设备是基于删格还是基于位图，基于删格该值为0

@supports

@supports (display:grid) {
    
    //在浏览器支持css网格布局的时候，使用该样式代码
}