移動端重構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動畫疑難雜症一覽