移动适配rem

最新推荐文章于 2024-02-27 15:47:17 发布

小番水源

最新推荐文章于 2024-02-27 15:47:17 发布

阅读量843

点赞数 1

分类专栏：移动端布局 css 文章标签：大数据

本文链接：https://blog.csdn.net/weixin_43368552/article/details/125602229

版权

css 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

移动端布局

6 篇文章 0 订阅

订阅专栏

移动适配：

rem：目前绝多数企业在用的移动端适配解决方案

vw/vh:biibili部分大厂开始使用vw/vh移动端适配解决方案（未来可能的移动端适配解决方案）

目标：能够使用rem单位设置网页元素的尺寸

网页效果：
屏幕宽度不同，网页元素尺寸不同（等比缩放）

px单位或者百分比布局可以实现吗？

px单位是绝对单位

百分比布局特点是宽度自适应，高度固定

适配方案：

rem

vw/vh

rem单位

相对单位

rem单位是相对于HTML标签的字号（根元素的字体大小）计算结果

1rem=1HTML字号大小

rem的使用：
在使用rem的时候，需要先设置html字体大小。

引用(44条消息) rem和em的区别_枫叶在飘呀的博客-CSDN博客_rem与em的区别

首先：rem全称（font size of the root element）（根元素的字体大小）
它是css3新增的尺寸（度量单位），根节点（html）的font-size决定了rem的尺寸单位，也就是所它是一个相对的单位
rem是一个相对长度单位。相对于父元素的倍数来计算。
浏览器默认字体大小是16px,1rem就是16px.

思考：

1.手机屏幕大小不同，分辨率不同，如何设置不同的html字体大小？

媒体查询

2.设备宽度不同，html标签字号设置多少合适？

目前rem布局方案中，将网页等分为10份，html标签的字号为视口宽度的1/10

检测视口宽度就用媒体查询！！！

使用媒体查询设置差异化css样式

媒体查询能够检测视口的宽度，然后编写差异化的css样式

@media（媒体特性）{

选择器{

css属性

} }

媒体查询小案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 使用媒体查询，根据不同的视口宽度，设置不同的根字号！！！ */
        @media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }
        @media (width:1280px){
            html{
                font-size: 128px;
            }
        }
        .box{
            width: 5rem;
            height: 3rem;
            background-color: aqua;
        }
    </style>
</head>

<body>
<div class="box"></div>
</body>

</html>

注意：在使用媒体查询的时候，想要里面的rem生效，必须设置电脑的缩放比例

我们之前默认设置一般为150%，当你设置不是100%的时候，视口宽度计算的大小不一致，所以@media失效（千万注意！！！）

一般来说：ui给的移动端设计稿一般是375px大小。

为了适配众多手机型号，众多宽度，同时你不能每新上一台手机，就添加一次@media，所以使用flexibles配合rem实现不同宽度的设备，实现网页元素尺寸等比例缩放效果。

flexible.js是手淘开发出的一个用来适配移动端的js框架

核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size

小番水源

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
移动适配rem

移动适配：rem：目前绝多数企业在用的移动端适配解决方案vw/vh:biibili部分大厂开始使用vw/vh移动端适配解决方案（未来可能的移动端适配解决方案）目标：能够使用rem单位设置网页元素的尺寸网页效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）px单位或者百分比布局可以实现吗？px单位是绝对单位百分比布局特点是宽度自适应，高度固定适配方案：remvw/vh rem单位相对单位rem单位是相对于HTML标签的字号（根元素的字体大小）计算结果1rem=1HTML字号大小rem的使用：在使用rem的
复制链接

扫一扫