移动适配-rem

且陶陶

发布于 2023-04-12 15:22:02

2.1K0

文章被收录于专栏：Triciaの小世界Triciaの小世界

rem

认识

优点：

可以适应不同大小的屏幕

使用px或者百分比布局不能实现：

px单位时绝对单位
百分比布局是宽度自适应，高度固定的

rem使用

rem使用时需要配合:

媒体查询
flexible.js(推荐使用⭐)

rem 单位

相对单位
- 相对于HTML标签的字号计算结果
- 1 rem = 1 HTML字号大小

媒体查询

作用

能够检测视口宽度，根据不同的视口宽度设置不同的html字号大小

HTML字号取值

不同的视口宽度，设置不同的HTML字体大小，取值为视口宽度的1/10

语法

@media (媒体特性) {
    选择器 {
        css属性；
        }
}

例如：

@media(width:320px) {
            html {
                font-size: 32px;
            }
        }
        @media(width:375px) {
            html {
                font-size: 37.5px;
            }
        }
        .box {
            width: 2rem;
            height: 2rem;
            background-color: red;
        }

注意： 如果电脑显示的缩放为125%，那么给媒体特性设置宽度时只设置手机型号的宽度不起作用。（因为电脑显示的手机宽度是：125%×真实手机宽度）

媒体特性常用写法

max-width 从小到大
min-width 从大到小

  /* max-width 从小到大
        min-widrh 从大到小 */
        
            /* 视口宽度 >= 768px，网页背景色是 粉色 */
            @media (min-width : 768px) {
                body {
                    background-color: pink;
                }
            }
            /* 视口宽度 >= 992px，网页背景色是 绿色 */
            @media (min-width : 992px) {
                body {
                    background-color: lightgreen;
                }
            }
            /* 视口宽度 >= 1200px，网页背景色是 skyblue */
            @media (min-width : 1200px) {
                body {
                    background-color: skyblue;
                }
            }

rem单位尺寸

确定设计稿对应的HTML标签字号
1. 查看设计稿宽度
2. 确定参考设备宽度（视口宽度）一般参考375px
3. 确定基准根字号（1/10视口宽度）
rem单位 = px数值/基准根字号值，取小数点后4位

flexible

动态的检测手机大小，给网页中html根节点设置不同的font-size。 相比较媒体查询，优点：

减少代码量
适配所有类型手机
不用担心电脑显示的缩放

<style>
  .box {
            /* 盒子大小:
            宽 = 68 / 37.5
            高 = 29 / 37.5
            */
            width: 1.8133rem;
            height: 0.7733rem;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script src="./js/flexible.js"></script>
</body>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-30，如有侵权请联系 cloudcommunity@tencent.com 删除

rem