因为当今手机和平板的不断流行,使前端技术人员不得不考虑网站对于这些电子设备的展现效果。而传统的写法,貌似已经不适应了这种发展。于是出来一个新潮的词语“响应式”,实现响应式设计的主要途径是使用 CSS 媒体查询。其实从css2版本开始,就可以通过媒体类型在 CSS 中获得媒体支持。它可以将我们的网站,在不同的分辨率中而展示不同的布局样式。进而提高较好的用户体验。这篇文章,我就带着各位一起来探讨媒体查询的用法和效果吧!

媒体查询规则
  1. @media all and (min-width800px) { ... } 
@media all 是媒体类型,也就是说,将此 CSS 应用于所有媒体类型。
(min-width:800px) 是包含媒体查询的表达式,如果浏览器的最小宽度为 800 像素,则会告诉浏览器只运用下列 CSS。

简单的写法:
  1. @media (min-width:800px) { ... } 
复杂表达式:
  1. @media (min-width:800px) and (max-width:1200px) { ... } 
如果您想要创建一个仅在最小宽度为 800 像素且最大宽度为 1200 像素时应用的样式

使用not:
  1. @media (not min-width:800px) { ... } 
当最小宽度不是 800 像素时,会应用下列 CSS 规则。这些示例只是将像素作为媒体查询中的测量单位,但是测量单位并不仅限于像素。您可以使用任何有效的 CSS 测量单位,比如厘米 (cm)、英寸 (in)、毫米 (mm) 等

不带 min- 和 max- 前缀:
  1. @media (width:800px) and (height:400px) { ... } 
当屏幕正好是 800 像素宽、400 像素高时。现实中,像这样的媒体查询可能过于具体而不太有用。检测精确维度是大多数网站访问者都不可能遇到的一个场景。通常情况下,响应式设计会使用范围来执行屏幕检测。

媒体查询的使用
首先我写了一段简单的html代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>无标题文档</title> 
  6. <style type="text/css"> 
  7. .demo{width:1000px; margin:0 auto;} 
  8. .demo .test{ width:100%; text-align:center; color:red; font-size:40px; font-weight:bold;} 
  9. </style> 
  10. </head> 
  11.  
  12. <body> 
  13. <div class="demo"> 
  14.     <div class="test"> 
  15.         1515 
  16.     </div> 
  17. </div> 
  18. </body> 
  19. </html> 
效果如下:

这是在578分辨率情况下显示的。显然这个是不自适应屏幕的,因为css demo的定义就已经注定了他的固定宽度一定是1000。于是我们添加下媒体css
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>无标题文档</title> 
  6. <style type="text/css"> 
  7. .demo{width:1000px; margin:0 auto;} 
  8. .demo .test{ width:100%; text-align:center; color:red; font-size:40px; font-weight:bold;} 
  9. @media screen and (max-width:620px){ 
  10.     .demo{ width:100%;} 
  11.     .demo .test{ color:blue; font-size:18px;} 
  12.     } 
  13. </style> 
  14. </head> 
  15.  
  16. <body> 
  17. <div class="demo"> 
  18.     <div class="test"> 
  19.         1515 
  20.     </div> 
  21. </div> 
  22. </body> 
  23. </html> 
我们首先判断小于620宽度的时候, demo宽度改变为100%。然后再改变test的颜色和字体。我们再来看下效果

虽然是个小小的例子。但我们可见上图其实已经实现了自适应的一个功能。希望大家可以举一反三。

媒体查询的效果如下图
(电脑版)


(平板版)


(手机端)


大家在使用的时候,可以提前在新建文档中练练手。我上面所述的媒体查询规则只是部分。一些不常用的,我没有写出来。更详细的资料可以参考他们的官方网站:http://www.ibm.com/developerworks/cn/web/wa-cssqueries/

 
返回顶部