您的位置：首页 > 其它

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

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

<!doctype html>
<html>
<head>
<style>
html, body { magin: 0;padding: 0;height:100%; font-size:1.2em;}
.wrap{ margin:2% auto 0 auto; width:95%;}
header { width:100%; height:5%;background-color:#FF9673;}
nav{ float:left;width:20%; min-height:600px;background-color:#FF9673;}
article{ background-color:#FFD24D;}
aside{ background-color:#73B9FF;}
@media only screen and (min-width:1000px){
nav{display:none;}
article{ float:left; margin-right:2%; width:70%; min-height:600px;}
aside{ float:left; width:28%; min-height:600px;}
}
@media only screen and (min-width:601px) and (max-width:999px){
header{display:none;}
article{ float:left; margin-left:2%; width:78%; min-height:600px;}
aside{ display:none;}
}
@media only screen and (max-width:600px){
nav{display:none;}
article{ width:100%; min-height:600px;}
aside{ display:none;}
}
</style>
<meta charset="utf-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
</head>

<body>
<header>top-banner</header>
<div class="wrap">
<nav></nav>
<article>
<p>the main area</p>
</article>
<aside>sth</aside>
</div>
</body>
</html>


View Code
这里需要提醒的一点是，我们对于文本字体大小的定义建议使用 em 来赋值，毕竟不同终端不同浏览器会依据分辨率大小来设定文本的缺省大小，从而方便用户阅读，利用 em 来按比例调整字体大小能迎合终端浏览器的这个人性化特点。

共勉~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航