媒体查询: 根据不同的分辨率 响应不同的结果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>媒体查询2</title>
<style type="text/css">
@media screen and (min-width:992px) {
p{color: #f00;}
}
@media screen and (min-width:768px) and (max-width:991px) {
p{color: #0f0;}
}
@media screen and (max-width:767px ) {
p{color: #00f;}
}
</style>
</head>
<body>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa labore possimus quas rerum tenetur! Atque doloribus enim eveniet ex explicabo hic, illo, libero magnam perspiciatis possimus quibusdam quidem totam voluptas.</span><span>Asperiores commodi consequuntur culpa doloremque eos error excepturi, expedita id ipsa laborum magni, natus obcaecati odio officia optio quaerat quo repellendus repudiandae tempore veniam. Aspernatur dicta illo maxime sed similique?</span></p>
</body>
</html>