距离上个移动端重构系列已是两年了（不得不感叹时间是把杀猪刀）。这次将会带来实战系列，将欠下两年的债现在还上，给七年的重构赋予一次新生。
既然是新的开始，先简单说下这个系列要用到的一些技术吧。同时也是对移动端重构一些技术的一个简单回顾。
viewport
关于viewport详细请参考移动前端开发之viewport的深入理解
<meta name="viewport" content="width=device-width, initial-scale=1.0">css3选择器
结构伪类选择器已经成为列表类的标配了，不掌握都不好意思切页面了。
伪元素（::before, ::after）
我会告诉你，下面的retina 1px大多数都是采用伪元素来生成的，除此之外，还有更多实用的，我会在接下来的重构教程中演示
百分比
据说百分之八十的人入门移动端重构的第一个问题就会问：是不是所有的当要用百分比单位啊。这可以从侧面可以反应出百分比有多重要，下面是关于
新单位——rem，vw，vh...
接上第一个问题，第二个问题是：那是不是要用rem？
然而，我们这个系列的教程并没有用到以上这些高大上单位，不过你还是需要了解，尤其是下面的vw, vh系列的单位，因为以后将会是个得力的助手
flex
不用多介绍，大名如雷贯耳。传说中的布局利器，听说学好这个分分钟搞定页面，一边撩汉/妹子，一边切页面不是笑谈。
retina 1px
用一首来说就是”眼前的黑不是黑，你说的1px是什么1px“，下面就是各种奇淫技巧实现：
PS: 安卓4.3- 不支持background-size的百分比，所以选用这个办法的要三思，另ios9已经实现@support，所以配合0.5px，实现起来就更简单了，下面附上sandal中的mixin定义：
// retina border// 0.5px实现 ios9@mixin retina-one-px() { @supports (border- 0.5px) { @media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) {
border- 0.5px;
}
}
}fixed
除了曾经的1px不再是1px，曾经的fixed也不再是我们熟悉的fixed了，再搞下去都要得fixed恐惧症了。
首先css3的transform等给我们带来了fixed的相对定位问题，其次虚拟键盘的弹出也给fixed制造出各种bug（有的虚拟键盘会改变窗口大小，而有些非默认的虚拟键盘则是以弹层的形式覆盖在上面的，所以并没有改变窗口大小，也就没有办法通过window的onresize事件来监听了）
我们现在一般android采用fixed布局；ios采用absolute，然后中间滚动使用-webkit-overflow-scrolling: touch;。如果还不行就具体问题具体分析。
图片高度占位
跟pc的不一样，移动端的图片很多都不是固定的宽高的（icon图标与头像等一些小图还是固定大小的），所以就面临一个问题：不能设置一个具体的高度，于是就会出现加载过程其他内容随着图片的加载慢慢向下移动。
那如何解决这个问题呢？
给图片提供一个容器，设置高度为0，根据宽度按照图片的比例使用padding-top得到一个高度值，然后图片绝对定位设置宽高为100%即可，如图片尺寸为200*100（则高度为宽度的二分之一）：
.img-wrap{ position: relative; height: 0; padding-top: 50%；// 图片宽度的一半 }.img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
居中
居中，居中，还是居中，重要的话说三次！！！
这里除了之前CSS2时代的常规方法，我们更多的使用CSS3的transform及flex方法，而img或video的最新object-position还得等待兼容的时代
等分
这个跟前面的居中一样一样一样重要的，几乎打开一个页面就可以看到。上次在imweb上也发起了关于这个的一个问题讨论——item宽度固定，剩余间距等分实现方案探讨
目前等分大概分为三种：
-
不考虑间距，
item等分 -
间距为固定值如
10px，剩余宽度item等分 -
item宽度为固定指，剩余间距平分
这次我将会在这个实战系列中把这三种情况一一剖析。
css3动画
这年头不会一两招CSS3动画，都不好意思说自己会CSS了。