首页 > 移动平台 > 详细

移动端字体单位

时间:2017-02-11 00:50:32      阅读:218      评论:0      收藏:0      [点我收藏+]

一、rem

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;

前提条件:

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

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

公式如下:

rem = px / 基准值;

移动端字体单位

原文:http://www.cnblogs.com/rage-the-dream/p/6388499.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!