【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能。你可以为媒介类型添加某些条件,检测设备并采用不同的样式表。
例如,你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中,这样,在不改变文档内容的情况下,不同的设备可以呈现不同的界面外观。阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀网站案例。
看下这个 在线演示,调整你的浏览器窗口尺寸,看看它的变化。
Max Width
下面的样式会在可视区域的宽度小于 600px 的时候被应用。
1
2
3
4
5
|
@media screen and ( max-width : 600px ) { .class { background : #ccc ; } } |
如果你想链接到一个单独的样式表,把下面的代码放在<head>标签里。
1
|
<link rel= "stylesheet" media= "screen and (max-width: 600px)" href= "small.css" /> |
Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。
1
2
3
4
5
|
@media screen and ( min-width : 900px ) { .class { background : #666 ; } } |
Multiple Media Queries
你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
1
2
3
4
5
|
@media screen and ( min-width : 600px ) and ( max-width : 900px ) { .class { background : #333 ; } } |
Device Width
下面的样式会在 max-device-width 是 480px 的设备上触发。(提示:max-device-width 是设备的实际分辨率,而 max-width 指的是可视区域分辨率。)
1
2
3
4
5
|
@media screen and (max-device- width : 480px ) { .class { background : #000 ; } } |
For iPhone 4
下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。
1
|
<link rel= "stylesheet" media= "only screen and (-webkit-min-device-pixel-ratio: 2)" type= "text/css" href= "iphone4.css" /> |
For iPad
你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse) (作者: Cloud Four)。
1
2
|
<link rel= "stylesheet" media= "all and (orientation:portrait)" href= "portrait.css" > <link rel= "stylesheet" media= "all and (orientation:landscape)" href= "landscape.css" > |
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 浏览器兼容性表
CSS3 Media Queries 应用案例
需要在下面这些支持 Media Queries 特性的浏览器中浏览:IE9+, Firefox, Chrome 和 Safari。浏览每个站点,看页面布局是如何响应浏览器窗口变化的。
Hicksdesign
- 大尺寸: 3 列侧栏
- 较小尺寸: 2 列表侧栏 (中间一列下降到左边的列)
- 更小尺寸: 1 列侧栏 (右列上移到标志下方)
- 最小尺寸: 没有侧栏 (LOGO及右列上移,其他侧边栏列移到底部)
【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计的更多相关文章
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- 怎样使用CSS3媒体查询(Media Queries)制作响应式网站
自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...
- CSS3 Media Queries实现响应式布局
概念我就不在这里写啦.大家可以看看以下网页: http://www.runoob.com/cssref/css3-pr-mediaquery.html http://www.w3cplus.com/c ...
- Vue入门教程 第二篇 (数据绑定与响应式)
数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ message }} </ ...
- 转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解
目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果
- CSS3 Media Query实现响应Web设计(宽度为不同的移动设备)
现在的屏幕分辨率.小到320px(iPhone),大到2560px或甚至更高(大显示屏).范围内变化很大.除了使用传统的台式机.用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面. 这 ...
- WPF入门教程系列二十三——DataGrid示例(三)
DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...
- WPF入门教程系列三——Application介绍(续)
接上文WPF入门教程系列二——Application介绍,我们继续来学习Application 三.WPF应用程序的关闭 WPF应用程序的关闭只有在应用程序的 Shutdown 方法被调用时,应用程序 ...
随机推荐
- js设计模式总结-代理模式
代理模式 解决哪一类问题 从字面意思上理解,代理模式解决对一个对象的直接访问,这种直接访问可能是"不方便"的,所谓"不方便"可能是直接访问成本比较大(在前端领域 ...
- HBase的Write Ahead Log (WAL) —— API与基本概念
HBase的数据写入操作,会先记录到HLog中,再真正写入到MemStore中.前者是对写入友好的格式,后者是对查询友好的格式.所以前者吞吐量更高,写入成功率大,提高了系统的可靠性,“基本”可以实现宕 ...
- vmware 三种网络模式
Bridged方式:vm相当于局域网内的一台独立主机.可以通过局域网的网关访问互联网.vm和宿主机的关系就像连接在同一个hub的两个电脑. NAT方式(网络地址转换模式):vm可以上外网,可以访问宿主 ...
- js和jquery获取当前对象的子元素
开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...
- miniui
//android提供了一个库minui用于简单的UI输出,源码在bootable/recovery/minui中, //gr_init()和gr_font_size()为minui库提供方法,gr_ ...
- 转:OSGi 入门篇:模块层
OSGi 入门篇:模块层 1 什么是模块化 模块层是OSGi框架中最基础的一部分,其中Java的模块化特性在这一层得到了很好的实现.但是这种实现与Java本身现有的一些模块化特性又有明显的不同. 本文 ...
- SQL Server Reporting Service(SSRS) 第一篇 我的第一个SSRS例子
很早就知道SQL SERVER自带的报表工具SSRS,但一直没有用过,最近终于需要在工作中一展身手了,于是我特地按照自己的理解做了以下总结: 1. 安装软件结构 SSRS全称SQL Server Re ...
- Vs2010在C#类文件头部添加文件注释的方法
步骤: 1.VS2010 中找到(安装盘符以C盘为例) 32位操作系统路径:C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\Item ...
- python虚拟环境
sudo apt-get install python-virtualenv virtualenv --no-site-packages files cd files source ./bin/act ...
- final发布评语
final发布评语: 1.约跑(nice!)发布者:组长李权以及组员刘芳芳和于淼,对于约跑APP,final发布主要完成对于用户提出的(1.对话字数多导致头像被挤掉2.返回时没有完全退出)问题修改成功 ...