HTML5 自适应rem布局
(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布局的更多相关文章
- 移动端自适应rem布局
补充一个基本知识,不许笑,1rem等于HTML中设置的字体大小(px) 首先,HTML 的 head 部分中加入如下代码: <meta name="viewport" con ...
- 移动端自适应rem 布局篇
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...
- 自适应rem布局
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- rem - 移动前端自适应适配布局解决方案和比较(转载)
原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...
- 手机端页面自适应:rem布局
rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
- 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...
- 手机端页面自适应解决方案—rem布局(该方案目前已过时)
转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
随机推荐
- Java 8 简明教程
欢迎阅读我编写的 Java 8 介绍.本教程将带领你一步步认识这门语言的所有新特性.通过简单明了的代码示例,你将会学习到如何使用默认接口方法,Lambda表达式,方法引用和可重复注解.在这篇教程的最后 ...
- jetty之安装,配置,部署,运行
上篇文章中详解了关于什么是jetty,后续文章主要是介绍jetty的使用.本章介绍jetty环境的配置及部署war包. 1. 安装 1. 先下载一个jetty的压缩包,下载地址:http://www. ...
- div+css的兼容性问题和解决方法
1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;} 2. 水平居中的问题 问题: 设置 text-align: center ...
- Unity3D延迟回调的封装
最近,整理项目框架逻辑时,无意中翻到n年前封装的延迟回调管理器,就拎出来说道说道: 先说一下系统提供的几种常用的延迟回调方式: 1)Invoke(Invoke.CancelInvoke):首先需要继承 ...
- 在Mybatis-spring中由于默认Autowired导致不能配置多个数据源的问题分析及解决
在使用Mybatis中,通常使用接口来表示一个Sql Mapper的接口以及相对应的xml实现,而在spring的配置文件中,通常会使用MapperScannerConfigurer来达到批量扫描以及 ...
- [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 ...
- oracle6
转换函数 介绍 转换函数用于将数据类型从一种转为另外一种.在某些情况下,oracle server允许值的数据类型和实际的不一样,这时oracle server会隐含的转化数据类型 比如: crea ...
- lua function
This is the main reference for the World of Warcraft Lua Runtime. Note that these are mostly standar ...
- python学习笔记--Django入门三 Django 与数据库的交互:数据建模
把数据存取逻辑.业务逻辑和表现逻辑组合在一起的概念有时被称为软件架构的 Model-View-Controller (MVC)模式.在这个模式中, Model 代表数据存取层,View 代表的是系统中 ...
- maven 创建web项目
1,新建一个web项目 2,构建基础目录 web.xml <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web A ...