`
wfsheep
  • 浏览: 15831 次
文章分类
社区版块
存档分类
最新评论

媒体查询学习和简单测试

 
阅读更多

最近有同学问到了媒体查询引入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内部。



分享到：
| ie才认识的注解
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics