媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定css样式,媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
语法格式如下:@media 媒体类型 逻辑运算符 (媒体特征){css样式}
媒体类型有四种,all代表所有的媒体设备;print 用于打印机;screen 用于电脑屏幕、平板、手机等(这也是我们通常选择的媒体类型);speech 用于屏幕阅读器。
逻辑运算符:这个我们应该不陌生。分为三种:and、or、not。
媒体特征:书写格式与css样式类似,都是属性名:属性值(例如min-width:200px)。