CSS3的响应式布局

做手机端网页需要用到响应式布局,首先需要再HTML文件头声明一下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

主要目的是宽度控制和禁止用户缩放,具体参数自己GOOGLE一下。

下面是CSS判断是PC端还是移动端
其实很简单,用CSS3的媒体查询就可以非常方便去实现,不需要用userAgent神马的那么麻烦。

/*最小宽度800就是PC端*/
@media all and (min-width: 800px) {
  #nav {
    width: 300px;
    float: left;
    margin-right: 20px;
  }
  #grid {
    width: 450px;
    float: left;
  }
}
/*最大宽度799就是移动端*/
@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
  #grid {
    width: 100%;
  }
}

知道了上面2点就可以实现响应式布局了,是不是非常简单?
移动端还有一些特殊的事件(手指滑动)神马的,后续我再专门写篇移动端的JS文章好了。

云盘助手1.0 上线了

最近发现百度云上面资源真多,可以说已经离不开她了,未来云存储也是个趋势,不过百度云有一个缺点,就是没有搜索功能,找起东西来很不爽,于是云盘助手(使用backbone+seajs开发的MVC架构webapp,源码没有压缩加密可以随便看哈~)就诞生了,不仅仅搜索百度云喔~~

因为刚上线还没什么流量,暂时放在我的2级域名下面吧,观察一段时间再决定要不要加强它。
云盘助手地址:http://search.liuxiaofan.com/