Responsive design 中文示例

Category: /blog /website
Tags: website

最近我root新买的Nook Touch, 装上Opera Mini简单看看网页. 发现自己的这个博客在Opera下利用它的AutoZoom看着还成, 但是用Dolphin Mini就很惨. 于是趁机学习了最近很流行的responsive design, 改造一下页面.

参考资料

我参考了以下几个资源

示例

我要做的是保持工具栏的宽度不变(235px). 在宽屏上显示是, 文章宽度可变. 当浏览器宽度缩小到小于600px时, 把右边的工具栏挪到下方显示. 下面是最小实现代码.

HTML

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--[if lt IE 9]>
    <script
    src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->
</head>
<body>
<div id="head"></div>
<div id="columnwrap">
  <div id="content-main"/>
</div>
<div id="content-related" />
<div id="footer"/>
</body>
</html>

CSS

#columnwrap {float:left; margin-right:-235px; width:100%; }
#content-main { 
    margin-right:235px;
}
#content-related { float:right; width:235px;}


@media screen and (max-width: 600px) {
   #content-main { width: auto; float: none; clear:both; margin-right:0px;}
   #content-related {width: auto; float: none; clear:both;}
} 

评论

提示

  • 如果看不到评论部分, 请暂时关掉adblock in Firefox/Chrome
  • 本网站使用Javascript实现评论功能, 此处外链对提高您的网站PR没有帮助. (潜台词: 请不要灌水, 谢谢)