当今屏幕分辨率从 320px
(iPhone)到 2560px
(大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。
先看看它的效果
在开始之前,点击最终预览来看看它的效果。改变浏览器的宽度,你将会看到页面布局会跟着自动改变。
概述
当屏幕分辨率大于1024px
时,网页宽度将会是980px
。用CSS3媒体查询(Media query)来检验屏幕分辨率,如果小于980px
,页面宽度将会用自适应来取代固定宽度;如果小于650px
,主题和边栏(content container and sidebar )将会撑满屏幕并一列显示。
HTML 代码
以下只是代码的主题结构,我用了pagewrap
容器封装header
,content
,sidebar
和footer
。
<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]–>
//国内无法访问,可替换成:http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js
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]–>
//国内无法访问,可替换成:http://cdn.staticfile.org/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js
媒体查询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标签(iPhone)
默认情况下,iPhone的Safari浏览器会自动缩小页面来显示,下面来使用Meta标签让网页字节按CSS样式显示。
<meta name="viewport" content="width=device-width; initial-scale=1.0">
最终预览
改变你的浏览器宽度将会看到媒体查询让版式的变化,别忘了在其他设备上检验这一效果。
梅2017 年 10 月 28 日下午 10:05
我是新手可以有偿帮我把网站修改成自适应的吗?
snowtraces*2017 年 10 月 28 日下午 10:44
把网站贴出来吧我看看,或者留个邮箱
梅2017 年 10 月 29 日下午 12:24
我自己仿的一个网站还没上线,[email protected]
snowtraces*2017 年 11 月 07 日下午 1:42
抱歉,帮不了你,最近工作和生活上的事比较多
梅2017 年 10 月 28 日下午 9:56
我是新手可以帮我做吗
房子2017 年 08 月 22 日下午 3:20
留言板功能是怎么实现的呢
snowtraces*2017 年 08 月 22 日下午 6:48
什么意思?
房子2017 年 08 月 25 日下午 2:23
额 就是这下面评论这边 你是用插件吗 还是自己写的呢 新手请教一下
snowtraces*2017 年 08 月 26 日上午 6:36
自己写的啊,在原生的基础上,将下面的隐藏,focus事件触发显示
盘子2017 年 07 月 19 日上午 11:56
文章不错学到了.
hello策2016 年 11 月 15 日上午 11:44
我这边试了一下效果,在IE8下就不行了
snowtraces*2016 年 11 月 15 日上午 11:57
主要是Google上不去,把那个js改成国内的公共库就好