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