【Web前端】rem适配布局

り澄忆秋、

已于 2022-11-26 19:17:15 修改

阅读量2.2k

点赞数 2

分类专栏： Other 文章标签：前端 css html

于 2022-10-28 18:07:50 首次发布

本文链接：https://blog.csdn.net/T_158327/article/details/127559267

版权

Other 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、rem与em

rem(root em)是一个相对单位，类似于em，em 是父元素字体大小。
不同的是 rem 的基准是相对于 html 元素的字体大小。

比如，根元素(html) 设置 font-size = 12px; 非根元素设置 width: 2rem; 则换成 px 表示就是 24px

(rem: root em，意思是根元素，相对于根元素的字体大小)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            font-size: 14px;
        }
        div {
            font-size: 12px;
        }
        p {
            /* width: 10em; */
            /* height: 10em; */
            width: 10rem;
            height: 10rem;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

1.em，相对于父元素，一个页面有多个父元素，这些父元素的字体大小可能不一样。
2.rem，相对于根元素，一个页面只有一个根元素(html)，因此 rem 布局元素之间大小是统一的

rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小来进行整体控制

二、媒体查询

2.1 媒体查询介绍

媒体查询 (Media Query) 是CSS3新语法。

使用@media查询，可以针对不同的媒体类型定义不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
@media 可以针对不同的屏幕尺寸设置不同的样式

上面提到使用 rem 时根元素(html) 的文字大小是写死的，而使用媒体查询(@media) 就能根据不同的设备来更改根元素(html) 的文字大小来适应不同的设备

语法规范:

@media mediatype and/Inot/only (media feature){
	css-code;
}

用 @media 开关，注意 @ 符号
mediatype 媒体类型(手机、平板、电脑)
关键字 and not only(媒体类型与后面的连接)
media feature 媒体特性，必须有小括号包含

1.mediatype 查询类型
(将不同的终端划分成不同的类型，称为媒体类型)

all。用于所有设备
print。用于打印机和打印预览
scree。用于电脑屏幕，平板电脑，智能手机等

2.关键字
(关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件)

and: 可以将多个媒体特性连接到一起。
not: 排除某个媒体类型，可以省略
only: 指定某个特定的媒体类型，可以省略

3.媒体特性
(每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂且了解三个，注意他们要加小括号包含)

width: 定义输出设备中页面可见区域的宽度
==min-width: 定义输出设备中页面最小可见区域宽度
max-width: 定义输出设备中最大见区域的宽度

示例：根据不同的屏幕像素大小来改变背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
        /* 在我们的屏幕上，并且最大宽度为 600px时 */
        @media screen and (max-width: 600px){
            div {
                background-color: red;
            }
        }
        /* 在我们的屏幕上，并且最大宽度为 400px时 */
        @media screen and (max-width: 400px){
            div {
                background-color: #ecc6c6;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 1.小于540,改变蓝色 */
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }

        /* 2.540~970,改变绿色 */
        @media screen and (min-width: 540px) { /* 后面的样式会重叠当前样式 */
            body {
                background-color: green;
            }
        }
        /* 3.大于970,改为红色*/
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
    </style>
</head>
<body>
</body>
</html>

2.2 媒体查询+rem 实现元素大小动态变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top {
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            font-size: .5rem;
            background-color: green;
            color: #FFF;
        }
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
    </style>
</head>
<body>
    <div class="top">购物车</div>
</body>
</html>

2.3 媒体查询：引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的 stylesheets(css文件)，
原理就是直接在 link 中判断设备的尺寸，然后引用不同的 css文件.

建议，媒体查询先写小的，再写大的

语法格式: <link rel="stylesheet" media="mediatype and/not/only (media feature)" href="mystylesheet.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" media="screen and (min-width: 600px)" href="style600.css">
    <link rel="stylesheet" media="screen and (min-width: 1000px)" href="style1000.css">
</head>
<body>
    <div>1</div>
    <div>2</div>
</body>
</html>

三、less语法

3.1 less介绍

维护 css 的弊端：
(css是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念)

css 需要书写大量看似没有逻辑的代码，css 冗余度是比较高的
css 不方便维护及扩展，不利于复用
css 没有很好的计算能力

Less:
(Leaner Style Sheets的缩写)是一门CSS扩展语言，也成为CSS预处理器，它扩展了css的动态特性。

它在CSS的语法基础之上，引入了变量，Mix(混入)，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称说的那样，Lss可以让我们用更少的代码做更多的事情。

&.安装less:

新建 less 后缀文件，在这个 less 文件中书写 less 语句。在webstorm中设置好安装的less后编写 less 文件就会自动编译成 css 文件.

3.2 less变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用

@变量名值

必须有 @ 为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

@color1: blue;
@font14: 14px;
body {
  background-color: @color1;
}
div {
  background-color: @color1;
  font-size: @font14;
}
a {
  font-size: @font14;
}

3.3 less嵌套

1、子元素里面的样式直接写到父元素中

.container {
    width: 200px;
    height: 200px;
    background-color: blue;

    a {
        font-size: 14px;
    }
}

2、伪类、伪元素选择器、交集选择器

内层选择器里面如果没有 & 符号，则它被解析成父选择器的后代.
内层选择器里面如果有 & 符号，则它被解析成父元素自身或父元素的伪类。

.container {
    width: 200px;
    height: 200px;
    background-color: blue;

    a {
        background-color: blue;
        &:hover {
            background-color: green;
        }
    }

	&::before {
        content: "";
    }
    
}

3.4 less运算

任何数字、颜色或者变量都可以参与运算。就是 Less 提供了加(+)、减(-)、乘(*)、除(/)算术运算。

运算符中间左右需要有空格进行格开
如果两个值之间只有一个值有单位，则运算结果就取该单位
对于两个不同的单位的值之间进行运算，运算结果的值取第一个值的单位
less4.0 之后的除法需要有括号，括号内才能看做是除法，括号外使用时需要用 ./ 来强制运算

@basefont: 50px;
html {
    font-size: @basefont;
}
@border: 5px + 5;
.container {
    width: 200px - 100;
    height: 50px * 2;
    border: @border solid red;
}
img {
    width: 120rem ./ @basefont;
    height: (120rem / @basefont);
}

@import “路径名”
@import 导入的意思可以把一个样式文件导入到另外一个样式文件里面

四、rem适配方案

目标:
让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备

实现:
使用媒体查询根据不同设备按比例设置 html 的字体大小，然后页面元素使用 rem 尺寸单位，当 html 字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配

rem实际开发适配方案：
1、按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size大小; (媒体查询)
2、css 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem单位的值

4.1 方案一：rem+媒体查询+less技术

设计稿常见尺寸宽度:

般情况下，我们以一套或两套效果图适大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以 750 为准。

1、动态设置 html 标签 font-size 的大小:

① 假设设计稿是 750px
② 假设我们把整个屏幕划分为 15 等份（划分标准不一可以是20份也可以是10等份）
③ 每一份作为 html 字体大小，这里就是 50px
④ 那么在 320px 设备的时候，字体大小为 320/15 就是 21.33px
⑤ 用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的
⑥ 比如我们以 750 为标准设计稿
⑦ 一个 100*100 像素的页面元素在750屏幕下，就是 100/50 转换为 rem 是 2rem*2rem 比例是1比1
⑧ 320屏幕下，html 字体大小为 21.33 则 2rem=42.66px 此时宽和高都是 42.66 但是宽和高的比例还是1比1
⑨ 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

2、总结:

① 公式：页面元素的 rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
② 屏幕宽度 / 划分的份数就是html font-size的大小
③ 或者：页面元素的 rem值 = 页面元素值(px) / html font-size字体大小

其实就是：设置 1rem = viewWidth / 10;
设置 1rem 单位为屏幕的 10分之一，然后对于每种屏幕尺寸都设置好 1rem。页面其它元素就都使用这个尺寸。

rem值 = 页面元素值(px) / html font-size字体大小

4.2 方案二：rem+flexible.js(推荐)

手淘框架的核心原理就是根据制不同的 width 给网页中 html 根节点设置不同的 font-size,然后所有的 px 都用 rem 来代替，这样就实现了不同大小的屏幕都适应相同的样式了。

它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。

我们要做的，就是确定好我们当前设备的 html 文字大小就可以了。比如当前设计稿是750px,那么我们只需要把 html 文字大小设置为 75px(750px/10) 就可以里面页面元素 rem值：页面元素的 px值/75。

flexible.js 会根据屏幕大小自动设置 html font-size，也就是屏幕的 10分之一，在使用时将设计稿的尺寸 / font-size。

部分源码:

// set 1rem = viewWidth / 10
function setRemUnit() {
    var rem = docEl.clientWidth / 10; // 分成 10 份
    docEl.style.fontSize = rem + "px";
}

り澄忆秋、

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Web前端】rem适配布局

媒体查询 () 是CSS3新语法。使用@media查询，可以针对不同的媒体类型定义不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询@media 可以针对不同的屏幕尺寸设置不同的样式上面提到使用 rem 时根元素(html) 的文字大小是写死的，而使用媒体查询(@media)就能根据不同的设备来更改根元素(html)的文字大小来适应不同的设备css-code;}
复制链接

扫一扫