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"> |
CSS3 Media Queries 实现响应式设计的更多相关文章
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- CSS3 Media Queries实现响应式布局
概念我就不在这里写啦.大家可以看看以下网页: http://www.runoob.com/cssref/css3-pr-mediaquery.html http://www.w3cplus.com/c ...
- 怎样使用CSS3媒体查询(Media Queries)制作响应式网站
自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...
- 让IE支持CSS3 Media Query实现响应式Web设计
如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况 ...
- CSS3 Media Query实现响应Web设计(宽度为不同的移动设备)
现在的屏幕分辨率.小到320px(iPhone),大到2560px或甚至更高(大显示屏).范围内变化很大.除了使用传统的台式机.用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面. 这 ...
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- [转]CSS3 Media Query实现响应布局
讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...
- [转]响应式web设计之CSS3 Media Queries
开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
随机推荐
- Unity需要频繁登录是什么情况
这个问题会在Unity 5.5.0p3中修复 都一样,等新版本吧
- Struts2 验证码图片实例
本文转载于DongLiYang的博客http://www.cnblogs.com/dongliyang/archive/2012/08/24/2654431.html 其中修改过一部分,针对使用注解而 ...
- 超简单——自己搭建ftp服务器
自己搭建ftp服务器 之所以没选择serv-u,一是因为收费,虽说网上有破解版,但是使用过程中发现破解版很不稳定,经常异常死掉,随后改选用免费的filezilla. 1软件获取 从百度搜索 FileZ ...
- _web基础_servlet基础
一.了解Servlet的概念 Servlet定义:Servlet是基于Java技术的Web组件,由容器管理并产生动态的内容.Servlet引擎作为WEB服务器的扩展提供支持Servlet的功能.Ser ...
- [转]使用Enumeration和Iterator遍历集合类
原文地址:http://www.cnblogs.com/xwdreamer/archive/2012/05/30/2526268.html 前言 在数据库连接池分析的代码实例中,看到其中使用Enume ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- android studio 提示翻译
1. you can import your settings from a previous version of Studio可以导入您的设置从先前版本的工作室 2. I want to impo ...
- Bootstrap JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...
- Scala中apply的用法
Scala中的 apply 方法有着不同的含义, 对于函数来说该方法意味着调用function本身, 以下说明摘自Programming in Scala, 3rd Edition Every fun ...
- 【BZOJ-3514】Codechef MARCH14 GERALD07加强版 LinkCutTree + 主席树
3514: Codechef MARCH14 GERALD07加强版 Time Limit: 60 Sec Memory Limit: 256 MBSubmit: 1288 Solved: 490 ...