关于apicloud教程里的量图方法，有点不妥，分享一下我的方法

simpleway

本帖最后由 simpleway 于 2017-3-27 11:13 编辑

教程里面是建议量图的像素值，直接除以2，其实这个是以目前浏览器的放大倍数大概是2为基础的，我想说，如果以后屏幕发展到4K，8K的时候，那时候浏览器的放大倍数还会停留在这个倍数阶段吗？到了那时候，我们的app会显得特别小，因为代码里面用的是px单位，修改代码还很麻烦，只能修改浏览器的整体放大倍数了吧

为了解决这个问题，我用rem单位，在每个页面<head>里面引用一个js文件，内容如下：
var design_width = 540;//这个是你的ui设计图的px宽度
document.documentElement.style.fontSize = (window.innerWidth/design_width)*100 + "px";

或者，如果你更加关注高度的等比例适配，js内容可以这样：
var design_height =1280;//这个是你的ui设计图的px高度
document.documentElement.style.fontSize = (window.innerHeight/design_height)*100 + "px";
实际当中，用高度计算的情况会比较多，因为我们量得较多的都是字体高度、div高度、div垂直间距等，都是属于纵向的衡量，让纵向比例和UI图保持一致，出来的适配效果会更好

这样，在量图的时候，假如量出来是20px，直接除以100，那它的大小就是0.2rem。这样的做法有个好处，无论什么设备，最终做出来的每个html元素，相对于屏幕大小的比例都是差不多的，屏幕适配非常不错，而且就算要整体调整大小，只要调整上面js文件里的算法就可以，很方便

YonBIP社区

感谢分享

simpleway

有人可能会有疑问，为什么不把算法改为：
document.documentElement.style.fontSize = (window.innerWidth/design_width) + "px";
这样，量图的时候，量出来是20px，就可以直接写成20rem了，没错，这样的确很好，但是，这样有个问题，1个rem单位有可能等于0点几的px值，在android机器发现，1个rem如果等于0.7以下的px值，rem单位会无效，所以还是使用我上面提出的算法比较保险

simpleway

本帖最后由 simpleway 于 2017-3-27 11:12 编辑

给出我的js文件内容：

/*
实现量图时，量出来的px值直接除以100，得出rem值，如20px就是0.2rem，这里故意放大100倍，是为了兼容android4.2等低版本浏览器，因为1rem如果=5px这样小的值，浏览器会忽略掉
*/
(function () {
var design_height = 1280;//UI设计图的px高度
var scale = 1.0;//后期调整这个值调整整体大小

window.__remConfig_flag = (window.innerHeight / design_height) * 100 * scale ;
document.documentElement.style.fontSize = window.__remConfig_flag + "px";

})();

//根据rem值，获取实际的px值
function getPixelByRem(remValue)
{
return window.__remConfig_flag * remValue;
}

simpleway

如果你要使用UIScrollPicture等模块，需要用到高度时，比如说量图出来，高度是20rem，那么需要用getPixelRem转一下，因为UI模块只认px值

var UIScrollPicture = api.require('UIScrollPicture');
UIScrollPicture.open({
rect: {
      x: 0,
      y: 0,
      w: api.winWidth,
      h: getPixelByRem(20)
},

福大亨

高人，感谢分享！

Syx007

px 到 rem 的转换很实用！

THEFree

我开发项目，都是估摸着大小

因为现在手机大小各异，如果按照设计图来施工，不同的手机会遇到不同的问题