移动端布局方案

目前有四种解决方案：媒体查询过于繁琐、flexible +
rem不兼容非Renta高清屏、等视口 + rem不缩放，所有屏幕
一视同仁。和vw视口布局。
flexible + rem、等视口 + rem
有一个很大的弊端，因为他们需要动态计算font-size/页面缩放比例，所以就导致页面在某些情况（性能慢）会经过两次重回（给HTML根设置
font-size和设置meta标签时）,在网络或者终端性能不是很好的情况用户体验很差
甚至页面错乱的情况。
而vw视口布局在移动端支持较好，最重要是不用js动态计算，免去浏览器二次重绘，
我认为可以使用。

1px边框问题

目前ios支持border- 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/移动web/css_harline/

网易考拉与手淘

网易考拉用的 固定视口。首页borer-line-1px 未做任何处理。字体未做
mediaQuery处理，有rem有px。
手淘用的flexible，fixed了safari浏览器不能禁止用户缩放的缺陷。字体做了
mediaQuery处理。

font-size

网页文字大小一般用rem换算，也可以用px
font-size考虑到点阵字体，建议用mediaquery。(mediaquery要配合flexible暴露
的全局dpr)
rem布局字体的好处是，不管屏幕如何变化，每一行显示的字数是不变的