跨终端响应式页面设计入门

跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面，常规来讲一个跨终端页面，在宽屏的电脑上看和在小屏幕手机上看的布局是不同的，布局不同的原因是为了让读者更好地阅读你的页面，见下图：

跨终端响应式页面设计入门

这里有点要提到的是，我们常规会将PC版的页面和移动端设备的页面独立开来设计，这样会让PC端的页面布局更灵活和好维护。如果你希望你的页面能适配包括PC端在内的任何设备，那么下面几个小工具可以方便你顾及旧版本IE所存在的困扰：

⑴ IE8-不能识别HTML5的<hearder>、<article>、<footer>、<figure>等标签，可以通过 html5.js 来解决：

<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

然后将下面代码写入你的base.css来格式化html5标签：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

⑵ IE8-不支持CSS3 media queries，即不支持"@media only screen"语法，可以通过 css3-mediaqueries.js 来解决：

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

本文仅谈论移动端的页面适配方式，不考虑PC屏幕环境，不过原理均是相通的。本文也不讨论SPA/OPA的实现。

（一）百分比赋值

相信许多刚接触响应式页面设计的朋友，第一时间考虑到的就是将layout数值设为百分值形式，包括width、height、padding、margin等大小、偏移、方位的赋值。例如：

<!doctype html>
<html>
<head>
<style>
html, body {
    magin: 0;
    padding: 0;
}
.outDiv {
    margin: 3% auto;
    width: 85%;
    height: 350px;
    background: red;
}
</style>
<meta charset="utf-8">
<title>test</title>
</head>

<body>
    <div class="outDiv"> Hello </div>
</body>
</html>

View Code