css媒体查询移动优先和pc优先

移动优先，默认你是用手机浏览该网页的，当你用pc浏览时，就会以min-width进行递增式媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wap {
			font-size: 20px;
		}
		@media only screen and (min-width: 300px) {
			.wap {
				font-size: 40px;
			}
		}
		@media only screen and (min-width: 700px) {
			.wap {
				font-size: 60px;
			}
		}
	</style>
</head>
<body>
	<p class="wap">移动优先</p>
</body>
</html>

pc优先与之相反，默认你是用pc浏览该网页，当屏幕缩小时以max-width递减式进行媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.pc {
			font-size: 60px;
		}
		@media only screen and (max-width: 700px) {
			.pc {
				font-size: 40px;
			}
		}
		@media only screen and (max-width: 300px) {
			.pc {
				font-size: 20px;
			}
		}
	</style>
</head>
<body>
	<p class="pc">pc优先</p>
</body>
</html>
posted @ 2017-07-28 15:10  wmui  阅读(2459)  评论(0)  编辑  收藏  举报