H5中REM中使用的规则
/*REM单位换算方法 iphone6适配*/
function resizeRoot(){
var Dpr = 1, uAgent = window.navigator.userAgent;
var isIOS = uAgent.match(/iphone/i);
var wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width : window.innerWidth : window.innerWidth, wDpr, wFsize;
if (window.devicePixelRatio) {
wDpr = window.devicePixelRatio;
} else {
wDpr = isIOS ? wWidth > 818 ? 3 : wWidth > 480 ? 2 : 1 : 1;
}
if(isIOS) wWidth = screen.width;
wFsize = wWidth > 1080 ? 144 : wWidth / 7.5;
window.screenWidth_ = wWidth;
document.getElementsByTagName('html')[0].dataset.dpr = wDpr;
document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px';
}
//判断安卓手机浏览器低版本的用ready方法执行
function appsion(){
uAgent = window.navigator.userAgent;
var isIOS = uAgent.match(/iphone/i);
if(navigator.appVersion.substring(navigator.appVersion.length-6)<537 && !isIOS){
document.ready=function(){
resizeRoot();
}
}else{
resizeRoot();
}
}
appsion();
//rem配置方法执行
计算APP高度
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数:获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
}
findDimensions();
//调用函数,获取数值
window.onresize=findDimensions;
function loadAddButton(id){
// window.onload=function(){
var d1=document.getElementById(id);
var h1=d1.clientHeight+d1.scrollHeight;
var h2=d1.offsetHeight+40;
var wheight = winHeight; if(h2<wheight){
// alert(wheight);
// alert("wheight:"+wheight);
// alert("wheight:"+wheight);
document.getElementById(id).style.height=wheight+"px";
}else {//alert("h2:"+h2);
document.getElementById(id).style.height=h2+"px";
}
//}
} function loadAddlist(id,height){
findDimensions();
var wheight = winHeight - height;
document.getElementById(id).style.height=wheight+"px";
}
function bodyheight(){
findDimensions();
var body = document.getElementsByTagName("body")[0];
body.style.height=winHeight+"px";
} function getBodyheight(){
findDimensions();
return winHeight;
}
jQuery(function(){
bodyheight();
addEvent(window, 'resize', function () {
setTimeout(function(){
bodyheight();
},300);
});
});
function addEvent(e, n, o){
if(e.addEventListener){
e.addEventListener(n, o,false);
} else if(e.attachEvent){
e.attachEvent('on' + n, o);
}
}
页面用rem为单位写,但注意点:
1.最外面的宽度用百分比,最好不要用rem
2.input中line-height不要用,如果字被截,那把文字大小缩小
3.高度要用rem
H5中REM中使用的规则的更多相关文章
- css3中rem和em是干嘛的
css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...
- 详解 Python 中的下划线命名规则
在 python 中,下划线命名规则往往令初学者相当 疑惑:单下划线.双下划线.双下划线还分前后……那它们的作用与使用场景 到底有何区别呢?今天 就来聊聊这个话题. 1.单下划线(_) 通常情况下,单 ...
- 【转载】C#中自定义Sort的排序规则IComparable接口
C#中的List集合在排序的时候,如果不使用Lambda表达式进行排序的话,一般调用Sort()方法进行排序,如果希望Sort()方法排序后的结果跟我们预想的效果一致或者按照我们自定义的规则排序,则需 ...
- 5 个关于 API 中日期和时间设计规则
规则 #1 使用ISO-8601格式作为你的日期格式 ISO 8601 解决了很多问题,包括: 自然排序 - 简单和优雅,免去多余的工作即可实现排序 时区偏移 - 代表用户的地点和时区在日益增长的全球 ...
- Firewalld中的whitelist并不是规则白名单
原文地址:http://www.excelib.com/article/292/show whitelist的含义 白名单跟防火墙结合在一起大家很容易将其理解为规则白名单,不过在Firewalld中w ...
- CSS中rem、em的区别
引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...
- [转帖]关于Java中SQL语句的拼接规则
关于Java中SQL语句的拼接规则 自学demo 的时候遇到的问题 结果应该是 '"+e.getName()+"' 注意 一共有三组标点符号 (除去 方法函数后面的括号) 实现目标 ...
- HLSL中constant variables的packing规则
HLSL中constant variables的packing规则 参考MSDN上的官方文档.一般而言,HLSL将数据打包为4字节对齐,此外,它不允许数据跨16字节(即4个float的vector)的 ...
- background,position,绝对定位中位置属性的定位规则,cursor
backgorund背景 background-color:red; 背景颜色 background-image:url(路径);背景图片 background-repeat:no-repeat;不重 ...
随机推荐
- cocos2d-x打飞机实例总结(一):程序入口分析和AppDelegate,Application,ApplicationProtocol三个类的分析
首先,是个敲代码的,基本上都知道程序的入口是main函数,显然,就算在cocos2d-x框架中也一样 我们看看main函数做了什么 #include "main.h" #inclu ...
- poi导出的excel的数字小数位过多?
最近在使用Apache的POI组件对Excel进行操作,在对excel导出的时候,导出的数字本来只有两位小数,得到的结果就变成了很多位小数.如下面的图所示: 虽然对单元格使用了setCellStyle ...
- gulp-rev-collector自定义修改rev-manifest.json后替换不成功的问题分析
由于项目需要,我要把common.js替换成build.min.js,接着后面才用到build.min.js=>build-te234ds.min.js这样的形式替换,但是我发现怎么替换都不能把 ...
- a版本冲刺第八天
队名:Aruba 队员: 黄辉昌 李陈辉 林炳锋 鄢继仁 张秀锋 章 鼎 学号 昨天完成的任务 今天做的任务 明天要做的任务 困难点 体会 408 继续学习第一行代码至第四章,阅读队友代码 着手 ...
- elk系列7之通过grok分析apache日志
preface 说道分析日志,我们知道的采集方式有2种: 通过grok在logstash的filter里面过滤匹配. logstash --> redis --> python(py脚本过 ...
- python学习笔记-(十五)RabbitMQ队列
rabbitMQ是消息队列:想想之前的我们学过队列queue:threading queue(线程queue,多个线程之间进行数据交互).进程queue(父进程与子进程进行交互或者同属于同一父进程下的 ...
- elasticsearch snapshot
一.Repositories 在elasticsearch.yml文件中增加path.repo路径配置: $ vim /etc/elasticsearch/elasticsearch.yml path ...
- Win7旗舰版-X86-X64-快速装机版
装机版作品简介 Win7 32/64位旗舰版 6.5z 专注于Win7,致力于做更好用的系统!一如既往的品质,不流氓,不欺骗,不夸大!一直在改进,只为做得更好!万千用户的信赖,作者的品质保证! 作品摘 ...
- JS策略模式
1.策略模式的定义 策略模式又叫算法簇模式,将一组算法分装到一组具体共同接口的独立类或者对象中,它不影响客户端的情况下发生变化. 通常策略模式适用于当一个应用程序需要实现一种特点的服务和功能,而且该程 ...
- Scene
Unity 中场景切换 http://www.cnphp6.com/archives/62868 场景管理插件Scene Manager http://blog.csdn.net/onerain88/ ...