移动端布局方案

目前有四种解决方案：媒体查询过于繁琐、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布局字体的好处是，无论屏幕如何变化，每一行显示的字数是不变的