`

响应式设计入门教程

 
阅读更多

现在响应式设计已经非常的流行了，有很多网站都实现了响应式设计。

但是我还是个新手，所以翻译了这篇响应式设计的文章，我理解的响应式设计是指网页的样式可以根据网页浏览器所在设备（电脑，pad，手机）的屏幕大小的不同，自动调节样式，以实现同一个网页在不同尺寸屏幕上都有好的阅读体验。

响应式设计要达到的目的无疑是非常有价值的，那么他是如何实现的呢？

其基本原理是利用css3的媒体查询(Media query)功能，可以根据设备尺寸来加载不同的css样式。下面我们看如何三步实现响应式设计。

第一步： 在页面的head标签内添加meta viewport标签

大多数移动设备的浏览器都可以通过当前屏幕的大小来自适应页面的大小。您可以使用viewport meta标签来重置屏幕的大小。下面的meta标签告诉移动浏览器使用设备的宽度来作为viewport的宽度，不要自动做缩放。

<metaname="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。

如下图所示：

responsive design page structure

第三步： 响应式设计的关键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><htmllang="en"><head><metacharset="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:20pxauto;}#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><divid="pagewrap"><divid="header"><h1>Header</h1><p>Tutorial by <ahref="http://webdesignerwall.com">Web Designer Wall</a> (read <ahref="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p></div><divid="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><divid="sidebar"><h3>Sidebar</h3><p>text</p><p>text</p></div><divid="footer"><h4>Footer</h4></div></div></body></html>

本文是翻译文章，翻译自： http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

分享到：
| 毫秒必争，前端网页性能最佳实践
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics