使用CSS3 Media Queries实现网页自适应
2016-03-23 09:31
671 查看
当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。
效果预览 代码下载
在开始之前,点击最终预览来看看它的效果。改变浏览器的宽度,你将会看到页面布局会跟着自动改变。
当屏幕分辨率大于1024px时,网页宽度将会是980px。用CSS3媒体查询(Media query)来检验屏幕分辨率,如果小于980px,页面宽度将会用自适应来取代固定宽度;如果小于650px,主题和边栏(content container and sidebar )将会撑满屏幕并一列显示。
以下只是代码的主题结构,我用了“pagewrap”容器封装 “header”, “content”, “sidebar”, 和 “footer” together.
请注意上面我用了html5,但低于IE9版本IE浏览器并不支持<header>, <article>, <footer>, <figure>等html5标签,现在用js脚本来让它们支持。
下面将会用CSS吧HTML5元素 (article, aside, figure, header, footer等)定义成块
“pagewrap”容器宽度为980px,header高度为160px.”content”容器宽600px且向左浮动,边栏”sidebar”宽280px并向右浮动。
第一步演示:点击我。注意现在还不能自适应,改变浏览器宽度后网页结构并不会跟着改变。
IE8或者更低的版本不支持CSS3媒体查询,但通过添加脚本 css3-mediaqueries.js来实现这一功能。
为媒体查询创建新的CSS样式表,媒体查询如何工作请查看我以前的教程(media
queries )
当屏幕分辨率小于980px时,以下规则将会执行:
pagewrap = 宽 95%
content = 宽60%
sidebar = 宽 30%
当屏幕分辨率小于650px时,以下规则将会执行:
header =宽度为自动(auto)
searchform =搜索框距顶部5px(re-position the searchform to 5px top)
main-nav = 静态布置
site-logo = 静态布置
site-description = 静态布置
content = 宽度为自动并取消浮动
sidebar = 宽度为100%并取消浮动
下面是小于480px时的CSS规则,主要针对iPhone
html = 取消文字尺寸样式。默认情况下iPhone会自动调整到适合,你可以通过添加” -webkit-text-size-adjust: none;”来取消自动调整。
main-nav = 文字尺寸为90%
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。
为了让嵌入视频显示更加灵活,需要用上面同样的方法。不知道是什么原因, max-width:100% (仅仅是视频时)不能被Safari识别,此时要用 width:100%代替
默认情况下,iPhone的Safari浏览器会自动缩小页面来显示,下面来使用Meta标签让网页字节按CSS样式显示。
改变你的浏览器宽度将会看到媒体查询让版式的变化,别忘了在其他设备上检验这一效果。
效果预览 代码下载
先看看它的效果
在开始之前,点击最终预览来看看它的效果。改变浏览器的宽度,你将会看到页面布局会跟着自动改变。
概述
当屏幕分辨率大于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: 6 4000 00px;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样式表,媒体查询如何工作请查看我以前的教程(mediaqueries )
<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规则,主要针对iPhonehtml = 取消文字尺寸样式。默认情况下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">
最终预览
改变你的浏览器宽度将会看到媒体查询让版式的变化,别忘了在其他设备上检验这一效果。相关文章推荐
- js+css使文本框自动适应内容的高度
- Jquery实现textarea根据文本内容自适应高度
- jQuery实现等比例缩放大图片让大图片自适应页面布局
- Iframe实现跨浏览器自适应高度解决方法
- javascript实现瀑布流自适应遇到的问题及解决方案
- 使用javascript实现Iframe自适应高度
- Android中让图片自适应控件的大小的方法
- Android制作漂亮自适布局键盘的方法
- 基于JTable的列宽与内容自适应的实现方法
- 关于UITabelViewCell的自适应
- 搜索框 - div中input自适应
- android控件根据屏幕大小自适应
- SHINE OPENCART 自适应 多用途主题模板 ABC-0021
- label 自适应大小
- css 背景图不拉伸自适应屏幕大小
- Android技巧之自动加载布局
- Unity3d gui自适应屏幕
- Iframe相关
- UILabe 自适应宽高
- 网页自动适应屏幕宽度的CSS代码