首页 > 移动平台 > 详细

移动端常用单位——rem

时间：2019-09-16 23:57:55      阅读：151      评论：0      收藏：0      [点我收藏+] 
移动端常用单位：
①px：像素大小，固定值
②%：百分比
③em（不常用，但是在首行缩进时可以使用）：相对自身的font大小（当自身的字体大小也是em做单位时，才会以父元素的字体大小为基准单位）
④rem（移动端主流）：相对根节点(html)的font大小
⑤vw（视口宽度）：相对视口宽度比例，1vw相当于视口宽度的百分之一
⑥vh（视口高度）：相对视口高度比例，1vh相当于视口高度的百分之一


视口宽度（clientWidth）用JS获取,修改html{ font-size : ?rem } 从而动态调整flex布局宽高：docEl.style.fontsize = viewWidth/375*20+‘px‘;
移动端rem目前还是主流

 

 

技术分享图片

 

 

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>3.9 移动端常用单位</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <style>
        /*px/%/em/rem/vw/vh*/

        /*css reset*/
            * {
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }
            body {
                background-color: #e2e2e2;
                color: #595B66;
            }
            a {
                font-size: 12px;
                color: #686868;
                text-decoration: none;
            }
            li {
                list-style: none;
            }

        /*body {
            font-size: 20px;
        }*/

        html {
            font-size: 12px;
        }
        .tabbar-container {
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 1000;
            width: 100%;
            
            /*height: 5em;
            font-size: 12px;*/
            /*font-size: 12em;*/

            /*height: 5rem;*/

            /*width: 100vw;
            height: 10vh;*/
            background-color: #fff;
            box-shadow: 0 0 10px 0 rgba(154, 141 ,141, 0.6);

            height: 50px;
            /*
                height
                    375px -> 100%(375px) x 50px
                    750px -> 100%(750px) x 100px
                    ?(视口宽度) -> (? / 750) * 100 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    height = (document.documentElement.clientWidth / 750) * 100 px
                    height = (document.documentElement.clientWidth / 375) * 50 px
            */

            /*
                用px/em做单位，每次都要用js一一修改
                能不能统一修改呢？
                    375px -> 1rem = 20px;
                        height = 50 / 20 = 2.5rem;
                    750px -> 1rem = 40px;
                        height = 100 / 40 = 2.5rem;
                    ?(视口宽度) -> 1rem = (? / 375) * 20 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    1rem = (document.documentElement.clientWidth / 375) * 20 px
                    1rem = (document.documentElement.clientWidth / 750) * 40 px
                    height = 2.5rem;
            */
            /*375px 1rem = 20px;*/
            height: 2.5rem;
        }
        .tabbar-link .iconfont {
            /*font-size: 24px;*/
            font-size: 1.2rem;
            /*font-size: 2em;*/

            /*
                font-size
                    375px -> 24px
                    750px -> 48px
                    ?(视口宽度) -> (? / 750) * 48 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    font-size = (document.documentElement.clientWidth / 750) * 48 px
                    font-size = (document.documentElement.clientWidth / 375) * 24 px
            */
            /*
                用px/em做单位，每次都要用js一一修改
                能不能统一修改呢？
                    375px -> 1rem = 20px;
                        font-size = 24 / 20 = 1.2rem;
                    750px -> 1rem = 40px;
                        font-size = 48 / 40 = 1.2rem;
                    ?(视口宽度) -> 1rem = (? / 375) * 20 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    1rem = (document.documentElement.clientWidth / 375) * 20 px
                    1rem = (document.documentElement.clientWidth / 750) * 40 px
                    font-size = 1.2rem;
            */
        }
        .tabbar,
        .tabbar-item,
        .tabbar-link {
            height: 100%;
        }
        .tabbar {
            display: flex;
        }
        .tabbar-item {
            flex: 1;
        }
        .tabbar-link {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            font-size: 0.6rem;
        }
        .tabbar-item-active .tabbar-link {
            color: #de181b;
        }
    </style>
