移动端字体的自适应

<script>

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

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

})(document, window);

</script>

<script>

var scale = $('body').width() / 640;

$('html').css('font-size', 100 * scale + 'px');

</script>

三(使用过的)

<script>

var fontSize = 100;

var elm = document.documentElement;

elm.style.fontSize = fontSize * (elm.clientWidth/320) + 'px';

</script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动端应该如何动态设置字体大小? rem由来:font size of the root element,那么re...
    a8d1e9528b1e阅读 519评论 0 0
  • 以下是常用的代码收集,学习用。转自豪情博客园 1. PC - js 返回指定范围的随机数(m-n之间)的公式 re...
    自由加咖啡阅读 1,014评论 0 1
  • 方案一: 最新方案:(隆重推荐) 1、下载MateHandler.js,并引入页面2、head里加入 3、设置bo...
    晨光2016阅读 915评论 0 0
  • 以下是针对移动端html的默认字体号数设置20px-40px,自适应分辨率。 (function(doc,win)...
    3cb6417b4955阅读 893评论 0 2
  • 每个人面对新生命都会有特别的期待,因为这是一件神奇而伟大的事情。从无到有,从小到大,她就是那样不可思议地来到了这个...
    命儿飞阅读 180评论 0 1