H5开发屏幕尺寸适配之rem

文章概述

本篇文章介绍H5开发屏幕尺寸适配之rem。

rem

rem用作字体、尺寸单位，1rem=浏览器默认font-size字体大小,即html根元素的font-size属性大小，大多数浏览器默认字体大小是16px。

em也是字体单位，但是1em相对大小是根据直接父元素的字体大小决定；

px转rem

可以是用sass，定义函数用来将px转rem:

/** 以iphone6尺寸标准：px转rem */
@function px2rem($px) {
    //iphone6的宽度375px
    $rem: 37.5px;
    @return ($px / $rem) + rem;
}

//使用时：
p {
    height: px2rem(40px);
}

rem基准值的设置

一般rem根据大多数浏览器html元素的默认font-size计算：1rem=16px作为基准值。

rem基准值的设置有两种方案：

使用媒体查询: 枚举的方式，根据不同尺寸设置html的font-size；
使用js脚本: 根据viewport的width动态计算html的font-size;

js脚本方式[推荐]

使用js脚本的方式动态设置html的font-size如下：

<head>
    <!--定义viewport-->
    <meta name="viewport"
              content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
              
    <script type="text/javascript">
        /** 屏幕适配入口 */
        let screenAdaptationFn = () => {
            handleScreenAdaptation();
        
            //监听可不要，因为适配只在第一次进入时设置即可
            /** 根据视口宽高的变化动态设置rem基准值*/
            window.addEventListener('resize', () => {
                handleScreenAdaptation();
            });
        };
        
        /** 处理屏幕适配 */
        function handleScreenAdaptation(){
            /** 设置视口viewport的缩放比 */
            let scale = 1 / devicePixelRatio;
            let viewportDom = document.querySelector('meta[name="viewport"]');
            viewportDom.setAttribute(
                'content',
                'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'
            );
        
            /** 设置rem初始基准值*/
            //获取视窗viewport的宽度；
            let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
            //获取html元素
            let htmlDom = document.getElementsByTagName('html')[0];
            //根据宽度的小计算rem基准值：
            htmlDom.style.fontSize = htmlWidth / 10 + 'px';
        }
    </script>
</head>

媒体查询方式

根据需要，枚举不同的屏幕尺寸设置对应的基准值：

!important提升此设置的优先级

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px !important;}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px !important;}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px !important;}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px !important;}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px !important;}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px !important;}}
@media screen and (min-width:800px){html{font-size:25px}}