首页 > 代码库 > H5中REM中使用的规则
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中使用的规则
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。