响应式布局

frontend

最近看了一些RWD的东西，本月就偷个懒，用这篇整理的RWD的东西来发一篇blog吧，总算不用等到月末再发了, 由于内容主要是看到的一些东西一些摘要，所以上下文并不是很丰富，权做纪念吧。:-)

响应式布局是为了让一套布局方案能够适应多种多样的显示需求而出现的，解决了传统方案下需要针对不同的设备而专门撰写不同的站点的问题。

流式布局的关键技术主要有以下几点：

• viewport

  <meta name="viewport" content="width=device-width, initial-scale=1" />

  上面的width=device-width可以让页面宽度随着设备而改变，这样才可以进行依据宽度的布局，initial-scale=1则是为了优化用户体验，在屏幕比较小的设备上，像素密度会比普通的显示器大很多，为了显示效果，这些设备一般会把字体等缩放到一个设备无关的大小(device-independent pixels)，设置这个参数可以让css文件中的px和device-independent pixels对应上。

  基本上主流的浏览器都支持，对于IE < IE9的可是使用如下的js来解决:

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

• fluid layout
  流式布局主要基于css的float属性来实现，主要的设计形式如下：

  • Mostly fluid
    
    示例代码
  • Column drop
    
    示例代码
  • Layout shifter
    
    示例代码
  • Tiny tweaks
    
    这个里面主要是对字体等等做一些微调，布局上没有大的变化。
    示例代码
  • Off canvas
    
    示例代码

• media-query

  • css3引入的新心功能，可以根据屏幕的宽度加载不同的css文件

    <!-- 400px 宽度下加载此css -->
    <link rel="stylesheet" type="text/css"
    　　    media="screen and (max-device-width: 400px)"
    　　    href="tinyScreen.css" />

    OR

    <!-- 400-600px 加载此css -->
    <link rel="stylesheet" type="text/css"
    　　    media="screen and (min-width: 400px) and (max-device-width: 600px)"
    　　    href="smallScreen.css" />

    OR

    /* css中引入其他的css文件 */
    @import url("tinyScreen.css") screen and (max-device-width: 400px);

  • @media
    也可以在css中直接使用@media规则

    /* 如下指定了一组在屏幕宽度小于400时的队则 */
    @media screen and (max-device-width: 400px) {
    　　　　.column {
    　　　　　　float: none;
    　　　　　　width:auto;
    　　　　}
    　　　　#sidebar {
    　　　　　　display:none;
    　　　　}
    }

• misc：

  • 使用相对宽度
  • 使用相对大小字体，em，rem，etc.
  • mobile first，优先设置移动页面，再一步步扩展为桌面版本，这个可以让你的布局更加灵活，而反过来的时候很多更改都会变得很麻烦。

最后，css控制前端的布局确实是很辛苦的一件事情，不过做了一段时间之后就会稍微有点感觉了，另外，flex-box是个很好的东西，解决了很多css布局的问题，强烈推荐了解，上面的示例代码里面，很多也都用到了。