(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth > 640){
clientWidth = 640;
}
docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';

if(window.orientation){
if(window.orientation == 90 || window.orientation == -90){
docEl.style.fontSize = 12 * (clientWidth / 640) + 'px';
}
}

};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);

//viewport问题
/*var devicePixelRatio = document.devicePixelRatio;
if(devicePixelRatio == 2){
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
}else if(devicePixelRatio == 3){
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
}*/

var wAlert = window.alert;
window.alert = function(message) {
try {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
var alertFrame = window.frames[0];
var iwindow = alertFrame.window;
if (iwindow == undefined) {
iwindow = alertFrame.contentWindow;
}
iwindow.alert(message);
iframe.parentNode.removeChild(iframe);
} catch (exc) {
return wAlert(message);
}
}
var wConfirm = window.confirm;
window.confirm = function(message) {
try {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
var alertFrame = window.frames[0];
var iwindow = alertFrame.window;
if (iwindow == undefined) {
iwindow = alertFrame.contentWindow;
}
var rr = iwindow.confirm(message);
iframe.parentNode.removeChild(iframe);
return rr;
} catch (exc) {
return wConfirm(message);
}
}

})(document, window);

HTML5 自适应rem布局的更多相关文章

  1. 移动端自适应rem布局

    补充一个基本知识,不许笑,1rem等于HTML中设置的字体大小(px) 首先,HTML 的 head 部分中加入如下代码: <meta name="viewport" con ...

  2. 移动端自适应rem 布局篇

    相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...

  3. 自适应rem布局

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  4. rem - 移动前端自适应适配布局解决方案和比较(转载)

    原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...

  5. 手机端页面自适应:rem布局

    rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...

  6. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  7. 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  8. 手机端页面自适应解决方案—rem布局(该方案目前已过时)

    转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...

  9. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

随机推荐

  1. [struts2]Struts遍历标签<s:iterator>总结 [转]

    转至:http://blog.csdn.net/lufeng66/article/details/7338098 struts2的s:iterator 可以遍历 数据栈里面的任何数组,集合等等 以下几 ...

  2. Flume 入门--几种不同的Sources

    1.flume概念 flume是分布式的,可靠的,高可用的,用于对不同来源的大量的日志数据进行有效收集.聚集和移动,并以集中式的数据存储的系统. flume目前是apache的一个顶级项目. flum ...

  3. UNIX环境高级编程---标准I/O库

    前言:我想大家学习C语言接触过的第一个函数应该是printf,但是我们真正理解它了吗?最近看Linux以及网络编程这块,我觉得I/O这块很难理解.以前从来没认识到Unix I/O和C标准库I/O函数压 ...

  4. Mysql Join语法解析与性能分析详解

    一.Join语法概述 join 用于多表中字段之间的联系,语法如下: ... FROM table1 INNER|LEFT|RIGHT JOIN table2 ON conditiona table1 ...

  5. 我的 ubuntu 12.04.2修复Grub

    网上有很多…… 首先我做了U盘启动,然后进入LiveCD模式. 输入grub,提示说要重新安装,好了,那就安装吧,连好网,sudo apt-get install grub 安装成功后,sudo -i ...

  6. windows向ubuntu过渡之常用编程软件安装

    不出意外的上篇文章又被踢出首页了,心情甚是悲桑..希望更多人能看到 1.安装codeblocks 直接在软件中心搜索codeblocks就可以 2.安装jdk并配置环境变量 http://www.li ...

  7. asp.net页面刷新等问题

    windows.open 关闭当前页面刷新父页面实现() { 在子页面中 Page.ClientScript.RegisterStartupScript(this.GetType(), "a ...

  8. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  9. PL/SQL 中文转换为\uxxxx格式(unicode)

    用plsql生成json的时候,经常要处理中文的情况. SELECT replace(asciistr('你好,,hello'),'\','\u') FROM dual 输出:\u4F60\u597D ...

  10. Performance tuning library cache lock & single-task message

    My colleague suddenly encountered a problem today,a Database becomes very slow , and the a lot of se ...