计算机教程

HTML5实践 — CSS3 Media Queries

6 7月 , 2019  

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

  转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html

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

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

CSS3 Media Queries

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

  

Max Width

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

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

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

<link rel="stylesheet" media="screen and (max-width: 600px)"   />

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

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;    }  } 

必赢娱乐棋牌,  CSS3 Media Queries

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

For iPhone 4

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

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

  Max Width

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

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

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

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

For iPad

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

<link rel="stylesheet" media="all and (orientation:portrait)"  >   <link rel="stylesheet" media="all and (orientation:landscape)"  > 

  Min Width

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

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

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

附:CSS3 Media Queries 浏览器兼容性表

必赢娱乐棋牌 1

 

  多个 Media Queries

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

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

CSS3 Media Queries 应用案例

需要在下面这些支持 Media Queries 特性的浏览器中浏览:IE9+, Firefox,
Chrome 和 Safari。浏览每个站点,看页面布局是如何响应浏览器窗口变化的。

  设备Width

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

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

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


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图