rem布局

最新推荐文章于 2024-10-08 11:32:20 发布

桐叶~

最新推荐文章于 2024-10-08 11:32:20 发布

阅读量109

点赞数 4

分类专栏： # web移动端文章标签： html5 css3 css html 前端

本文链接：https://blog.csdn.net/m0_57851747/article/details/134744886

版权

web移动端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

rem布局

一.rem布局
二.媒体查询
三.rem布局流程
四.flexible

一.rem布局

为使得在移动端的网页元素随着设备宽度的变化而做出相应的变化，这里需要一个相对单位，也就是rem单位
rem单位是相对单位，是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小，即html标签中的font-size

假设：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 16px;
        }
        .box {
            width: 2rem;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

此时box的width为2*16为32px

二.媒体查询

手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号 ?媒体查询就是为了解决这类问题
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
用法如下：
在这里插入图片描述
作用是自动检测视口是否符合@media括号里面的宽度，符合则进行相应设置，一般html字体设置为设备宽度的十分之一，即如下所示：

三.rem布局流程

一般设计稿会给出对应视口与其相应像素单位设计，然后由你转换为rem单位。例子如下：
计算68px是多少个rem?(假定设计稿适配375px视口)
N*37.5=68
N=68/37.5

rem单位尺寸设置：
确定设计稿对应的设备的HTML标签字号查看设计稿宽度一确定参考设备宽度(视口宽度)确定基准根字(1/10视口宽度)

如果计算都需要手动的话是比较麻烦的，后面配合less插件使用就会比较省事

四.flexible

如果每种不同视口都需要自己手写设置，那么会非常麻烦，这时使用flexible.js，其配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
flexible.js是手淘开发出的一个用来适配移动端的js框架
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
引入方式如下：
在这里插入图片描述
引入改js文件后rem就能在适应视口的变化了，我们只要计算出给了设备宽度的设计图的元素像素(比如宽高)对应的rem单位并使用，这样就能做到移动适配了。