• 20 【rem适配布局】

    35.rem适配布局

    【思考】

    1. 页面布局文字能否随着屏幕大小变化而变化？
    2. 流式布局和 flex 布局主要针对于宽度布局，那高度如何设置？
    3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？

    35.1 rem单位

    rem（root em）是一个相对单位，类似于 em，em 是父元素字体大小。

    不同的是 rem 的基准是相对于 html 元素的字体大小。

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

    rem 的优势：父元素文字大小可能不一致，但是整个页面只有一个 html，可以很好来控制整个页面的元素大小。（即：达到统一控制全局字体大小的效果！）

    注意：rem 控制的不仅仅是字体大小，还能控制其他元素的大小。

    /* 根 html 为 12px */
html {
   
    font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
   
    font-size: 2rem；
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    【案例】

    doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rem单位title>
    <style>
        html {
     
            font-size: 12px;
        }

        div {
     
            font-size: 12px;
            width: 15rem;
            height: 15rem;
            background-color: purple;
        }

        p {
     
            /* 1. em 相对于父元素的字体大小来说的 */
            /* 
            width: 10em;
            height: 10em;
            */
            /* 2. rem 相对于 html 元素字体大小来说的 */
            width: 10rem;
            height: 10rem;
            background-color: pink;
            /* 3.rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制 */
        }
    style>
head>

<body>
    <div>
        <p>p>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    注：虽然使用 rem 之后实现了全局字体大小的统一控制，但是依旧不能根据窗口大小自动适配，所以我们还要学习媒体查询。

    35.2 媒体查询

    35.2.1 什么是媒体查询

    媒体查询（Media Query）是 CSS3 新语法。

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

    35.2.2 语法规范

    @media mediatype and|not|only (media feature) {
   
    CSS-Code;
}

    • 1
    • 2
    • 3
    • 4
    • 用 @media 开头，注意 @ 符号
    • mediatype 媒体类型
    • 关键字 and not only
    • media feature 媒体特性，必须有小括号包含

    35.2.3 mediatype 查询类型

    将不同的终端设备划分成不同的类型，称为媒体类型。

    值 解释说明
    all 用于所有设备
    print 用于打印机和打印预览
    scree 用于电脑屏幕、平板电脑、智能手机等

    35.2.4 关键字

    关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

    • and：可以将多个媒体特性连接到一起，相当于 “且” 的意思。
    • not：排除某个媒体类型，相当于 “非” 的意思，可以省略。
    • only：指定某个特定的媒体类型，可以省略。

    35.2.5 媒体特性

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

    值 解释说明
    width 定义输出设备中页面可见区域的宽度
    min-width 定义输出设备中页面最小可见区域宽度
    max-width 定义输出设备中页面最大可见区域宽度

    【案例】

    根据页面宽度改变背景颜色。

    实现思路：

    • 按照 从大到小 的或者 从小到大 的思路
    • 注意我们有最大值 max-width 和最小值 min-width 都是包含等于的
    • 当屏幕小于 540 像素，背景颜色变为蓝色（x <= 539）
    • 当屏幕大于等于 540 像素并且小于等于 969 像素的时候背景颜色为绿色（540 <= x <= 969）
    • 当屏幕大于等于 970 像素的时候，背景颜色为红色（x >= 970）

    注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写，但是我们最喜欢的还是从小到大来写，这样代码更简洁。

    举例：

    doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  • 相关阅读:
    第46届ICPC东亚洲区域赛(昆明)补题题解 （B）
    前端监控系列2 ｜聊聊 JS 错误监控那些事儿
    231n--神经网络和反向传播
    024-继承与多态（重载与重写）案例分析
    SQL加解密注入详解
    ElasticSearch（九）：ELK 架构
    手写编程语言-实现运算符重载
    解决mysql报错this is incompatible with DISTINCT
    redis(4)-hiredis-API函数的调用
    APS计划排产在卫浴行业的应用
  • 原文地址：https://blog.csdn.net/DSelegent/article/details/126396085