<script type="text/javascript">
(function(doc, win) {
var docEl = doc.documentElement,
isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEl.dataset.dpr = dpr;
var recalc = function() {
var width = docEl.clientWidth;
var designWidth=320;
if (width / dpr > designWidth) {
width = designWidth * dpr;
}
docEl.dataset.width = width
docEl.dataset.percent = 100 * (width / designWidth);
docEl.style.fontSize = 100 * (width / designWidth) + 'px';
};
recalc()
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
</script>

请修改设计图的宽度designWidth。这段代码的好处是根元素font-size是100 计算方便,若要给页面设置宽度 1080 = 10.8rem 640 = 6.4rem 等,字号的话直接根据设计图除以100即可

——

使用rem缩放网页的javascript代码的更多相关文章

  1. 73种网页常用Javascript代码

    73种网页常用Javascript代码 转载自:前端丶灵魂工程师   1.后退 前进  <input type="button" value="后退" o ...

  2. 利用插件对某些网页执行javascript代码

    说明 javascript在浏览器地址栏中可以运行,也可以按F12在控制台中运行,还可以写一个插件让javascript针对某些网页执行,可以使用chrome浏览器的Content scripts,C ...

  3. 如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

    Hello, world! 本教程的这一部分内容是关于 JavaScript 语言本身的. 但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择.我们会尽可能少地 ...

  4. 使用<script>标签在HTML网页中插入JavaScript代码

    新朋友你在哪里(如何插入JS) 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要 ...

  5. 网页制作中最有用的免费Ajax和JavaScript代码库

    网上看到的一篇小文,挺有用的,收藏在这. 本文中,我整理了12个免费的Ajax和JavaScript代码库,可以帮助Web开发人员将应用程序提升到一个新水平. Ajax Instant Messeng ...

  6. 7个高性能JavaScript代码高亮插件

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...

  7. 如何让你的JavaScript代码更加语义化

    语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...

  8. 推荐15个最好用的 JavaScript 代码压缩工具

    JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程.这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行. 在这篇 ...

  9. 编写高性能Javascript代码的若干建议

    多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执 ...

随机推荐

  1. HTML 在安卓手机端软键盘弹出顶起页面布局的解决办法

    $('body').height($('body')[0].clientHeight); 以上是背景即BODY被顶起的解决办法. 如果是footer被顶起,则可以用判断解决, $('input').f ...

  2. hibernate的session对象核心方法注意的问题

    1.session.save()方法 1).session.save()方法会使一个对象从临时状态转变为持久化状态. 2).session.save()方法会赋予持久化对象的OID属性一个ID值,以对 ...

  3. Linux C++线程池

    .为什么需要线程池? 部分应用程序需要执行很多细小的任务,对于每个任务都创建一个线程来完成,任务完成后销毁线程,而这就会产生一个问题:当执行的任务所需要的时间T1小于等于创建线程时间T2和销毁线程时间 ...

  4. kafka使用getOffsetsBefore()获取获取offset异常分析

    根据时间戳获取kafka的topic的偏移量,结果获取的偏移量量数据组的长度为0,就会出现如下的数组下标越界的异常,实现的原理是使用了kafka的getOffsetsBefore()方法: Excep ...

  5. 1013. Battle Over Cities

    好久都没有做题了,从长沙回来之后一直就是看看QT,感觉自己真的要蠢死了><不开心不开心 题目大概意思就是从一个图里面去掉一个点,看看剩下多少个孤立点. 自己想了好大一会儿没有思路,看到网上 ...

  6. VS.Net 2015 Update3 学习(2) jquery-form, jquery-validation,jquery-validation-unobtrusive一起用

    我觉DataAnnotations非常酷的一个功能.但是教程中的@ajaxform的却不怎么优雅,需要全局的onSucces等函数.因此我使用jquery-form做ajax提交. function ...

  7. ASP.NET 状态服务 及 session丢失问题解决方案总结

    ASP.NET2.0系统时,在程序中做删除或创建文件操作时,出现session丢失问题.采用了如下方法:1.asp.net Session的实现:asp.net的Session是基于HttpModul ...

  8. “static”引发的一个错误

    昨天晚上,舍友发来一个程序,先把代码贴上:  #include<stdio.h>#define N 20short bufferA[N]={1,2,3,4,5,6,7,8,9,10,11, ...

  9. Scope 安装和使用

    Scope 安装和使用 一.安装 1. 软件下载 https://sourceforge.net/projects/cscope/files/ 2. 解压 3. 安装 ./configure --pr ...

  10. 远程重装centos6

    写得比较简略,也是综合网络上的文章,总结一下实操的经验 获取启动内核 wget -P /boot/ http://mirrors.163.com/centos/6.8/os/x86_64/images ...