@media 媒体查询
基本语法
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
通过几个小案例就能简单学会媒体查询
案例一:当屏幕宽度小于 600px 时生效的规则
@media screen and (max-width: 600px) { }
案例二:当屏幕宽度在 600px 到 1200px 之间时生效的规则
@media screen and (min-width: 600px) and (max-width: 1200px) { }
案例三:当用户点击打印页面时,生效的规则
@media print { }
案例四:当手机横屏时生效的规则:
@media (orientation: landscape) { }
案例五:当 hover 无法生效时,应用的规则。比如手机上只有触摸,没有 hover 功能。
@media (hover: none) { }
案例六:使用 pointer 实现更精确的规则:
@media (pointer: none) { }
/* 表示没有指针、没有触摸。用户可能只能使用键盘,或者语言输入。 */
@media (pointer: fine) { }
/* 表示鼠标,即用户能点击精确的小片区域,比如鼠标。 */
@media (pointer: coarse) { }
/* 表示触摸,即用户无法点击精确的区域,此时应该提供较大的点击区域。 */