媒体查询

媒体查询

媒体查询也是一种移动端的解决方案

写法就是以@media screen 来开头，有min-width、max-width、min-height、max-height.

一般情况下我们只是针对宽度来设置不同的样式，高度可以累积增加，不固定。

@media screen and (min-width: 320px) {
	html {
		font-size: 18px;
	}
}
@media screen and (min-width: 640px) {
	html {
		font-size: 20px;
	}
}
@media screen and (max-width: 960px) {
	html {
		font-size: 22px;
	}
}

上面一种写法少了max-width，其实也就等同于下面这种

@media screen and (min-width: 319px) {
	html {
		font-size: 18px;
	}
}
@media screen and (min-width: 320px) and (max-width: 959px) {
	html {
		font-size: 20px;
	}
}
@media screen and (max-width: 960px) {
	html {
		font-size: 22px;
	}
}