话说，以前的前端工程师在入行时都当过切图仔或切图女。曾经，切图作为前端一门基础且必备的技能，不知何时开始已经不再提起。很多面试官在招聘时都忽略了PS的存在，其实在国外一位优秀的前端工程师是包揽设计工作的，PS玩得可溜呢。 现在大部分的前端工程师都说，这个图让设计师去切吧，这个图…

有这样一个问题。 别急，下面我们就开始逐一分析各种方法在web自适应布局下的使用姿势，最后做个总结。 本文的所有例子使用了同一种三栏布局。源代码点我 1. 浮动布局 float:left|right 最常用的布局方式之一，设置了float的元素脱离了文档流。需要注意在使用过浮动…

布局的传统解决方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差。2009年，W3C提出了一种新的方案-Flex，Flex是Flexible Box的缩写，意为”弹性布局”。Flex可以简便、完整、响应式地实现多种页面布局。下…

什么是响应式？同一个页面在不同屏幕尺寸下有不同的布局。 传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就好了，缺点是CSS比较重。 栅格系统用于处理页面多终端适配的问题。栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力…

简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽…

看了下上篇博客的发表时间到这篇博客，竟然过了11个月，罪过，罪过。这一年时间也是够折腾的，年初离职跳槽到鹅厂，单独负责一个社区项目，忙的天昏地暗，忙的差不多了，转眼就到了7月。 七月流火，心也跟着燥热起来了，眼瞅着移动端这发展趋势从05年开始就一直在走下坡路了，想着再这么下去不…

在月初的时候，发了CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）。js的代码库也发过两次，两篇文章。之前也写了css3的热身实战，既然热身完了，是时候开始封装css3的代码库了，相比起js的代码库，css3的代码库的逻辑性就更加简单了！可以说只要打上注释和一张…