rem 布局_rem布局-CSDN博客

本文链接：https://blog.csdn.net/qq_51449345/article/details/109567587

rem 布局

流式布局、flex布局在宽度上控制的布局，高度写死；
rem布局，最为直观的效果，页面全部元素现实等比缩放，包括文字，盒子大小；

rem 单位

rem单位，可以控制整个页面所有元素有关PX类；（宽、高、padding、margin、top…）只要是你设置数值的地方都可以实现控制；

语法

root: 1rem=HTML的font-size大小；
语法：

/* 1.根html 为 15px */
html {
   font-size: 15px;
}

/* 2.此时 div 的宽就是 100px */       
div {
    width: 10rem;
}

特点：绝对的唯一控制；

媒体查询

作用：响应屏幕的变化；
该可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示；

语法

CSS3 新语法，是一个查询屏幕的过程，通过查询当前屏幕尺寸属于哪个范围，从而有哪个范围的样式生效；
mediatype (media feature) 都是它的查询条件

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

mediatype：媒体类型；查询不同的终端设备； screen最为常用：查询当前设置的屏幕；
and|not|only：关键字；将多个条件连接在一起共同查询；
- and：可以将多个媒体特性连接到一起，相当于“且”的意思；最为常用；生活中：“我既要娶白富美，又要走上人生颠覆”；
- not：排除某个媒体类型，相当于“非”的意思，可以省略。生活：“我喜欢看电影，除了恐怖片”；
- only：指定某个特定的媒体类型，可以省略。生活：“我这辈子非你不嫁”；
(media feature)：媒体特性；
- 对于屏幕 screen，屏幕的宽度就是一个特性；
实例：
- 查询条件加小括号；
- min-width/max-width：最小界值，最大界值；查询条件包含等于号；

/* 宽度的最小界值500px，大于等于500px */
@media screen and (min-width:500px) {
    body {
        background-color: red;
    }
}

档位划分

划分要求：
- 档位1：w<540px w <= 539px;
- 档位2: 540px<= w and w< 640px;
- 档位3: 640px<= w

语法实现：

        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        @media screen and (min-width: 540px) and (max-width: 639px) {
            body {
                background-color: green;
            }
        }
        @media screen and (min-width: 640px) {
            body {
                background-color: red;
            }
        }

第二档位可简写为：

        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }

图示：

特点：划分屏幕，等待变化；

资源引入（了解即可）

语法：不常用

<!-- 320px~640px -->
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<!-- n>=640px -->
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

rem+媒体查询初体验

rem布局的核心：rem+媒体查询；

等比!!!

rem布局的效果是等比，理解等比是我们学习的关键。
等比的效果：无论怎么发生等比变化，有一个比例一直是不变的；那么是哪个比例？
图示:

重点：
- 图在宽度方向划分为三个基础块，缩放前后，相同份数；
- 其实分为几份没有关系，最为重要是缩放前后要份数相同；
等比变化的核心：
- 等比变化前后，宽高方向需要的份数相同，
- 基础块变化，整个就是等比缩放；

初体验

rem：唯一控制；只要用rem作为单位，当 HTML字体大小发生改变，使用rem单位元素都会发生改变；
媒体查询：把屏幕划分不同档位，等待变化；
加在一起：划分屏幕，等待变化；变化谁？变化唯一控制 rem（HTML字体大小）
语法：

    @media screen and (min-width: 320px) {
      html {
        font-size: 50px;
      }
    }
    
    @media screen and (min-width: 640px) {
      html {
        font-size: 100px;
      }
    }
    
    .top {
      width:1.75rem;
      height:5.25rem;
    }