媒体查询学习和简单测试 -

wfsheep

浏览: 17401 次

最近访客更多访客>>

Fwj2019

qdhrb123

chenfeng_lian

jhon_brucey

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (30)

社区版块

存档分类

媒体查询学习和简单测试

最近有同学问到了媒体查询引入css时怎么调试，于是我想了一个小方法，并且同时研究了一下媒体查询这个属性来的。

现在大家都在说响应式页面设计，依我个人看来，响应式最低的要求就是----在不同的屏幕上展现不同的页面。而媒体查询是构成这一切的基础，根据msdn的说明，媒体查询的是根据不同的规则应用不同的样式的一种方式，其具体语法如下：

@media <media-query> {
    /* media-specific rules */
}
<link rel="stylesheet" type="text/css" href="a.css" media="<rules>" />

根据语法，惊奇的发现，原来这玩意就那么简单。对哈，其实就是简单了，你可以理解为他就是一个css里面的if。

而if里面的常用变量要使用下面表格里面的哦。当然，除了media 还有only等选项，关于其他属性，本文就不再讨论了

名称	摘要	说明
width	视口宽度
height	视口高度
aspect-ratio	视口横纵比
Pixel density	设备的像素密度（ppi）
color	设备支持的色彩，比如256位等
print	指定在打印时使用的样式
update-frequency	刷新频率	Media Queries Level 4中的属性
overflow-block	溢出的处理方式，是block？	Media Queries Level 4中的属性
overflow-inline	溢出的处理方式，是inline？	Media Queries Level 4中的属性
device-width	设备的宽度	Media Queries Level 4中的属性
device-height	设备的高度	Media Queries Level 4中的属性
device-aspect-ratio	设备的横总比	Media Queries Level 4中的属性

* 图表中的media查询level 4 为w3c正在进行草案中，所以不推荐使用。

废话不说了，上测试代码，大家可以把这一段代码保存到一个html里面，执行一下，你会看到随着屏幕的大小的变化，展示的数据不一样哦。

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>media query test</title>
	<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 400px)">
	<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 400px) and (max-width: 800px)">
	<link rel="stylesheet" type="text/css" href="c.css" media="screen and (min-width: 800px)">
</head>
<body>
    
</body>
</html>

a.css

body:after {
<span style="white-space:pre">	</span>content: 'small';
}

b.css

body:after {
<span style="white-space:pre">	</span>content: 'biger';
}

c.css

body:after {
<span style="white-space:pre">	</span>content: 'much biger';
}

这里有几个注意点：

1、只要是是写在link中的css代码都会被加载，只是根据media属性的不同执行不同的css内容而已，想通过media控制css文件加载时不行的。

2、在chrome中使用resize window时，可以看到以上代码生效，而在模拟手机调试环境中必须把screen下面的emulate viewport勾选去掉才能生效，在实际手机上貌似可以生效。

总之，link的media属性和@media类似，是通过判断rule来判断是否使用media中的css，如果使用media，其作用范围为整个加载的css文件，而使用@media则规则只作用于media内部。

分享到：

input事件的小研究 | ie才认识的注解

2014-10-12 21:06
浏览 360
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

媒体查询学习和简单测试

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

媒体查询学习和简单测试

评论

发表评论

相关推荐

最近访客更多访客>>