(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. hdoj1754 I Hate It【线段树区间最大值维护+单点更新】

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  2. Android iOS Dribbble风格边栏菜单实现

    随着IOS7的推出,大量移动应用也开始进行了重新设计.,开始应用大量的扁平化.可以说现在IOS和Android的风格设计方面确实是在逐渐地靠拢. ReisdeMenu 创意灵感来自于Dribbble( ...

  3. servlet中web.xml配置

    常见的Servlet中url-pattren的配置 1.固定配置, 如:/hi 引入通配符 * 2.以"/XXX"开头,以"*"结尾 3.以"*&qu ...

  4. Quartz定时任务学习(六)作业

    org.quartz.Job 接口 把 Quartz 作用到 Java 类上唯一要做的就是让它实现 org.quartz.Job 接口.你的 Job 类可以实现任何其他想要的接口或继承任何需要的基类, ...

  5. JMeter的基本介绍和入门

    1. 介绍 JMeter是Apache组织的开放源代码项目,能做功能测试和性能测试.它能够对HTTP和FTP服务器进行压力和性能测试,也可以对任何数据库进行同样的测试(通过JDBC),还能以多种形式展 ...

  6. 备忘--简单比较SPSS、RapidMiner、KNIME以及Kettle四款数据分析工具

    SPSS.RapidMiner.KNIME以及Kettle四款工具都可以用来进行数据分析,只是彼此有各自的侧重点和有劣势.它们都可以逐步的定义数据分析过程,也同样都可以对数据进行ETL处理.笔者从自己 ...

  7. EasyUI-页面布局

    通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用 'add' 方法即可. 在本教程中,我们将使用 iframe 动态地添加显示在一个页面上的 Tabs. 当点击添加按钮, ...

  8. boost库在工作(37)网络UDP服务端之七

    前面介绍的都是网络TCP的服务器和客户端,其实还有UDP的服务器和客户端,同时也有同步和异步之分.UDP与TCP最大的区别,就是TCP是基于连接的,而UDP是无连接的.这里所谓的连接是指对方中断服务时 ...

  9. android78 Fragment和Activity 传递数据

    Activity: package com.itheima.senddata; import android.os.Bundle; import android.app.Activity; impor ...

  10. Load Balance Tomcat with Nginx and Store Sessions in Redis--reference

    An awkward title, but that’s exactly what we’re going to do. For some time, I was looking for a way ...