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. MySQL数据库增删改字段(属性)

    MySQL数据库的各种操作今天在这里总结一下: 一.增加 1.在已有的表中添加新的字段: 首先是增加表的字段,比如一张表原本没有字段“ Time ”,现在我们要增加这样一个字段,可以用下面的SQL语句 ...

  2. Linux命令之free

    free [选项] 显示系统中未使用和使用的内存情况,包括物理内存.交换区内存(swap)和内核缓冲区内存.共享内存将被忽略. (1).选项 -b,-k,-m,-g 以Byte,KB,MB,GB为单位 ...

  3. POJ 1912 A highway and the seven dwarfs (凸包)

    [题目链接] http://poj.org/problem?id=1912 [题目大意] 给出一些点,表示一些屋子,这些屋子共同组成了村庄,现在要建一些高速公路 问是否经过了村庄. [题解] 这些屋子 ...

  4. python基础-文件处理与函数

    1. 文件处理 1.1 文件处理流程 1.打开文件,得到文件句柄并赋值给一个变量 2.通过句柄对文件进行操作 3.关闭文件 1.2 文件读取模式r r文本模式的读,在文件不存在,不会创建新文件 f = ...

  5. Linux发布Tomcat Web项目

    1.打包项目,项目右键–>Export –> WAR file 2.将.war文件放到tomcat下的webapps下.重启tomcat即可. ps  afux    —  查看进程 ki ...

  6. sql-server-linux 官网

    https://docs.microsoft.com/en-us/sql/linux/sql-server-linux-overview

  7. 关于ArrayList的一些源码分析

    集合是Java中非常重要而且基础的内容,因为任何数据必不可少的就是该数据是如何存储的,集合的作用就是以一定的方式组织.存储数据.这里写的集合,一部分是比较常见的.一部分是不常用但是我个人平时见到过的, ...

  8. css3动画和JS+DOM动画和JS+canvas动画比较

    css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...

  9. Kubernetes用户指南(四)--应用检查和调试

    一.调试 当你的应用开始运行,那么DEBUG是不可避免的问题. 早些时候,我们在描述的是如何通过kubectl get pods来获得Pod的简单状态信息. 但是现在,这里有更多的方式来获得关于你的应 ...

  10. 转:ios学习指南

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Franz Fang链接:https://www.zhihu.com/question/20264108/answer/302 ...