移动端常用单位：

①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的更多相关文章

  1. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  2. 简单介绍移动端CSS3单位rem的用法

    PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表 ...

  3. CSS之常见布局|常用单位|水平垂直居中

    常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:f ...

  4. css常用单位

    css常用单位 本文来简单介绍下css的常用单位. 绝对长度单位 绝对长度单位代表一个物理测量. 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度单位直接映射成像素.最终, ...

  5. 细说移动端 经典的REM布局 与 新秀VW布局

    和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定 ...

  6. 移动端适配之REM

    随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...

  7. 移动端适配（rem & viewport）--移动端开发整理笔记（四）

    移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是 ...

  8. CSS的常用单位 %和 vw vh 和 box-sizing：border-box; 和flex简介

    一.% 理解: %号是CSS中的常用单位,它是相对于父容器而言的.如:一个父容器的宽是100px,给它的子元素一个10%,那么子元素的宽就是100px的10% 10px. 效果图: (利用%设置了li ...

  9. H5移动端适配方案-rem

    为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...

随机推荐

  1. 购买二手iPhone需要注意什么？这份避坑指南请收好！

    iPhone二手机市场一直非常火热,有时甚至出现供不应求的情况.主要是因为新机的价格不便宜,没什么性价比,很多小伙伴会选择低价购买二手iPhone,价格基本只要新机的二到五折.不过二手机的水深相信大家 ...

  2. router-link与router-view的对应关系和映射特点

    router-link对应的router-view规律为: 1.根据to的值而定,值为一层(如 /child)则对应app.vue中的router-view: 值为两层,如 /second/child ...

  3. 开源低代码平台开发实践二：从 0 构建一个基于 ER 图的低代码后端

    前后端分离了! 第一次知道这个事情的时候,内心是困惑的. 前端都出去搞 SPA,SEO 们同意吗? 后来,SSR 来了. 他说:"SEO 们同意了!" 任何人的反对,都没用了,时代 ...

  4. ASP.NET中Textbox后的必填验证控件RequiredFieldValidator的使用方法。

    制作效果如下: 实现方法: 1. 拖动RequiredFieldValidator控件到相应的textbox后位置,点击属性面板,输入ErroMessage相应信息,更改ForeColor为红色 设置 ...

  5. JVM参数模版

    首先需要自己根据机器的配置设置JVM中各区域的初步大小,如下: -Xms4096M-Xmx4096M-Xmn3072M-Xss1M-XX:MetaspaceSize=256M-XX:MaxMetasp ...

  6. jquery 中 live() 对于js的需求版本导致不可用解决办法

    $('body').on('click','.edit', function() {            var id = $(this).parent().attr('id');          ...

  7. CUDA学习笔记-1: CUDA编程概览

    1.GPU编程模型及基本步骤 cuda程序的基本步骤如下: 在cpu中初始化数据 将输入transfer到GPU中 利用分配好的grid和block启动kernel函数 将计算结果transfer到C ...

  8. kali linux 的ssh服务器拒绝了密码 请再试一次

    1.配置kali linux下的SSH,默认情况下kali下的SSH不允许root用户远程登录SSH,需要修改配置文件 /etc/ssh/sshd_config,修改PermitRootLogin y ...

  9. 跟我一起写 Makefile（二）

    三.make是如何工作的 在默认的方式下,也就是我们只输入make命令.那么, 1.make会在当前目录下找名字叫"Makefile"或"makefile"的文 ...

  10. spring学习07（整合MyBatis）

    10.整合MyBatis 10.1 相关jar包 junit <dependency> <groupId>junit</groupId> <artifactI ...