time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】10、CSS3的media queries介绍及使用示例

【HTML5实践教程】10、CSS3的media queries介绍及使用示例

时间:2012-12-05 23:28 点击:1039次 字体:[ ]




  CSS2允许你对特定media类型制定样式,例如针对屏幕或者打印机。css3提供了更加强大的media queries,你可以针对不同media类型设置表达式,根据不同的条件设置不同的样式。例如你可以为大屏幕设置一种样式,为mobile设置另外一种样式。这个功能相当强大,你可以不修改页面内容的情况下,为不同设备提供不同的样式效果。下面的课程我们将会介绍到一些使用该技术的站点。

  CSS3 Media Queries

  打开我的demo页面,调整浏览器打大小,查看页面布局变化情况。

  Max Width

  当页面视图区域小于600px宽度的时候,css会被使用到。

 

  1. @media screen and (max-width600px) { 
  2.   .class { 
  3.     background#ccc
  4.   } 

  你也可以使用下面的方式,在页面的<head>中引用外部css文件。

  1. <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 

  Min Width

  当视图区域大于900px宽度的时候,css会被使用到。

 

  1. @media screen and (min-width900px) { 
  2.   .class { 
  3.     background#666
  4.   } 

  多个 Media Queries

  你可以把多个media queries组合在一起,当视图区域宽度在600px到900px之间的时候,会使用下面的css。

  1. @media screen and (min-width600px) and (max-width900px) { 
  2.   .class { 
  3.     background#333
  4.   } 

  设备Width

  下面的css会在 max-device-width为480px的时候使用,例如iphone。

  note:max-device-width指的是设备实际分辨率,max-width指的是可是区域尺寸。

  1. @media screen and (max-device-width480px) { 
  2.   .class { 
  3.     background#000
  4.   } 

  针对 iPhone 4

  下面的时针对iphone4的css。

  1. <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> 

  针对 iPad

  你也可以在ipad上检查定位(portrait 或者 landscapse)。

 

  1. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">  
  2. <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

  针对Internet Explorer的Media Queries

  因为ie8以及之前版本的ie浏览器不支持media query,你需要使用JavaScript的hack计较解决问题。下面是一些解决方案:

  

  示例站点

  你可以使用支持media query的浏览器访问下面的站点,例如:Firefox, Chrome, 和 Safari。可以查看他们针对浏览器宽度所做的布局响应。

  Hicksdesign

  • 大尺寸: 3 列sidebar
  • 小尺寸: 2 列sidebar (中间的sidebar跑到了左边)
  • 更小尺寸: 1 列sidebar (最右边的跑到了logo下面)
  • 最小尺寸: 没有sidebar (logo 和 右侧的sidebar 上移,其他sidebar 下移)

【HTML5实践教程】10、CSS3的media queries介绍及使用示例_www.fengfly.com

 

  Colly

  页面布局根据浏览器的可视区域,在1列、2列和4列之间切换。

【HTML5实践教程】10、CSS3的media queries介绍及使用示例_www.fengfly.com

  A List Apart

大尺寸:导航在上不部, 1行图片

中等尺寸:导航在左边, 3列图片

小尺寸:导航在上部,logo没有背景图片, 3列图片

【HTML5实践教程】10、CSS3的media queries介绍及使用示例_www.fengfly.com

  Tee Gallery

  他和之前的Colly有点像,不同点在于它的图片会根据页面布局的变化,进行缩放。这里使用的技巧就是,对图片使用百分比宽度,代替固定宽度,例如:width=100%。

【HTML5实践教程】10、CSS3的media queries介绍及使用示例_www.fengfly.com

  总结

  我们需要注意到,针对mobile做了一个css,并不意味着我们的站点对mobile设备就是优化的。对mobile设备进行优化,网站图片和html代码同样需要缩小尺寸,这样才有益于加载。media query做到的只是设计展现,而不是优化操作。

        demo查看地址:http://www.webdesignerwall.com/demo/media-queries/

  原文地址:http://webdesignerwall.com/tutorials/css3-media-queries

 

转自:http://www.cnblogs.com/softlover/archive/2012/11/27/2787429.html



本文地址 : http://www.fengfly.com/plus/view-210742-1.html
标签: CSS3 HTML5
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: