最近發現uc下通過display:inline-block布局有點問題，全用最新版：android6系統和最新版uc手機瀏覽器都還是有問題。
設計需求： 導航欄100%寬度，共有4個子欄目，每乙個欄目佔1/4寬度。
html**為：
<方法一： 通過"display: inline-block;"來布局，這裡通過父元素設定"font-size: 0;"消除子元素inline-block的預設間距。ul>
<
li>
li>
<
li>
li>
<
li>
li>
<
li>
li>
ul>
ulli結果就是手機瀏覽器表現都很好，除了uc瀏覽器(下圖左為正常瀏覽器，右為uc瀏覽器)：
看來設定父元素"font-size: 0"在uc下並不能消除掉子元素inline-block的預設間距。
那下面就換一種消除間距的方法——改變html標籤的寫法。
方法二：html結束標籤和開始標籤之間不留空
<或者：ul>
<
li>
li
><
li>
li
><
li>
li
><
li>
li>
ul>
<看起來很怪，目的就是為了從根源上消除html空格，那麼預設間距也就沒有了。ul>
<
li>
li><
li>
li><
li>
li><
li>
li>
ul>
方法三：不用inline-block，用float
ulli這種方法uc下表現正常。
方法四：使用box/flex布局
ulli這樣子包括uc在內表現都正常。不過畢竟-webkit-box是老式語法，好像有點落後。那就用新的flex吧：
ul li以上**執行截圖如下（左為正常瀏覽器，右為uc瀏覽器）：
結果發現安卓機的uc又不行了，都已經顯式宣告為橫著排列，uc還是打豎的。
因此還是用-webkit-box吧，又或者-webkit-box和flex一起用，這樣都是表現正常的：
ul方法五：**布局li
ulli方法六：絕對定位（=.=）
總結： 安卓uc手機瀏覽器對於父元素使用"font-size: 0;"來消除子元素的inline-block的預設間距不起作用，而且對flex支援不好。在正式應用中應考慮相容的方案。
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...
移動端布局
瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...