移動端佈局方案

目前有四種解決方案：媒體查詢過於繁瑣、flexible +
rem不兼容非Renta高清屏、等視口 + rem 不縮放，全部屏幕
一視同仁。 和vw視口布局。
flexible + rem、等視口 + rem
有一個很大的弊端，由於他們須要動態計算font-size/頁面縮放比例，因此就致使頁面在某些狀況（性能慢）會通過兩次重回（給HTML根設置
font-size和設置meta標籤時）,在網絡或者終端性能不是很好的狀況用戶體驗不好
甚至頁面錯亂的狀況。
而vw視口布局在移動端支持較好，最重要是不用js動態計算，免去瀏覽器二次重繪，
我認爲可使用。

1px邊框問題

目前ios支持border-width: 0.5px;，安卓系統不支持，0.5px會解析成1px。
px2rem轉化後的border，若是是浮點類型，顯示也會有問題。
怎麼用一套代碼把安卓系統下的0.5px表示出來呢？

• transform縮放
  用等視口布局，僞元素 + transform結合作一個scale縮放，把1px縮放0.5，就是0.5px了。
  能夠計算出 data-dpr，合理縮放。2倍與3倍。如今應該沒有1倍了。
• flexible
  解決了ios上的邊框問題。Android高清屏放生了
• border-image
  圓角難以解決？
  感受仍是很粗？
  沒弄明白。
• border-width浮點類型
  Android瀏覽器不支持浮點類型

總結(2018.3.1)

1px邊框仍是用transform縮放比較好，能夠很方便地展現圓角。
可是flexible因爲把ios設備的viewport縮放了，並不該該用transform顯示
1px邊框，正常顯示便可。因此，針對Android用transform，針對ios用transform
或者flexible。
更精細化的需求，可針對不一樣dpr的屏幕分別作處理，參考 http://www.myronliu.com/2017/03/22/%E7%A7%BB%E5%8A%A8web/css_harline/

網易考拉與手淘

網易考拉用的 固定視口。首頁borer-line-width:1px 未作任何處理。字體未作
mediaQuery處理，有rem有px。
手淘用的flexible，fixed了safari瀏覽器不能禁止用戶縮放的缺陷。字體作了
mediaQuery處理。

font-size

網頁文字大小通常用rem換算，也能夠用px
font-size考慮到點陣字體，建議用mediaquery。(mediaquery要配合flexible暴露
的全局dpr)
rem佈局字體的好處是，無論屏幕如何變化，每一行顯示的字數是不變的