rem布局

本文由清尘发表于2019-08-09 15:57属于javascript分类

viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

初始字号

css中设定html根元素的初始字体大小为100px

html{font-size:100px;}

单位转换

不管你拿到的设计稿宽度是640px还是750px,多大都一样。和我们平时做PC页面的做法基本一样,只需要把单位px换算成rem,所有设计稿的的元素大小全除以100单位换成rem,例如设计稿上个某个文字的大小为30px,直接写font-size:0.3rem。

示例代码

用 onorientationchange 函数来检测屏幕旋转,在一些APP或游戏内嵌页面会有该函数不会执行、orientation获取不到的情况。所以如果是游戏app内嵌页建议使用 resize 事件,检查宽高变化来检测屏幕是否旋转。

<script> 
    //屏幕适应 
    (function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
            var html = document.documentElement;
            var k = 640;
            html.style.fontSize = html.clientWidth / k * 100 + "px";
        }
        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);
</script>

注意事项

使用rem方式布局有以下几点需要注意:

页面用不同尺寸的手机进行测试

因为小于1px浏览器支持不够好为会导致计算会有误差,背景图使用雪碧图时,图标之间多留5px的空隙,同时图片的backgrornd-size属性最好写上图片的宽高,不写误差更大。 

雪碧图,如图片宽高为346px*160px需要设置background-size属性设置为background-size: 3.46rem 1.6rem;

大小为1px的元素不要使用rem,直接用px

多栏多列布局优先使用百分比%或是display:flex