rem自动计算
写法一:
//rem自动计算
(function (designWidth, maxWidth, viewWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid; function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width > maxWidth && (width = maxWidth);
var rem = width * 100 / designWidth;
if (viewWidth == null || viewWidth < maxWidth) {
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
} else {
remStyle.innerHTML = 'html{font-size:' + rem + 'px; max-width:' + viewWidth + 'px; margin: auto}';
}
} if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
refreshRem(); win.addEventListener("resize", function () {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false); win.addEventListener("pageshow", function (e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false); if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function (e) {
doc.body.style.fontSize = "16px"; }, false);
}
})(750, 750);
写法二:
//修改页面title
var pageTitle=document.getElementsByTagName("title")[0].innerHTML;
if(location.href.indexOf("index.html")>-1 || location.href.indexOf("html")==-1){
document.getElementsByTagName("title")[0].innerHTML="一汽-大众商城-一汽-大众官方电商平台-只为简单汽车生活";
}
//微信JSSDK
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>');
//rem自动计算
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
写法三:
//rem自动计算
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
rem自动计算的更多相关文章
- 移动端rem屏幕设置
//修改页面title var pageTitle=document.getElementsByTagName("title")[0].innerHTML; if(location ...
- 小身材大用途,用PrimusUI驾驭你的页面
“PrimusUI”是自己在借鉴了如今网上很多开源的UI库,再经过自己整理加工的一个简单代码集合. 每个功能块的CSS代码都很少,力求简单易懂,低门槛,代码可根据自己实际情况轻易修改,改到符合自己场景 ...
- PrimusUI
小身材大用途,用PrimusUI驾驭你的页面 “PrimusUI”是自己在借鉴了如今网上很多开源的UI库,再经过自己整理加工的一个简单代码集合. 每个功能块的CSS代码都很少,力求简单易懂,低门槛,代 ...
- 响应式布局-Rem的用法
前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...
- 彻底弄懂响应式设计中的em和rem
前一阵子在响应式开发中遇到了em和rem的问题,也上网搜过一些文章,篇幅很长,也没有仔细看,今天来总结一下. rem是指:根元素(root element,html)的字体大小, em是指:父元素的字 ...
- [转]响应式网页设计:rem、em设置网页字体大小自适应
本文转自:http://www.cnblogs.com/aimyfly/archive/2013/07/19/3200742.html 「rem」是指根元素(root element,html)的字体 ...
- 响应式十日谈第一日:使用 rem 设置文字大小
上面回顾: 在序言中我们已经提到了响应式的一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时 ...
- 使用rem设计移动端自适应页面一(转载)
1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...
- 移动端rem计算
教你如何用 lib-flexible 实现移动端H5页面适配 2017年07月22日 16:01:24 Pwcong 阅读数:18872 版权声明:本文为博主原创文章,未经博主允许不得转载. h ...
- 响应式网页:用em,rem设置网页字体大小自适应
「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...
随机推荐
- C++编程笔记(STL学习)
一.顺序容器 1.1.vector 1.2.dequeue 1.3.list 二.关联性容器 2.3.set 2.3.map 三.算法 3.1.遍历算法(for_each ...
- Qt VideoMeeting_Intercom师生对讲开发中实际上遇到的一些问题,终于结项了,也照例写一下总结吧。
layout: post title: Qt VideoMeeting_Intercom师生对讲开发中实际上遇到的一些问题,终于结项了,也照例写一下总结吧. description: 软件开发,初次开 ...
- 带你读AI论文丨针对文字识别的多模态半监督方法
摘要:本文提出了一种针对文字识别的多模态半监督方法,具体来说,作者首先使用teacher-student网络进行半监督学习,然后在视觉.语义以及视觉和语义的融合特征上,都进行了一致性约束. 本文分享自 ...
- 【机器学习】李宏毅——Adversarial Attack(对抗攻击)
研究这个方向的动机,是因为在将神经网络模型应用于实际场景时,它仅仅拥有较高的正确率是不够的,例如在异常检测中.垃圾邮件分类等等场景,那些负类样本也会想尽办法来"欺骗"模型,使模型无 ...
- 回顾Vue计算属性VS其他语法有感
回顾Vue计算属性VS其他语法有感 重新回顾官方教程中的到计算属性和侦听器,发觉获益良多,主要就是两点: 计算属性和其他语法的比较 计算属性.侦听属性.方法.模板变量的使用 计算属性和其他语法的比较 ...
- Wireshark网卡无法找到或没有显示的问题
问题背景 最近在处理公司内网域名解析的问题,发现配置好一个新域名在内网环境可以正常解析成内网IP,但使用深信服VPN却无法正常解析,并且其他域名使用深信服VPN可以正常解析,所以参考<内网域名解 ...
- [编程基础] C++多线程入门5-使用互斥锁解决资源竞争
原始C++标准仅支持单线程编程.新的C++标准(称为C++11或C++0x)于2011年发布.在C++11中,引入了新的线程库.因此运行本文程序需要C++至少符合C++11标准. 文章目录 5 使用互 ...
- 企业应用架构研究系列二十四:SQL Server 数据库调优之XEvent 探查器
如果入职一些中小型公司,往往需要接手一些很"坑"的项目,到底多坑就不牢骚了,只讲一下,如果破解这些历史遗留的项目问题.项目代码可能短时间无法进行通读研究,我们就需要从底层数据库进行 ...
- [Leetcode]扁平化多级双向链表
题目 https://leetcode-cn.com/explore/learn/card/linked-list/197/conclusion/764/ 代码 /* // Definition ...
- [C#]从两个例子理解async/await
1 例子1 输出的结果为: 可以看出执行的结果为:A--D--B--C--E. 我们再看下一个例子(注意,我们把代码中D和E的位置交换) 2 例子2 结果: 结果为:A--B--C--E--D 3 理 ...