(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. Java 8 简明教程

    欢迎阅读我编写的 Java 8 介绍.本教程将带领你一步步认识这门语言的所有新特性.通过简单明了的代码示例,你将会学习到如何使用默认接口方法,Lambda表达式,方法引用和可重复注解.在这篇教程的最后 ...

  2. jetty之安装,配置,部署,运行

    上篇文章中详解了关于什么是jetty,后续文章主要是介绍jetty的使用.本章介绍jetty环境的配置及部署war包. 1. 安装 1. 先下载一个jetty的压缩包,下载地址:http://www. ...

  3. div+css的兼容性问题和解决方法

    1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;}   2. 水平居中的问题 问题: 设置 text-align: center    ...

  4. Unity3D延迟回调的封装

    最近,整理项目框架逻辑时,无意中翻到n年前封装的延迟回调管理器,就拎出来说道说道: 先说一下系统提供的几种常用的延迟回调方式: 1)Invoke(Invoke.CancelInvoke):首先需要继承 ...

  5. 在Mybatis-spring中由于默认Autowired导致不能配置多个数据源的问题分析及解决

    在使用Mybatis中,通常使用接口来表示一个Sql Mapper的接口以及相对应的xml实现,而在spring的配置文件中,通常会使用MapperScannerConfigurer来达到批量扫描以及 ...

  6. [Redux] Wrapping dispatch() to Log Actions

    We will learn how centralized updates in Redux let us log every state change to the console along wi ...

  7. oracle6

    转换函数  介绍 转换函数用于将数据类型从一种转为另外一种.在某些情况下,oracle server允许值的数据类型和实际的不一样,这时oracle server会隐含的转化数据类型 比如: crea ...

  8. lua function

    This is the main reference for the World of Warcraft Lua Runtime. Note that these are mostly standar ...

  9. python学习笔记--Django入门三 Django 与数据库的交互:数据建模

    把数据存取逻辑.业务逻辑和表现逻辑组合在一起的概念有时被称为软件架构的 Model-View-Controller (MVC)模式.在这个模式中, Model 代表数据存取层,View 代表的是系统中 ...

  10. maven 创建web项目

    1,新建一个web项目 2,构建基础目录 web.xml <!DOCTYPE web-app PUBLIC  "-//Sun Microsystems, Inc.//DTD Web A ...