</head>
<body>

    <!-- <p style="text-indent: 2em;">
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
    </p> -->

    <div class="tabbar-container">
        <ul class="tabbar">
            <li class="tabbar-item tabbar-item-active">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-category"></i>
                    <span>分类页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-cart"></i>
                    <span>购物车</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-personal"></i>
                    <span>个人中心</span>
                </a>
            </li>
        </ul>
    </div>

    <script>
        setRemUnit();

        window.onresize = setRemUnit;

        function setRemUnit() {
            var docEl = document.documentElement;
            var viewWidth = docEl.clientWidth;

            docEl.style.fontSize = viewWidth / 375 * 20 + ‘px‘;
            // docEl.style.fontSize = viewWidth / 750 * 40 + ‘px‘;
            // 1rem = 20px
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>3.9 移动端常用单位</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <style>
        /*px/%/em/rem/vw/vh*/

        /*css reset*/
            * {
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }
            body {
                background-color: #e2e2e2;
                color: #595B66;
            }
            a {
                font-size: 12px;
                color: #686868;
                text-decoration: none;
            }
            li {
                list-style: none;
            }

        /*body {
            font-size: 20px;
        }*/

        html {
            font-size: 12px;
        }
        .tabbar-container {
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 1000;
            width: 100%;
            
            /*height: 5em;
            font-size: 12px;*/
            /*font-size: 12em;*/

            /*height: 5rem;*/

            /*width: 100vw;
            height: 10vh;*/
            background-color: #fff;
            box-shadow: 0 0 10px 0 rgba(154, 141 ,141, 0.6);

            height: 50px;
            /*
                height
                    375px -> 100%(375px) x 50px
                    750px -> 100%(750px) x 100px
                    ?(视口宽度) -> (? / 750) * 100 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    height = (document.documentElement.clientWidth / 750) * 100 px
                    height = (document.documentElement.clientWidth / 375) * 50 px
            */

            /*
                用px/em做单位，每次都要用js一一修改
                能不能统一修改呢？
                    375px -> 1rem = 20px;
                        height = 50 / 20 = 2.5rem;
                    750px -> 1rem = 40px;
                        height = 100 / 40 = 2.5rem;
                    ?(视口宽度) -> 1rem = (? / 375) * 20 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    1rem = (document.documentElement.clientWidth / 375) * 20 px
                    1rem = (document.documentElement.clientWidth / 750) * 40 px
                    height = 2.5rem;
            */
            /*375px 1rem = 20px;*/
            height: 2.5rem;
        }
        .tabbar-link .iconfont {
            /*font-size: 24px;*/
            font-size: 1.2rem;
            /*font-size: 2em;*/

            /*
                font-size
                    375px -> 24px
                    750px -> 48px
                    ?(视口宽度) -> (? / 750) * 48 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    font-size = (document.documentElement.clientWidth / 750) * 48 px
                    font-size = (document.documentElement.clientWidth / 375) * 24 px
            */
            /*
                用px/em做单位，每次都要用js一一修改
                能不能统一修改呢？
                    375px -> 1rem = 20px;
                        font-size = 24 / 20 = 1.2rem;
                    750px -> 1rem = 40px;
                        font-size = 48 / 40 = 1.2rem;
                    ?(视口宽度) -> 1rem = (? / 375) * 20 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    1rem = (document.documentElement.clientWidth / 375) * 20 px
                    1rem = (document.documentElement.clientWidth / 750) * 40 px
                    font-size = 1.2rem;
            */
        }
        .tabbar,
        .tabbar-item,
        .tabbar-link {
            height: 100%;
        }
        .tabbar {
            display: flex;
        }
        .tabbar-item {
            flex: 1;
        }
        .tabbar-link {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            font-size: 0.6rem;
        }
        .tabbar-item-active .tabbar-link {
            color: #de181b;
        }
    </style>
</head>
<body>

    <!-- <p style="text-indent: 2em;">
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
    </p> -->

    <div class="tabbar-container">
        <ul class="tabbar">
            <li class="tabbar-item tabbar-item-active">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-category"></i>
                    <span>分类页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-cart"></i>
                    <span>购物车</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-personal"></i>
                    <span>个人中心</span>
                </a>
            </li>
        </ul>
    </div>

    <script>
        setRemUnit();

        window.onresize = setRemUnit;

        function setRemUnit() {
            var docEl = document.documentElement;
            var viewWidth = docEl.clientWidth;

            docEl.style.fontSize = viewWidth / 375 * 20 + ‘px‘;
            // docEl.style.fontSize = viewWidth / 750 * 40 + ‘px‘;
            // 1rem = 20px
        }
    </script>
</body>
</html>

 

移动端常用单位——rem

原文：https://www.cnblogs.com/rickdiculous/p/11530967.html
踩
(3)
赞
(3)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！