【练习】响应式布局

本文参考是参考http://www.netmagazine.com/tutorials/build-basic-responsive-site-css做的练习。

文中作者阐述了对于响应式设计不应该针对不同的终端显示不同的内容，当用户在pc上可以查到的内容，在移动端却怎么也找不到，这是很困惑的一件事情。所以响应式设计要做的是适当的缩放，针对不同的设备显示适当的布局，而不是改变内容。所以响应式布局的是利用流式布局（利用百分比设置各元素宽度）和css3的Media Query来实现的。

下面做一个简单的响应式布局的小练习：

效果可以参考http://www.netmagazine.com/files/tutorials/demos/2013/01/build-a-basic-responsive-site-with-css/demo/demo.html

1.首先确定文档结构，两列布局。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Responsive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
</head>
<body>
    <div id="wrapper">
        <header>
            <nav id="skipTo">
                <ul>
                    <li>
                        <a href="#main" title="skip to main content">skip to main content</a>
                    </li>
                </ul>
            </nav>
            <h1>Demo</h1>
            <nav>
                <ul>
                    <li><a href="#" title="home">Home</a></li>
                    <li><a href="#" title="about">About</a></li>
                    <li><a href="#" title="work">Work</a></li>
                    <li><a href="#" title="contact">Contact</a></li>
                </ul>
            </nav>
            <div id="banner">
                <img src="images/kaws.jpg" alt="banner">
            </div>
        </header>
        <section id="main">
            <h1>Main section</h1>
            <p>Lorem （省略一些内容）</p>
        </section>
        <aside>
            <h1>Sub-section</h1>
            <p>Lorem （省略一些内容）</p>
        </aside>
    </div>
</body>
</html>

　　原作者插入respond.min.js确保ie6-8可以运行，因为我没做兼容性的测试，所以没引用这个js，有兴趣的同学可以试试。

加入<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 避免浏览器自动缩放和用户的缩放。（width - viewport的宽度， initial-scale - 初始的缩放比例，minimum-scale - 允许用户缩放到的最小比例，maximum-scale - 允许用户缩放到的最大比例，user-scalable - 用户是否可以手动缩放）

2.加入基本样式。#skipTo的导航是为移动设备设置的，使用户可以跳过导航直接看到主要的内容，所以在基本的样式中将其隐藏。最好设置一个max-width避免在大屏幕上过度放大，并且给image的width设置成100%，这样能很好的适应流式布局。

#wrapper{
    width: 96%;
    max-width: 920px;
    margin: 0 auto;
    padding: 2%;
}
#main{
    width: 60%;
    margin-right: 5%;
    float: left;
}
aside{
    width: 35%;
    float: right;
}
header h1{
    height: 70px;
    width: 160px;
    float: left;
    display: block;
    background: url(../images/demo.gif) 0 0 no-repeat;
    text-indent: -9999px;
}
header nav{
    float: right;
    margin-top: 40px;
}
header nav li{
    display: inline;
    margin-left: 15px;
}
#skipTo{
    display: none;
}
#skipTO li{
    background: #b1fffc;
}
#banner{
    float: left;
    margin-bottom: 15px;
    width: 100%;
}
#banner img{
    width: 100%;
}

　　3.加入适配移动设备的css。可以用两种方式，一种是内置在css中，在css中加入以下代码

@media screen and (max- 480px) {

    #skipTo {
        display: block;
        }
    
    header nav, #main, aside {
        float: left;
        clear: left;
        margin: 0 0 10px; 
        width: 100%;
        }    
        header nav li {
            margin: 0;
            background: #efefef;
            display: block;
            margin-bottom: 3px;
            }
            header nav a {
                display: block;
                padding: 10px;
                text-align: center;
                }            
}

　　另一种是外部引用，在html的head中加入

<link rel="stylesheet" type="text/css" media="screen and (max-480px)" href="css/mobile.css">

另外也可以针对移动设备提供减小的图片，可以节省移动设备的流量，减少加载时间。

好了，至此整个练习就结束了，动手练习下吧。