移动端字体单位 - Tokyomylove

一、rem手机屏幕适配方案1http://www.html-js.com/article/3041?utm_source=tuicool&utm_medium=referral

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement(\'style\');
var metaEl = document.querySelector(\'meta[name="viewport"]\');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;


// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute(\'content\', \'width=\' + dpr * docEl.clientWidth + \',initial-scale=\' + scale + \',maximum-scale=\' + scale + \', minimum-scale=\' + scale + \',user-scalable=no\');

// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute(\'data-dpr\', dpr);

// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = \'html{font-size:\' + rem + \'px!important;}\';

// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem = function(v) {
    v = parseFloat(v);
    return v / rem;
};

window.dpr = dpr;
window.rem = rem;

前提条件：

拿到的是一个针对iphone6的高清视觉稿 750×1334
采用上述的高清方案(js代码)。

如果有一个区块，在psd文件中量出：宽高750×300px的div，那么如何转换成rem单位呢？

公式如下：

rem = px / 基准值;
二、手机屏幕适配方案2http://blog.csdn.net/u010423904/article/details/53465892

function adapt(designWidth, rem2px){
  var d = window.document.createElement(\'div\');
  d.style.width = \'1rem\';
  d.style.display = "none";
  var head = window.document.getElementsByTagName(\'head\')[0];
  head.appendChild(d);
　//window.getComputedStyle（“元素”，“伪类”）获取的是所有的样式
  //window.getComputedStyle("元素", "伪类").getPropertyValue(style); 使用 getPropertyValue 来指定获取的属性
  var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue(\'width\'));
  d.remove();
  document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + \'%\';
  var st = document.createElement(\'style\');
  var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
  var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
  st.innerHTML = portrait + landscape;
  head.appendChild(st);
  return defaultFontSize
};
var defaultFontSize = adapt(640, 100);

font-size使用的是： getPropertyValue(\'font-size\') 而 1rem 使用的是 getPropertyValue(\'width\')