您的位置:首页 > 设计教程 > 网页设计 > 内页

解决移动端rem+百分比布局加载瞬间页面错乱的方法

核心提示: 移动端布局有很多种,这里我最常使用到rem+ 百分比的布局方式(高度 字体设置rem单位,宽度设置百分比)来处理屏幕兼容,页面在加载未完成前会出现瞬间错乱的现象,可以解决ipad等比较大屏幕的适应兼容。

推荐——原生写法(优化加载,加快body的显示):

图片描述

<script type="text/javascript">

function resize() {

var htmlEle = document.documentElement;

var htmlWidth = window.innerWidth;

htmlEle.style.fontSize = 28 / 750 * htmlWidth + 'px';

} resize();

</script>

jQ写法(不利于加载,不过jquery.min.js体积也不算太大):

图片描述

2.小技巧——对body进行CSS处理

如果不像1一样,让js方法在页面加载到body之前就运行,又能保证加载完成前页面不错乱应该怎么做呢!

这里运用小技巧,利用css以及js的计时器等进行处理,先让body隐藏,在计算好html的font-size后再令其显示。其实按道理来说,这样的处理方式有点粗暴,但是也不是不可采用,方法如下:

给html中的body添加行内样式 style=”display:none”, 先设置隐藏;

图片描述

计算js的方法在body之后添加,做到先加载网页文档;

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:Beach

搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:design_news
扫一扫 订阅最新资讯
回到顶部