移动端高清屏适配方案

结论：

• 用户体验要求很高的页面，如UV较高的页面，活动页这些应该以用户体验优先，应用flexiable方案
• 在其它页面，固定视口，不缩放，使用rem做布局适配，js添加屏幕标识以便调整字体大小（即布局使用rem，字体使用百分比），使用@2x图片，只做ios8+的1px处理

面临的问题：

在不同大小和高清的屏幕下：

• 如何保证 界面布局 一致性：不错乱，不变形
• 如何保证 字体大小 一致性：大屏显示更大，小屏显示更小或更多
• 如何保证 1px边框 一致性：不同的高清屏也在正常显示1px的高度大小
• 如何保证 图片清晰度 一致性：不同大小和高清屏下都能看到清晰的图片

如果把这几个问题按重要程度排序的话，我想应该是这样的：
布局 > 字体大小 > 1px边框 > 高清图

常见四种布局：

1. 流失布局（百分比布局）

2. 媒体查询调整

3. flex布局
4. 使用rem

字体适配：

适配规则：段落文字在大屏上希望能看到更多文字，标题文字或字数固定的文字应该应用缩放原则，随屏幕变大而变化
视口不缩放：通过媒体查询去设置不同范围内的大小
视口缩放：根据不同的dpr值去设置相应字体大小，标题文字或长度固定的文字可以使用rem单位去做适配

1px问题：

使用0.5px适配ios8以上的iPhone机型

@media (-webkit-min-device-pixel-ratio:2){
 .box5 {border-width:.5px}
}

图片清晰度：

• 视口不缩放：使用@2x两倍图
• 视口缩放：根据不同的dpr，加载不同尺寸的图片（图片处理服务器）

后记：

手机淘宝使用了flexiable方案，还有使用类似flexiable的hotcss，如美丽说HIGO，viewport的inicial-scale是根据dpr动态生成的，能很好的实现1px，高清图等，但是比较复杂，如果要求不高，还是用百分比，或者flex（引入flex兼容性的库），比较合适。

参考资料：http://coderlt.coding.me/2016/03/08/retina-screen-adapter/

转载于:https://www.cnblogs.com/guagnxu/p/6381625.html