H5页面多终端适配技术总结分享

说起页面适配估计大部分都挺头疼的，现如今手机厂商你一部我一部的争相问世，android手机更是多的数不过来，今天我就把开发中的一些适配方式告诉大家，一个是对图片失真的适配，另一个是对边距文字的适配。

1.图片适配我的解决办法是css预处理器less
UI会给你切2X图和3X图，iphone6的尺寸2X图片,iphone6puls是3X图
移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:
.通过mixin中定义函数,动态修改图标的背景图片。通过@media (媒体查询)，判断设备的dpr。

@mixin bg-image($url) {
    background-image: url("${url}@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
        background-image: url("${url}@3x.png");
    }
}

css样式中调用 bg-image 方法

div{
  width:30px;
  height:20px;
  background-size:30px  20px;
  background-repeat:no-repeat;
  @include bg-image('special_1');     
}

2.flexble.js引入前端适配库，因为手机的dpr(设备像素比不同)，这个库可以根据设备像素比去设置根元素的font-size，你把要适配的px值换算成rem即可，px除以37.5就是你要的rem