使用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性能优化的好不好对网页的执 ...
随机推荐
- get传中文参数乱码解决方法
通常我们前端不同页面之间传参数用得最多的方法就是get方法:在url后面加上参数.例如:www.test.com?id=1&name=hello. 英文和字母很好处理,但是如果有的参数值为中文 ...
- iStylePDF c#集成开发示例
iStylePDF安装包自带了ActiveX控件,下载安装包安装之后就可以使用,如果没有安装包请到360软件管家或者腾讯软件管家搜索下载.C#的Form中集成ActiveX控件还是非常简单的,选择添加 ...
- 动态代理proxy与CGLib的区别
什么是代理? 静态代理与动态代理 静态代理实例 JDK动态代理实例 CGLib 简介 CGLib 与JDK动态代理的区别 代理模式是Java中常见的一种模式,英文名字叫走Proxy或者Surrogat ...
- react 学习笔记
1.Router 1.1 Histories React Router 是建立在 history 之上的.一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 loca ...
- SQLServer字符操作
1.CHARINDEX('A',‘VALUE’) result:2 style:PATINDEX(varchar,varchar) 解释:A在字符串VALUE的位置次序. 2.PATINDEX( ...
- (转)css3-box-sizing属性详解
box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么C ...
- asp.net 解决 "回发或回调参数无效" 一些常见解决方案
一.回发或回调参数无效,出现下图错误, 常见解决方案: 1.在页面的<%@ Page Language="C#" AutoEventWireup="true&qu ...
- jsexcel导出插件
ExcelTable.js /* * author:wenluanlai */ (function ($) { Date.prototype.Format = function (fmt) { var ...
- JAVA09异常处理之动手动脑问题
动手动脑1:为什么不管是否有异常发生,finally语句块中的语句始终保证被执行? 我们在写代码时,如果finally块中的代码过多会导致字节码条数"膨胀",因为finally中的 ...
- js 读取 地址栏参数 转
用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var re ...