码迷,mamicode.com
首页 > Web开发 > 详细

css媒体查询

时间:2017-04-29 18:51:51      阅读:552      评论:0      收藏:0      [点我收藏+]

标签:web设计   宽高   class   oct   link   color   覆盖   import   dia   

先来段代码:

<!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媒体查询

标签:web设计   宽高   class   oct   link   color   覆盖   import   dia   

原文地址:http://www.cnblogs.com/gaoxuerong123/p/6785613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!