移动端适配

2017-01-13 阅读量

Rem : 用rem就是让在任何分辨率的情况下,宽高比率都是一样。常用的地方就是对图片的处理,防止图片的变形

vm/vh(view-width, view-height)
视区宽度/高度为100vw/100vh

前端实现方案:淘宝手淘:
动态改写标签
给元素添加data-dpr属性,并且动态改写data-dpr的值
给元素添加font-size属性,并且动态改写font-size的值
淘宝手淘团队h5页面终端适配开源库:lib-flexible

小结 :
对于多倍屏,通过rem为单位,viewport: scale=1/dpr来达到适合的显示;
使用iPhone6(375pt, 750px)二倍设计图:750px为基准;
切图使用三倍精度图,以适应三倍屏
css单位综合使用:适配元素rem比例显示,正文字体宜用px+dpr缩放
配合scss函数,简化px2rem转换,且易于维护(若需修改$base-font-size, 无需手动重新计算所有rem单位)

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true