<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. Mac系统下配置Tomcat

    1.下载Tomcat,网址:http://tomcat.apache.org/download-70.cgi: 2.进入终端Terminal,打开配置文件.bash_profile,输入open .b ...

  2. Javascript中的集合

    集合是由一组无序且唯一(即不能重复)的项组成 function Set() { var items={}; this.has=function(value){ //return value in it ...

  3. JAVA 重复提交

    FormServlet package servlet; import java.io.IOException; import javax.servlet.ServletException; impo ...

  4. SAP ERP和ORACLE ERP的区别是哪些?

    SAP有非常细致深入的标准流程,在流程方面,只要是你想到的问题,SAP都会曾经遇到过并且给出过解决方案.实施SAP比较倾向于改变企业的业务流程来匹配SAP,实现标准化管理. oracle比较灵活,侧重 ...

  5. NSScanner知悉 (转)

    http://blog.csdn.net/likendsl/article/details/7974761 NSScanner是一个类,用于在字符串中扫描指定的字符,尤其是把它们翻译/转换为数字和别的 ...

  6. centos 7 编译zabbix 3.2.2

    已有LNMP环境. 1.安装zabbix需要的依赖包,红色部门的包官方yum源没有,需要自己下载 yum install net-snmp fping iksemel net-snmp-devel   ...

  7. ios中的http:get,post,同步,异步

    一.服务端 1.主要结构:

  8. vertical-align

    http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

  9. stopping NetworkManager daemon failed

    1 初次安装NetworkManager时发现,无法将这个服务关闭 2 上网找了一圈,也没找到原因 3 重启服务器后就能正常关闭了 4 将该服务删除重装也能正常关闭 5 下回重装系统时再观察一下

  10. IE兼容问题,各类css hack代码(亲测有效)

    现在大部分企业对浏览器兼容要求是IE7+或者IE8+,要求IE6的很少,此处一并写出. IE6: _margin-top: 20px; IE6+IE7: *margin-top: 20px; +mar ...