Rem尺寸解决方案，需要配合一些js动态设置<html>标签的font-size 和 viewport来配合

<script>

(function(doc, win) {

var dpr, rem, scale;

var docEl = document.documentElement;

var metaEl = document.querySelector('meta[name="viewport"]');

var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

/*isAndroid = navigator.userAgent.match(/(Android)/) ? true:false;

isIos = navigator.userAgent.match(/(iPad|iPhone)/) ? true:false;*/

if (navigator.userAgent.match(/(Android)/)) {

dpr = 1;

} else {

dpr = win.devicePixelRatio || 1;

}

scale = 1 / dpr;

// 设置viewport，进行缩放，达到高清效果

metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no,shrink-to-fit=no');

// 设置data-dpr属性，留作的css hack之用

docEl.setAttribute('data-dpr', dpr);

var recalc = function() {

// if (docEl.style.fontSize) return;

clientWidth = docEl.clientWidth;

// console.log(clientWidth);

if (!clientWidth) return;

docEl.style.fontSize = clientWidth / 10 + 'px';

if (document.body) {

document.body.style.fontSize = docEl.style.fontSize;

}

if (dpr == 1) {

// 动态写入样式

var fontEl = document.getElementById('init_style');

var pxscale = clientWidth / 750;

docEl.firstElementChild.appendChild(fontEl);

fontEl.innerHTML = '.px-scale{transform:scale(' + pxscale + ') !important;-webkit-transform:scale(' + pxscale + ') !important;}'; //雪碧图缩放

}

};

recalc();

// 给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;

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

// doc.addEventListener('touchstart', function(e) { e.preventDefault();}, false);

})(document, window);

</script>

这样一来，页面的所有css尺寸单位都得换成rem了。但计算又特别麻烦。有两种解决方案：

1、sass、less、postcss 的 @function

@charset 'utf-8';

$base-font-size: 75px; //design iphone6: 375px * 2 / 10 = 75px; --design

// $base-font-size: 32px; //design iphone3gs: 320px / 10 = 32px

// $base-font-size: 64px; //design iphone4/5: 320px * 2 / 10 = 64px

// $base-font-size: 124.2px; //design iphone6: 414px * 3 / 10 = 124.2px;

@function pxToRem($px) {

    @return  $px / $base-font-size * 1rem;

}

2、sublime Text 插件的解决方案

github地址：https://github.com/flashlizi/cssrem

http://www.cnblogs.com/CyLee/p/6494567.html

JS 自动计算HTML的font-size的更多相关文章

  1. hiho #1288 微软2016.4校招笔试题 Font Size

    #1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...

  2. LaTeX ：font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  3. GetPropInfo Font Size

    设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...

  4. unity UGUI text font size对性能影响较大

    Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...

  5. XE6 c++builder 设置 font size GetPropInfo SetOrdProp

    PPropInfo ppi; PTypeInfo pti; TTypeKinds ttk; TRttiContext context; TRttiType *rttiType TObject* obj ...

  6. UIAlertController custom font, size, color

    本文转载至 http://stackoverflow.com/questions/26460706/uialertcontroller-custom-font-size-color up vote2d ...

  7. Phone Font Size

    This table lists and describes the various font sizes that can be applied. Attribute = FontSize   Na ...

  8. PyCharm Change Font Size

    file->settings->colors&fonts-> save as (save the current scheme as your own)-> font- ...

  9. 【hihoCoder】1288 : Font Size

    题目:http://hihocoder.com/problemset/problem/1288 手机屏幕大小为 W(宽) * H(长),一篇文章有N段,每段有ai个字,要求使得该文章占用的页数不超过P ...

随机推荐

  1. 将csv格式的数据文件导入/导出数据库+添加新的字段

    最近一直忙于实验室的事情,没有好好更新博客,在抓包的过程中,遇到了很多问题. 因为我常用Wireshark将抓包信息导出为csv文件,这里简单mark一下将csv文件导入/导出到数据库的2种方法: 一 ...

  2. Python的异步编程[0] -> 协程[1] -> 使用协程建立自己的异步非阻塞模型

    使用协程建立自己的异步非阻塞模型 接下来例子中,将使用纯粹的Python编码搭建一个异步模型,相当于自己构建的一个asyncio模块,这也许能对asyncio模块底层实现的理解有更大的帮助.主要参考为 ...

  3. 二分+Kruskal【p2798】爆弹虐场

    Description 某年某月某日,Kiana 结识了一名爆弹虐场的少年. Kiana 仗着自己多学了几年OI,所以还可以勉勉强强给这位少年 讲一些自己擅长的题.具体来说,Kiana 先给这位少年灌 ...

  4. Jenkins一个任务下载多个git库代码

    公司的项目是微服务架构,一个服务对应的一个git仓库,现在的需求时拉取所有仓库代码下来,指定父级的pom.xml,一次性构建打包 jenkins在默认情况下,一个任务只能配置一个git仓库地址 1.安 ...

  5. Oracle 后台进程 详细说明

    一. 进程概述 先来看一下Oracle 11g 的架构图. 看起来比较模糊,我已经上传到了csdn 的下载. 是个pdf 文件, 2m 多. 那个看起来比较清楚. 也对每个进程做了解释. 下载地址:O ...

  6. Codeforces 785E Anton and Permutation（分块）

    [题目链接] http://codeforces.com/contest/785/problem/E [题目大意] 一个1到n顺序排列的数列,每次选择两个位置的数进行交换,求交换后的数列的逆序对数 [ ...

  7. 【前缀和】【前缀MAX】洛谷 P1351 NOIP2014提高组 day1 T2 联合权值

    不难发现,树中与某个点距离为2的点只可能是它的父亲的父亲.儿子的儿子 或者 兄弟,分类讨论一下即可. 只有对于兄弟我们不能暴力搞,维护一下每个节点的所有儿子的前缀和.前缀MAX就行了. #includ ...

  8. 【神奇の做法】bzoj2456 mode

    题解:http://www.tuicool.com/articles/BfQBzif #include<cstdio> using namespace std; int n,x,ans,t ...

  9. 分析器错误 未能加载类型“XX.WebApiApplication”

    解决方案,删除bin目录下内容(有单独使用dll的删除前请先备份) 清理解决方案并重新生成

  10. Telnet技术白皮书

    转:http://www.cnpaf.net/Class/Telnet/200705/19978.html Telnet的应用不仅方便了我们进行远程登录,也给hacker们提供了又一种入侵手段和后门, ...