移动端重构1:基础知识

距离上个移动端重构系列已经是两年了（不得不感叹时间是把杀猪刀）。此次将会带来实战系列，将欠下两年的债如今还上，给七年的重构赋予一次新生。

既然是新的开始，先简单说下这个系列要用到的一些技术吧。同时也是对移动端重构一些技术的一个简单回顾。

viewport

关于viewport详细请参考移动前端开发之viewport的深刻理解

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

css3选择器

结构伪类选择器已经成为列表类的标配了，不掌握都很差意思切页面了。

• CSS3 选择器——属性选择器

• CSS3 选择器——伪类选择器

• css选择器支持一览表

• CSS选择器查阅

伪元素（::before, ::after）

我会告诉你，下面的retina 1px大多数都是采用伪元素来生成的，除此以外，还有更多实用的，我会在接下来的重构教程中演示

• A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

• 学习使用：before和：after伪元素

• 伪元素的content使用

百分比

听说百分之八十的人入门移动端重构的第一个问题就会问：是否是全部的当要用百分比单位啊。这能够从侧面能够反应出百分比有多重要，下面是关于

• 关于移动端百分比宽度的几种实现

新单位——rem，vw，vh...

接上第一个问题，第二个问题是：那是否是要用rem？

• CSS3的REM设置字体大小

• rem不是神农草，治不了移动端百病

• vw, vh等新单位介绍（安卓4.4+支持）

然而，咱们这个系列的教程并无用到以上这些高大上单位，不过你仍是须要了解，尤为是下面的vw, vh系列的单位，由于之后将会是个得力的助手

flex

不用多介绍，大名如雷贯耳。传说中的布局利器，据说学好这个分分钟搞定页面，一边撩汉/妹子，一边切页面不是笑谈。

• 一个完整的Flexbox指南

• Flex 布局教程：语法篇

• A Complete Guide to Flexbox

retina 1px

用一首来讲就是”眼前的黑不是黑，你说的1px是什么1px“，下面就是各类奇淫技巧实现：

• 在retina屏中实现1px border效果

• Retina屏的移动设备如何实现真正1px的线？

PS: 安卓4.3- 不支持background-size的百分比，因此选用这个办法的要三思，另ios9已经实现@support，因此配合0.5px，实现起来就更简单了，下面附上sandal中的mixin定义：

// retina border// 0.5px实现 ios9@mixin retina-one-px() {    @supports (border-width: 0.5px) {        @media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) {            border-width: 0.5px;        }    } }

fixed

除了曾经的1px再也不是1px，曾经的fixed也再也不是咱们熟悉的fixed了，再搞下去都要得fixed恐惧症了。

首先css3的transform等给咱们带来了fixed的相对定位问题，其次虚拟键盘的弹出也给fixed制造出各类bug（有的虚拟键盘会改变窗口大小，而有些非默认的虚拟键盘则是以弹层的形式覆盖在上面的，因此并无改变窗口大小，也就没有办法经过window的onresize事件来监听了）

• Web移动端Fixed布局的解决方案

• 深刻理解CSS中的层叠上下文和层叠顺序

咱们如今通常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%;}

• css中如何作到容器按比例缩放

居中

居中，居中，仍是居中，重要的话说三次！！！

这里除了以前CSS2时代的常规方法，咱们更多的使用CSS3的transform及flex方法，而img或video的最新object-position还得等待兼容的时代

• Centering in CSS: A Complete Guide

• object-fit

等分

这个跟前面的居中同样同样同样重要的，几乎打开一个页面就能够看到。上次在imweb上也发起了关于这个的一个问题讨论——item宽度固定，剩余间距等分实现方案探讨

目前等分大概分为三种：

• 不考虑间距，item等分

• 间距为固定值如10px，剩余宽度item等分

• item宽度为固定指，剩余间距平分

此次我将会在这个实战系列中把这三种状况一一剖析。

css3动画

这年头不会一两招CSS3动画，都很差意思说本身会CSS了。

• css3 transform 101

• Advanced CSS3 2D and 3D Transform Techniques

• css3 transtion 101

• css3 animation 101

• CSS3: Animations vs. Transitions

• css3动画疑难杂症一览