移動端重構實戰系列1——基礎知識

時間 2019-11-10

標籤移動實戰系列基礎知識欄目無線简体版

原文原文鏈接

viewport

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

css3選擇器

結構僞類選擇器已經成爲列表類的標配了，不掌握都很差意思切頁面了。html

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

我會告訴你，下面的retina 1px大多數都是採用僞元素來生成的，除此以外，還有更多實用的，我會在接下來的重構教程中演示前端

百分比

聽說百分之八十的人入門移動端重構的第一個問題就會問：是否是全部的當要用百分比單位啊。這能夠從側面能夠反應出百分比有多重要，下面是關於html5

關於移動端百分比寬度的幾種實現

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

接上第一個問題，第二個問題是：那是否是要用rem？android

然而，咱們這個系列的教程並無用到以上這些高大上單位，不過你仍是須要了解，尤爲是下面的vw, vh系列的單位，由於之後將會是個得力的助手ios

flex

不用多介紹，大名如雷貫耳。傳說中的佈局利器，據說學好這個分分鐘搞定頁面，一邊撩漢/妹子，一邊切頁面不是笑談。css3

retina 1px

用一首來講就是」眼前的黑不是黑，你說的1px是什麼1px「，下面就是各類奇淫技巧實現：git

PS: 安卓4.3- 不支持background-size的百分比，因此選用這個辦法的要三思，另ios9已經實現@support，因此配合0.5px，實現起來就更簡單了，下面附上sandal中的mixin定義：github

// 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恐懼症了。web

首先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%;
}