Media Queries(跨平台设计) 根据客户端浏览器尺寸加载特定的CSS

时间:2018-05-31 17:29:25          访问次数:0

在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能。你可以为媒介类型添加某些条件,检测设备并采用不同的样式表。

  例如,你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中,这样,在不改变文档内容的情况下,不同的设备可以呈现不同的界面外观。阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀网站案例。


看下这个 在线演示,调整你的浏览器窗口尺寸,看看它的变化。


Max Width下面的样式会在可视区域的宽度小于 600px 的时候被应用。

@media screen and (max-width: 600px) { 
 
  .class { 
 
    background: #ccc; 
 
  } 
 
}

如果你想链接到一个单独的样式表,把下面的代码放在标签里。


Min Width下面的样式会在可视区域的宽度大于 900px 的时候被应用。

@media screen and (min-width: 900px) { 
 
  .class { 
 
    background: #666; 
 
  } 
 
}

 

Multiple Media Queries你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

@media screen and (min-width: 600px) and (max-width: 900px) { 
 
  .class { 
 
    background: #333; 
 
  } 
 
}

Device Width下面的样式会在 max-device-width 是 480px 的设备上触发。(提示:max-device-width 是设备的实际分辨率,而 max-width 指的是可视区域分辨率。)

@media screen and (max-device-width: 480px) { 
 
  .class { 
 
    background: #000; 
 
  } 
 
} 

For iPhone 4下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。

 

For iPad你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse) (作者: Cloud Four)。

   

Media Queries for IE遗憾是的,IE8 及更老版本的浏览器不支持 CSS3 Media Queries,不过可以使用 Javascript  弥补,下面是一些解决方案:

CSS Tricks - using jQuery to detect browser size

The Man in Blue - using Javascript

jQuery Media Queries Plugin


关键词:media,跨平台,设计,根据,客户端,浏览器,尺寸,加载,特定
分享到
  • QQ空间
  • QQ好友
  • 新浪微博
  • 腾讯微博
  • 人人网
  • 微信
  • 更多

扫一扫

让网页瞬间转移到移动设备