css Media媒体查询常用属性

使用@media规则声明媒体查询，主要用于控制在不同的设备上显示不同的效果

媒体类型：
screen 适用于电脑屏幕、平板电脑、智能手机等
print 适用于打印预览

特性
width 可视区域的宽度
orientation 视窗的旋转方向（横屏landscape，默认竖屏模式）。

运算符：
and 并且
, 或者

@media screen and (min-width: 600px) and (max-width: 1024px) , (orientation: landscape) {}

@media print {}

prefers-reduced-motion 减弱动画效果

@media (prefers-reduced-motion: no-preference) {
　　//当电脑开启了动画效果时才进入
	.logo {
		animation: logo-spin infinite 20s linear;
	}
}

device-pixel-ratio 高分屏缩放比例

@media (-webkit-min-device-pixel-ratio: 1.5) {
	logo{
		color: red;
	}
}

响应初始化配置

在html文件中，网页顶部标签中需进行初始化配置：

name=“viewport”：标记设备为视口；
width = device-width：宽度等于当前设备的宽度；
initial-scale：初始的缩放比例（默认为1.0）；
minimum-scale：缩放的最小比例（默认为1.0）；
maximum-scale：缩放的最大比例（默认为1.0）；
user-scalable：是否可手动缩放（默认为no）。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">