rem 布局

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;
    }

• rem布局的核心：
  • 媒体查询：屏幕到达不同的范围下，HTML的font-sizing大小会有不同的取值;
  • HTML 字体大小 = 1rem
  • rem：那么使用rem单位的元素就会发生等比的变化；