移动端H5开发的屏幕适配方案

移动端屏幕的几个概念

1、什么是dpr？

dpr: device pixel ratio 设置像素比 —— dpr=物理像素/设备独立像素。

• 设置独立像素：密度无关像素，个人理解：设备的实际屏幕大小
• 物理像素：设备像素，显示设备中一个最微小的部件，个人理解：针对iphone retina屏幕，2倍的即屏幕用2px点来显示css为1px的内容，3倍的同理

2、获取设备dpr值

• js获取方式： window.devicePixelRatio
• Css获取方式： -webkit-device-pixel-ratio,   -webkit-min-device-pixel-ratio,    -webkit-max-device-pixel-ratio （通过这个三个进行媒体查询，可对不同的dpr设置做一些样式适配，如对1px边框的处理问题上）

3、rem单位

rem: fontsize of root element 即相对于根标签 html的大小。例如当设置了html的font-size时为12px时，其他元素设置1rem则代表12px。

屏幕适配的方案

1、简单版

屏幕适配（windowWidth/设计稿宽*100） ——*100为了方便计算。即font-size值是手机deviceWidth与设计稿比值的100倍

document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/7.5+'px';

如上：通过查询屏幕宽度，动态的设置html的font-size值，设计稿大多以750*1334 设置的，通过上述换算后，在设计图上一张150*150的图，在css中对应的rem值则为：1.5*1.5rem

2、手淘H5适配库 flexible.js

1）、淘宝lib-flexible库是什么？

• 简介：一个制作H5适配的开源库。
• github地址：https://github.com/huainanhai/flexible
• 阿里CDN地址：http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js

2）、使用方法
注意：官方建议对js做内联处理，在所有资源加载之前执行此js

说明：flexible 将视觉稿分成了100份，一份单位为a，以750px设计稿为例，1a=7.5px; 而1rem 设定了为10a，那1rem = 75px；

• 1a= 7.5px 1rem =75px

A、使用方法1

在知道1rem = 75px 后，自己通过计算，在拿到750*1334的设计稿的尺寸后，根据标注，每次除以75得到rem值，从而直接设置rem单位 （也可以借助less、scss等预处理器来处理）

B、使用方法2 ——利用px2rem自动转换px为rem单位

关于postCss是什么鬼的文章：https://segmentfault.com/a/1190000003909268
安装好px2rem后，可以在项目中直接使用。也可以使用PostCSS。使用PostCSS插件postcss-px2rem：

效果：

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

上面的/no/和/px/ 标识 不需要变成rem的一定要加上 这样最终不会把px变成rem px2rem处理之后将会变成：
.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

/*在整个开发中有了这些工具之后，完全不用担心px值转rem值影响开发效率。*/

3）、作用：

在资源加载执行这个js后，会在html元素上加一个data-dpr属性，以及一个font-size样式。JS会根据不同设备添加不同的data-dpr值，如2或者3，同时会给html加上对应的font-size的值。如些，页面其他单位使用rem会做相应的计算。

4）、实质

flexble通过js动态的

• 给元素添加data-dpr属性，屏动态必定data-dpr的值 （用于适配屏幕dpr的不同，针对IOS设备）
• 给元素添加font-size属性，并且动态改写font-size的值 （用于适配屏幕宽高的不同）

扩展阅读： PostCSS

原文链接：https://segmentfault.com/a/1190000003909268
1、什么是PostCSS？

以作者的话说，PostCSS是一个平台，就像jquery有很多插件一样，功能强大的是在这个平台上的很多插件。

2、它的作用？

• 官方API地址：http://api.postcss.org/
• 它为CSS提供额外的功能
• 通过在PostCSS这个平台上，可以开发一些插件，来处理我们的CSS，如：autoprefixer

扩展阅读： px2rem

参考文章地址：http://www.jianshu.com/p/d0fe770b07ae
1、什么是px2rem

一个可以自动将px位置转换为rem值的插件

2、它有什么作用

它可以直接将css中写的px单位根据dpr的不同，转换为相应的rem单位值

3、使用

npm官网文档 ：https://www.npmjs.com/package/px2rem

• A、通过webpack的使用
  安装： npm install px2rem-loader –save-dev
  webpack配置：
  {
  loaders: [{ test: /.css$/, loader: ‘style!css!px2rem?remUnit=75&remPrecision=8’ }]
  }
  说明：
  针对如1px border，可能在css语句后加 /no/ 声明来阻止转换
  针对 font-size 需要用px单位时，可能在css语句后加 /px/ 来声明