花一分钟简单认识 CSS 中的规则 ——媒体查询 @media

@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) { } 
/* 表示触摸，即用户无法点击精确的区域，此时应该提供较大的点击区域。 */