学习地址:https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
CSS Media Query学习笔记
Pattern:
@media media-type and (media-feature-rule) { /* CSS rules go here */ }
media-type取值(忽略的话,默认是all):
all(面向所有media,默认)、
print(面向打印)、
screen(面向屏幕)、
speech()。
media-feature-rule取值:
取值可以是长宽:
min-width(超过这个最小宽度才符合),
max-width(小于这个宽度才符合)、
width(刚好这个宽度才符合)。
还有height及他的min和max可以作为值。
取值可以是方向:
orientation(可以是landscape横屏或portrait竖屏)。
取值可以是 是否使用可悬停指针设备(一般是鼠标):
例子:hover: hover
取值可以是指针的类型:
pointer: none(不使用任何指针设备,可能是用键盘或者语音控制),
pointer: fine(精确的指针设备,如鼠标),
pointer: coarse(不精确的指针设备,如手指触摸屏)
其他取值看:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features
例子:
@media screen and (width: 600px) { body { color: red; } }
结合多个rule的逻辑
and例子:
@media screen and (min-width: 600px) and (orientation: landscape) { body { color: blue; } }
or逻辑例子(使用逗号隔开):
@media screen and (min-width: 600px), screen and (orientation: landscape) { body { color: blue; } }
not 逻辑例子:
@media not all and (orientation: landscape) { body { color: blue; } }