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;不重 ...
随机推荐
- 非对称加密算法——RSA
RSA 这种算法1978年就出现了,它是第一个既能用于数据加密也能用于数字签名的算法.它易于理解和操作,也很流行.算法的名字以发明者的名字命名:Ron Rivest, AdiShamir 和L ...
- linux集群时钟问题
一.ntpd与ntpdate的区别: 摘自:ntpd与ntpdate的区别 - 百事乐 - 博客园 http://www.cnblogs.com/liuyou/archive/2012/07/29/ ...
- Description Resource Path Location Type Java compiler level does not match the version of the instal
解决办法 在项目上右键Properties->Project Facets,在打开的Project Facets页面中的Java下拉列表中,选择相应版本. 有可能是java1.6 改成java6 ...
- 6Hibernate进阶----青软S2SH(笔记)
关于关联关系的配置,用注解配置如下(这里引用的jar包是javax.persistence) // @ManyToOne(fetch=FetchType.LAZY) @ManyToOne(fetch= ...
- [译]git log进阶
格式化log输出 oneline --oneline标记将每个commit压缩成一行. 默认情况下显示一个commit ID和commit描述的第一行. 输出如下: 0e25143 Merge bra ...
- tyvj1114 搭建双塔
描述 2001年9月11日,一场突发的灾难将纽约世界贸易中心大厦夷为平地,Mr. F曾亲眼目睹了这次灾难.为了纪念“9?11”事件,Mr. F决定自己用水晶来搭建一座双塔. Mr. F有 ...
- Coursera系列-R Programming-Final Week-Assignment3 & 总结
博客总目录,记录学习R与数据分析的一切:http://www.cnblogs.com/weibaar/p/4507801.html ------- 经过周末一个半天的努力,终于把这次的Assignm ...
- Hadoop概括——学习笔记<一>
之前有幸在MOOC学院抽中小象学院hadoop体验课. 这是小象学院hadoop2.X概述第一章的笔记 第一章主要讲的是hadoop基础知识.老师讲的还是比较全面简单的,起码作为一个非专业码农以及数据 ...
- $_SERVER 的用法
PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root ...
- Linux进程间通信(六):共享内存 shmget()、shmat()、shmdt()、shmctl()
下面将讲解进程间通信的另一种方式,使用共享内存. 一.什么是共享内存 顾名思义,共享内存就是允许两个不相关的进程访问同一个逻辑内存.共享内存是在两个正在运行的进程之间共享和传递数据的一种非常有效的方式 ...