首页 > 代码库 > css媒体查询

css媒体查询

2024-09-18 06:51:47   218人阅读

先来段代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background-color: grey;
			}
			@media only screen and (max-width: 960px) {
				body{
				background-color: red;
			}
			@media only screen and (max-width: 768px) {
				body{
				background-color: orange;
			}
			@media only screen and (max-width: 320px) {
				body{
				background-color: green;
			}
		</style>
	</head>
	<body>
	</body>
</html>

　　上边用到了css的媒体查询，浏览器会根据视口的不同，来改变body的颜色。.媒体查询能使我们根据设备的各种功能特性来设定相应的样式。除此之外，还可以使用@import 指令在当前样式表中按条件引入其他样式表。@import url("phone.css") screen and(max-width:768px).[!!!:css的@import会增加http请求].

媒体查询能检测哪些特性：

最常用的是width(视口宽度)   device-width(屏幕宽度)

除此之外还有：orientation(检查设备横向还是纵向)aspect-ratio(基于视口宽高比。一个16：9比例的显示屏可以这样 aspect-ratio:16/9)device-aspect-ratio(和aspect-ratio类似。)等。通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。

用媒体查询改造我们的设计：

css代表层叠样式表，就是指样式表后边的样式会覆盖前边的样式，因此我们可以先针对大视口设计，针对小视口再用媒体查询重写.

加载媒体查询的最佳方法：

@media screen and (max-width:768px){}.Respond.js为IE8及更低版本增加媒体查询，但是不支持@import.如果用link的话会增加http请求数量。

内容参考：响应式Web设计 HTML5和CSS3实战。

 

css媒体查询


联系
我们