使用rem缩放网页的javascript代码
<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代码的更多相关文章
- 73种网页常用Javascript代码
73种网页常用Javascript代码 转载自:前端丶灵魂工程师 1.后退 前进 <input type="button" value="后退" o ...
- 利用插件对某些网页执行javascript代码
说明 javascript在浏览器地址栏中可以运行,也可以按F12在控制台中运行,还可以写一个插件让javascript针对某些网页执行,可以使用chrome浏览器的Content scripts,C ...
- 如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性
Hello, world! 本教程的这一部分内容是关于 JavaScript 语言本身的. 但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择.我们会尽可能少地 ...
- 使用<script>标签在HTML网页中插入JavaScript代码
新朋友你在哪里(如何插入JS) 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要 ...
- 网页制作中最有用的免费Ajax和JavaScript代码库
网上看到的一篇小文,挺有用的,收藏在这. 本文中,我整理了12个免费的Ajax和JavaScript代码库,可以帮助Web开发人员将应用程序提升到一个新水平. Ajax Instant Messeng ...
- 7个高性能JavaScript代码高亮插件
本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...
- 如何让你的JavaScript代码更加语义化
语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...
- 推荐15个最好用的 JavaScript 代码压缩工具
JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程.这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行. 在这篇 ...
- 编写高性能Javascript代码的若干建议
多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执 ...
随机推荐
- XAF点滴:很具体很用实用---处理三个小问题
以下内容全部为web版本的老模板风格下完成. 一.在编辑状态的详细视图下打印报表. 有些时候,需要在编辑状态下直接打印报表内容,官方默认是不允许这样做的.用Reflector查看源码,可以看到: De ...
- laravel安装学习步骤
在看知乎比较php框架的优劣的时候提到为什么laravel这么好国内用的少,还有就是yii2,有人提到原因就是composer在国内无法使用.这制约了使用composer进行包管理的框架在国内的传播和 ...
- 界面布局之表格布局TableLayout+TableRow
一.基础知识: TableLayout置底,TableRow在TableLayout的上面,而Button.TextView等控件就在TableRow之上, 另外,TableLayout之上也可以单独 ...
- asp.net开发中遇到的奇葩bug及解决办法(会持续更新。。。)
1,不知道你们遇没遇到过,在vs2010或更高版本上运行程序的时候,完全没问题,放在IIS中出现了问题,就比如左侧是菜单项,点击菜单右边显示,如果菜单链接是这样:content.aspx,而另一个链接 ...
- SQL Server Reporting Service(SSRS) 第四篇 SSRS 用法总结
1. 如何让表头在每页显示(译) A. 打开高级模式: 在分组栏中点击Column Goups右侧的箭头选择高级模式; B. 找到第一个Static组 在Row Groups区域中(注意不是Colu ...
- 阿里的maven私服
<mirror> <id>nexus</id> <mirrorOf>*</mirrorOf> <url>http://maven ...
- 01.总结的javascript-DOM/BOM集合
javascript总结: javascript 主要包括三个部分:1.DOM; 2.BOM; 3.ECMAscript 一.DOM(对象文档模型) 1.几个重要概念: 1)dom节点:元素,属性,文 ...
- java: Thread 和 runnable线程类
java: Thread 和 runnable线程类 Java有2种实现线程的方法:Thread类,Runnable接口.(其实Thread本身就是Runnable的子类) Thread类,默认有ru ...
- matplotlib总结
主要使用matplot.pyplot import matplot.pyplot as plt plt.figure(1) plt.subplot(211) plt.plot(x,y, 'rs') p ...
- Html锚点定位偏差计算解决插件
/*=============== 以下为HTML中的锚点代码 =====================*/ <div id="fixedNavBar" class=&qu ...