网站地图    收藏   

主页 > 前端 > html5 >

手机端布局新方法之REM

来源:未知    时间:2016-03-07 09:30 作者:xxadmin 阅读:

[导读] 首先要书写核心js代码,控制住页面的初始大小:我是以 750px(即iPhone6) 的标准,设置font-size:100; script(function(doc,win){vardocEl=doc.documentElement,resizeEvt=orientationchangeinwindow?orientationchang...

首先要书写核心js代码,控制住页面的初始大小:我是以750px(即iPhone6)的标准,设置font-size:100;

<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>

接下来再设置一下html和body:

html { height: 100%; width: 100%; font-family: 'Heiti SC', 'Microsoft YaHei'; font-size: 100px; outline: 0; -webkit-text-size-adjust:none;}
body { height: 100%; margin: 0; -webkit-user-select: none; position: relative;}

现在就可以开始布局了。

假设你现在需要一个宽度为全屏;高度为100px;的div。你可以这么写:

div{ width:7.5rem;height:1rem;}//因为我是以750px为标准的,默认又是100px所以全屏宽度就是750/100=7.5rem;高度是:100/100=1rem;以此换算。

假设你要设置24号的字体的话,则为:24/100=0.24rem

其他屏幕的手机将会自动适配。


备注:这种方法的原理其实就是在页面加载完成之后,在用js修改html的font-size 而达到自适应,这会带来一个严重的后果,在页面内容过多,网速慢,或者低端手机上,加载的时候会有一瞬间的页面拉伸,原因是dom操作要等html加载完成才开始.我目前解决的方法的是设置300毫秒的延迟显示, 期待更好的解决方法


为了根除上面的问题,在新项目中,采用rem配合px 和 百分比布局,不再使用js,,这样可以避免页面缩放问题,但在写代码的时候就没这么爽了,需要做很多计算,和思考到底用那个单位


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论