>

举手投足端高清屏适配方案

- 编辑:www.bifa688.com -

举手投足端高清屏适配方案

结论:

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

移动端高清屏适配方案,清屏适配方案

面临的问题:

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

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

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

结论:

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

常见四种布局:

  1. 流失布局(百分比布局)
  2. 媒体查询调整

  3. flex布局

  4. 使用rem

面临的问题:

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

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

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

字体适配:

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

常见四种布局:

1px问题:

字体适配:

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

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

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

1px问题:

图片清晰度:

  • 视口不缩放:使用@2x两倍图
  • 视口缩放:根据不同的dpr,加载不同尺寸的图片(图片处理服务器)

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

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

后记:

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

参考资料:

图片清晰度:

  • 视口不缩放:使用@2x两倍图
  • 必发88官网,视口缩放:根据不同的dpr,加载不同尺寸的图片(图片处理服务器)

后记:

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

参考资料:

结论: 用户体验要求很高的页面,如UV较高的页面,活动页这些应该以用户体验优先,应用flexiabl...

本文由必发88官网发布,转载请注明来源:举手投足端高清屏适配方案