使用CSS3 Media Queries实现网页自适应(转)
当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。
先看看它的效果
在开始之前,点击最终预览来看看它的效果。改变浏览器的宽度,你将会看到页面布局会跟着自动改变。
概述
当屏幕分辨率大于1024px时,网页宽度将会是980px。用CSS3媒体查询(Media query)来检验屏幕分辨率,如果小于980px,页面宽度将会用自适应来取代固定宽度;如果小于650px,主题和边栏(content container and sidebar )将会撑满屏幕并一列显示。
HTML 代码
以下只是代码的主题结构,我用了“pagewrap”容器封装 “header”, “content”, “sidebar”, 和 “footer” together.
- <div id=”pagewrap”>
- <header id=”header”>
- <hgroup>
- <h1 id=”site-logo”>Demo</h1>
- <h2 id=”site-description”>Site Description</h2>
- </hgroup>
- <nav>
- <ul id=”main-nav”>
- <li><a href=”#”>Home</a></li>
- </ul>
- </nav>
- <form id=”searchform”>
- <input type=”search”>
- </form> </header>
- <div id=”content”>
- <article> blog post </article>
- </div>
- <aside id=”sidebar”>
- <section> widget </section>
- </aside>
- <footer id=”footer”> footer </footer>
- </div>
HTML5.js
请注意上面我用了html5,但低于IE9版本IE浏览器并不支持<header>, <article>, <footer>, <figure>等html5标签,现在用js脚本来让它们支持。
- <!–[if lt IE 9]>
- <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
- <![endif]–>
CSS
把HTMl5元素定义成块(display: block;)
下面将会用CSS吧HTML5元素 (article, aside, figure, header, footer等)定义成块
- article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
- {display: block;}
主体结构的CSS样式
“pagewrap”容器宽度为980px,header高度为160px.”content”容器宽600px且向左浮动,边栏”sidebar”宽280px并向右浮动。
- #pagewrap {width: 980px;margin: 0 auto;}
- #header {height: 160px;}
- #content {width: 600px;float: left;}
- #sidebar {width: 280px;float: right;}
- #footer {clear: both;}
第一步效果预览
第一步演示:点击我。注意现在还不能自适应,改变浏览器宽度后网页结构并不会跟着改变。
CSS3媒体查询(CSS3 Media Query)
媒体查询脚本(Media Queries Javascript)
IE8或者更低的版本不支持CSS3媒体查询,但通过添加脚本 css3-mediaqueries.js来实现这一功能。
- <!–[if lt IE 9]>
- <script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
- <![endif]–>
媒体查询CSS(Media Queries CSS)
为媒体查询创建新的CSS样式表,媒体查询如何工作请查看我以前的教程(media queries )
- <link href="media-queries.css" rel="stylesheet" type="text/css">
分辨率小于980px(流动布局)
当屏幕分辨率小于980px时,以下规则将会执行:
- pagewrap = 宽 95%
- content = 宽60%
- sidebar = 宽 30%
- @media screen and (max-width: 980px) {
- #pagewrap {width: 95%;}
- #content {width: 60%;padding: 3% 4%;}
- #sidebar {width: 30%;}
- #sidebar .widget {padding: 8% 7%;margin-bottom: 10px;}
- }
分辨率小于650px(一列布局)
当屏幕分辨率小于650px时,以下规则将会执行:
- header =宽度为自动(auto)
- searchform =搜索框距顶部5px(re-position the searchform to 5px top)
- main-nav = 静态布置
- site-logo = 静态布置
- site-description = 静态布置
- content = 宽度为自动并取消浮动
- sidebar = 宽度为100%并取消浮动
- @media screen and (max-width: 650px) {
- #header {height: auto;}
- #searchform {position: absolute;top: 5px;right: 0;}
- #main-nav {position: static;}
- #site-logo {margin: 15px 100px 5px 0;position: static;}
- #site-description {margin: 0 0 15px;position: static;}
- #content {width: auto;float: none;margin: 20px 0;}
- #sidebar {width: 100%;float: none;margin: 0;}
- }
分辨率小于480px
下面是小于480px时的CSS规则,主要针对iPhone
- html = 取消文字尺寸样式。默认情况下iPhone会自动调整到适合,你可以通过添加” -webkit-text-size-adjust: none;”来取消自动调整。
- main-nav = 文字尺寸为90%
- @media screen and (max-width: 480px) {
html {-webkit-text-size-adjust: none;}
#main-nav a {font-size: 90%;padding: 10px 8px;}
}
图片的灵活显示
为了让图片显示更加灵活,只需设置 max-width:100% 和 height:auto。然而 max-width:100% 和 height:auto在IE7中运行,但不能在IE8中运行(诡异的BUG啊),所以需要为IE8添加width:auto\9。
- img {max-width: 100%;height: auto;width: auto\9; /* ie8 */}
嵌入类视频的灵活显示
为了让嵌入视频显示更加灵活,需要用上面同样的方法。不知道是什么原因, max-width:100% (仅仅是视频时)不能被Safari识别,此时要用 width:100%代替
- .video embed,.video object,.video iframe {width: 100%;height: auto;}
初始化MeTa标签 Initial Scale Meta Tag (iPhone)
默认情况下,iPhone的Safari浏览器会自动缩小页面来显示,下面来使用Meta标签让网页字节按CSS样式显示。
- <meta name="viewport" content="width=device-width; initial-scale=1.0">
- 最后,根据文档我自己写了一个自适应布局的例子。
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
- <meta name="viewport" content="width=device-width, initial-scale=1"><!-- 让页面的宽度跟设备的宽度一致,不出现横向滚动条-->
- <title>自适应测试</title>
- <style type="text/css">
- html,body{margin:0; padding:0;}
- div{display:block;}
- .content{width:1240px; margin: 0 auto;}
- .div{ width:600px;height:400px; margin: 10px;}
- #main1,#main3{float:left;}
- #main2,#main4{float:right;}
- @media screen and (max-width: 980px) {//设置宽度大于165小于980的时候,显示两列布局。
- .content{width:100%;}
- .div{width:45%;height:600px;margin: 10px;}
- #main1,#main3{float:left;}
- #main2,#main4{float:right;}
- }
- @media screen and (max-width: 650px) {//设备可见宽度小于650的时候,用流式布局,为了不影响内容的显示,只有一列布局。
- .content{width:100%;}
- .div{ width:auto;height:400px; margin: 10px;}
- #main1,#main3{float:none;}
- #main2,#main4{float:none;}
- }
- </style>
- <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
- </head>
- <body>
- <div class="content">
- <div id="main1" style="background:red;" class="div"></div>
- <div id="main2" style="background:blue;" class="div"></div>
- <div id="main3" style="background:black;" class="div"></div>
- <div id="main4" style="background:yellow;" class="div"></div>
- </div>
- </body>
使用CSS3 Media Queries实现网页自适应(转)的更多相关文章
- 使用CSS3 Media Queries实现网页自适应
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...
- Css3 Media Queries移动页面的样式和图片的适配问题(转)
CSS3 Media Queries 摘自:http://www.w3cplus.com/content/css3-media-queries Media Queries直译过来就是“媒体查询”,在我 ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- CSS3 Media Queries 简介
原文链接:Introduction to CSS3 Media Queries 原文日期: 2014年2月21日 翻译日期: 2014年2月26日 翻译人员: 铁锚 简介 随着移动设备的日益普及,we ...
- [转]响应式web设计之CSS3 Media Queries
开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
- CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- CSS3 Media Queries 片段
CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...
- CSS3 Media Queries模板
使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (m ...
随机推荐
- winform最小化到托盘
1.拖取NotifyIcon控件.将该控件的visible设成false. 2.指定NotifyIcon的Icon(很重要,否则最小化后找不到窗口). 3.找到window的SizeChanged事件 ...
- nth-child和nth-of-type的区别
以前一般都用:nth-child,后来知道了:nth-of-type,然后就一般用nth-of-type 它们两有什么区别呢? 首先来看个现象: 假如有这样一个HTML结构 <div class ...
- Android中进程生命周期的优先级
“我们不是生产者,我只是大自然的搬运工.” 学习Android最好的途径当然是强大的官方文档了,其中在Processes and Threads一节中对于进程生命周期淘汰优先级,有着详细的介绍.原文如 ...
- UIView--UIImageView
1.contentMode view.contentMode = UIViewContentModeScaleAspectFill; 2.是否实现触摸 3.简单实现动画 图片的名字为campFire0 ...
- 消除多余的row
tableviewName.tableFooterView = [[UIView alloc]initWithFrame:CGRectZero];
- 加密html
2009年4月4日 周六 22:18 <HTML> <HEAD> <meta http-equiv="Content-Type" content=&q ...
- PHP基础之 file_get_contents() 函数
定义和用法 file_get_contents() 函数把整个文件读入一个字符串中. 和 file() 一样,不同的是 file_get_contents() 把文件读入一个字符串. file_get ...
- MySQL基础之 path环境变量的作用 (科普)
在谈mysql配置环境变量之前,先谈一下windows环境变量的作用,有时候在windows cmd窗口运行命令时,经常会出现“XXX不是内部或外部命令的提示” 原因是系统没有找到执行相应命令的文件( ...
- 如何使用composer?
/** *@测试环境:我笔记本 本地xampp集成环境 *@操作系统:Windows 7 **/ 安装方法:官方有很详细的介绍,这里就不重复造轮子了. 官方链接:http://docs.phpco ...
- EasyUI 使用
1.面板的使用 <div id="box" > <p>内容区域</p> </div> <div id="tt&quo ...