天蚕在你身边
不方便打电话？让天蚕联络你
重庆网络公司：目前流行的自适应网站建设，主要针对网页浏览器所在设备（电脑，pad，手机）的屏幕大小的不同，自动调节样式，以实现同一个网页在不同尺寸屏幕上都有好的阅读体验。下面我们来讲讲方法。
首先，自适应式设计要达到的目的无疑是非常有价值的，那么他是如何实现的呢？原理是利用css3的媒体查询(Media query)功能，可以根据设备尺寸来加载不同的css样式。下面我们看如何三步实现自适应浏览网页的设备尺寸。
第一步：head标签内添加meta viewport标签
移动设备的浏览器都可以通过当前屏幕的大小来自适应页面的大小。您可以使用viewport meta标签来重置屏幕的大小。下面的meta标签告诉移动浏览器使用设备的宽度来作为viewport的宽度，不要自动做缩放。
如：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在ie8和一些老的浏览器中需要引用下面的js文件，来实现媒体查询
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
第二步：HTML代码书写
如下面例子：有header，content，sidebar，footer；其中header的高度是固定的180px，content区域是600px，边栏是300px。
如下图所示：
第三步：CSS3样式表
css3的是自适应网站的关键因素。你可以使用媒体查询的特性，来根据设备的宽度，让页面使用不同的css样式。
如下的css规则会在屏幕宽度小于等于980时起作用：
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
你可以看到在上面的css文件中我将元素的宽度设置成了百分比，这样每块的宽度就都可以根据屏幕的宽度来自适应了。
下面的css样式定义适用于屏幕宽度小于等于700像素的设备，将#content和#sidebar元素的宽度设置成了auto，float设置成了none，这样就可以使内容区和边栏区都成了100%宽度，铺满屏幕了
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
对于屏幕尺寸小于480像素的设备，使用下面的css定义：
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
可以看出来在屏幕的宽度小于等于480像素的时候，header的高度会变为auto，而h1的字体被设置成了24像素，而边栏sidebar被隐藏掉了。
当然在实际应用中，你可以写出任意多的媒体查询。所有媒体查询css规则可以放在一个css文件中也可以分单独文件来放置。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
完整的示例html代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo: Responsive Design in 3 Steps</title>
<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<style type="text/css">
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font: bold 36px/100% Arial, Helvetica, sans-serif;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#header {
height: 180px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 300px;
float: right;
}
#footer {
clear: both;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
/* border & guideline (you can ignore these) */
#content {
background: #f8f8f8;
}
#sidebar {
background: #f0efef;
}
#header, #content, #sidebar {
margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
border: solid 1px #ccc;
}
</style>
</head>
<body>
<div id="pagewrap">
<div id="header">
<h1>Header</h1>
<p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>
</div>
<div id="content">
<h2>Content</h2>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<div id="sidebar">
<h3>Sidebar</h3>
<p>text</p>
<p>text</p>
</div>
<div id="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
地址：重庆市渝中区上清寺鑫隆达B座28-8
邮编：400015
电话：023-63612462
EMAIL:cnjl_net@163.com
渝公网安备 50010302000872号