移動端web，我踩過的坑之...

第一個坑是不想背鍋的img標籤，明明是那時仍是菜鳥，今天依舊菜鳥的我本身，沒有逐字逐句認真看文檔(・。・)

1. <img> 標籤建立的是被引用圖像的佔位空間。因此請務必爲img標籤設置width。這涉及到用戶體驗（嚴肅臉(..•˘_˘•..)），您老闆確定不想由於糟糕的網頁渲染性能而失去用戶。

特別是移動端，爲img設置一個em單位的寬度，圖片才能隨着用戶屏幕的尺寸彈性伸縮。

　　1.1  昨天在PC端發現，同一個頁面，同一張圖，圖片有時候會出現寬度變形高度不變。 把設置的height取消掉就不會有這種bug出現。緣由不明，找不出是哪裏的樣式衝突。

　　1.2  <img> 標籤建立的是被引用圖像的佔位空間。指定寬高尺寸可改善網站性能。一般狀況下，指定了img的寬度，高度也會隨之按比例縮放。

　　　　注意：若是提供了一個百分比形式的 width 值而忽略了 height，那麼無論是放大仍是縮小，瀏覽器都將保持圖像的寬高比例。這意味着圖像的高度與寬度之比將不會發生變化，圖像也就不會發生扭曲。

　　1.3  今天的一個移動端頁面，在chrome瀏覽器手機模式預覽下，有兩張圖由於只指定寬度，沒有指定height而產生變形。調試了一番，終於發現: 父容器佈局的樣式 display: flex， align-items 屬性。由於這個屬性的默認值致使圖片拉伸到容器高度：

• • 　　stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

　　　　而在火狐的手機模式下預覽，就沒有這個問題。無論怎麼說，既然有這個潛在風險，那就再指定下彈性高度，或者設置 align-items 屬性爲center。

　　　　爲何要用display:flex 呢。水平居中的三個辦法，justify-content: center; text-align: center ， margin: 0 auto; 區別和用法在哪裏呢。什麼狀況下會無效呢。

　　1.4 翻了MDN上的 img api 英文原文，沒有看到推薦只指定寬度的說法。點擊這個連接查看：MDN上的HTML element reference: img

　　1.5 繼續翻w3上的英文教程：the-img-element。也並未推薦只寫寬度。

The IDL attributes width and height must return the rendered width and height of the image, in CSS pixels, if the image is being rendered, and is being rendered to a visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is available but not being rendered to a visual medium; or else 0, if the image is not available. [CSS]

2. <a>包含的<img> 設置max-width:100%無效.

先來看下max-width可能的值%概念： 

max-width:% 定義基於包含它的塊級對象的百分比最大寬度。

100%則是若是指定元素的寬度不超過父元素的寬度，則大小不變，若是超過了父元素的寬度，則將寬度收縮爲父元素的寬度。

max-width overrides width, but min-width overrides max-width. 

因此，這個時候要給<a>加個 - "display:block;"- 等等這些樣式：能讓<a>從行內搖身一變，變爲塊狀元素。

ps：

img { max-width: 100%;}

這行代碼對於大多數嵌入網頁的視頻也有效，因此能夠寫成：

img, object { max-width: 100%;}

3. <img> 在不一樣瀏覽器下的表現差別。

這種差別，即使是像下面同樣初始化設置樣式也於事無補。有興趣能夠試試看。不得不說，chrome和FF這些瀏覽器，有時候有點貼心得過頭。

img{
    margin: 0;
    padding: 0;       
}

解決方案有N種：

①. 簡單粗暴的：把<img>間的空格註釋掉，像這樣：

    <div class='img-dad'>
        <img src="1.jpg" alt=""><!-- 
         --><img src="2.jpg" alt=""><!-- 
         --><img src="3.jpg" alt=""><!-- 
          --><img src="4.jpg">
    </div>

這種辦法能解決<img>左右邊距的問題，可是上下邊距還在呀，並且那麼多註釋標籤，看着也不美觀對吧~

②. 依舊給<img>設置樣式：

    img{
        vertical-align: top;
    }

這個方法，和第一種同樣，也只能去掉上下邊距。

③. 給<img>他爸元素加個樣式:

  辦法A:  .img-dad{
        font-size: 0;
    }

啊，perfect！上下左右邊距都不見了，咱們能夠想要多少邊距就要多少邊距了。

④. 給<img>設置樣式：

方法A：img{
        float: left;
    }
方法B：img{
        display: block;/table/box/list-item (等等這些可讓它變成塊的東西)
    }
根據實際須要結合使用。

 4. <img>的border-radius，在安卓機出現圓角變形，像是禿了一部分頭頂同樣。解決辦法：img外嵌套一層div，設定border-radius