使用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性能优化的好不好对网页的执 ...
随机推荐
- Nodejs的安装及配置
1.从Nodejs官网下载安装包,进行安装,是否安装成功,可以从cmd npm去检查,出现如下界面,就表示安装成功 2.打开Webstorm进行配置,(如果安装前打开webstorm了,需要重启web ...
- (转)pymysql 连接mysql数据库---不支持中文解决
往数据库里插入中文时出现异常:UnicodeEncodeError: 'latin-1' codec can't encode characters 就是编码的问题,pymysql默认的编码是lati ...
- Could not create the view: An unexpected exception was thrown.
今天打开Myeclipse10的时候,发现server窗口出现一堆问题,问题如标题,然后下方出现了一堆java.lang.NullPointerException的问题. java.lang.Null ...
- 删除文件夹工具【fuckwinfsdel】,如 node_modules
强力删除文件夹. 安装 npm install fuckwinfsdel -g 使用 fuckwinfsdel youdir 例 fuckwinfsdel node_modules 项目地址 http ...
- Toolbar设置回退箭头的方法
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); //关键下面两句话,设置了回 ...
- Redis ConnectionException
JAVA 远程链接Redis服务失败,错误信息如下: redis.clients.jedis.exceptions.JedisConnectionException: Could not get a ...
- REST架构之Apache Wink
Apache Wink是一个使用简单,稳定的Java框架,用于创建RESTful web services应用程序.Wink包括了一个服务器端模块和一个客户端模块,用于帮助开发者快速高效的开发REST ...
- tsql语句分析工具 转
一款好用且免费的语句分析工具 在调优过程中的查询语句优化阶段,分析语句的执行计划是必经之路,一款好的执行计划分析工具确实可以帮助我们事半功倍 一款名为“Plan Explorer“,自己用的挺爽,不私 ...
- O2O、C2C、B2B、B2C的区别
一.O2O.C2C.B2B.B2C的区别在哪里? o2o 是 online to offline 分为四种运营模式 1.online to offline 是线上交易到线下消费体验 2.offline ...
- JavaWeb前端:CSS
CSS 主要是要熟悉的掌握选择器 Div 的盒模型: 整个网页被切割成一个一个盒子,盒子可以套盒子,每个盒子通过以下几个主要属性来控制显示位置: 边框 Border-top, Border-botto ...