视频链接：https://www.bilibili.com/video/BV14J4114768?p=441

为什么出现rem布局，因为传统的布局面临这这样几个问题：

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

    rem基础

    rem是一种单位，和em一样，是一种相对单位。
    em是子元素相对与父元素字体的大小，而rem是元素相对于html元素的字体大小。这里的r就是root，即根的意思，“根”即html元素。

    媒体查询

    基本使用

    媒体查询（Media Query）是CSS3的新语法。
    @media 可以针对不同的屏幕尺寸设置不同的样式。
  1. @media meidatype and|not|only (media feature){
  2.   CSS-Code;
  3. }
  • 用@media 开头
  • mediatype：媒体类型
    • all：所有设备
    • print： 用于打印机和打印预览
    • screen： 用于电脑屏幕，平板电脑，手机等
  • 关键字 and not only
    • and 且
    • not 非
    • only 指定某个特定的媒体类型，可以省略
  • media feature 媒体特性必须有小括号包含
    • width：宽度
    • min-width：最小可见区域宽度
    • max-width：最大可见区域宽度
  1. /* 在屏幕上  并且 宽度小于等于500时  body为粉红色 */
  2. @media screen and (max-width: 500px) {
  3.   body {
  4.     background-color: purple;
  5.   }
  6. }
  8. /* 在屏幕上  并且 宽度小于等于800时  body为粉红色 */
  9. @media screen  and (max-width: 800px){
  10.   body {
  11.     background-color: pink;
  12.   }
  13. }

习惯上使用从小到大的顺序写，当发生冲突时，后面的代码会把前面的覆盖。

温馨提示：媒体查询和rem更配哦~

引入资源

如果大屏和小屏的布局差异过大，那就别瞎搞了，直接整几套不同的CSS样式，不同的屏幕尺寸选择不同的样式文件，这里的样式文件就是所谓的“资源”。

一句话：针对不同的屏幕大小，调用不同的CSS文件。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  5.   <title>媒体查询——引入资源</title>
  6.   <!-- 依然按照从小到大的方式 -->
  7.   <link rel="stylesheet" href="小.css" media="screen and (min-width: 300px)">
  8.   <link rel="stylesheet" href="中.css" media="screen and (min-width: 600px)">
  9.   <link rel="stylesheet" href="大.css" media="screen and (min-width: 900px)">
  11.   </style>
  12. </head>
  14. </html>

less基础

why less?

CSS的弊端：

  • 没有变量、函数、作用域等概念
  • 冗余度高，没有逻辑，不易扩展
  • 没有计算能力
  • 非专业前端，没有丰富经验，难以写出高质量CSS代码

    what less？

    Less（Leaner Style Sheets的缩写）是一门CSS扩展语言，也成为CSS预处理器。它在CSS现有语法上，加入了程序语言的特性。

官网：https://lesscss.org/

How Less？

1、变量
要求：

  • 必须以@作为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感
  1. // 『定义方式』@变量名：值;
  2. @footer-color: pink;
  5. // 『使用方式』@变量名
  6. footer{
  7.   color: @footer-color;
  8. }

2、编译
VSCode插件：Easy Less
每次保存xxx.less文件时，自动生成xxx.css文件。
3、嵌套
见名思义。

  1. .header {
  2.   width: 200px;
  3.   height: 100px;
  5.   div {
  6.     background-color: pink;
  8.     a {
  9.       &:hover {   //使用$表示“父”元素
  10.         color: blue;
  11.       }
  12.     }
  13.   }
  14. }

4、运算
在Less中，任何数字、颜色、变量都可以参与运算。Less提供了基本的四则运算。
注意：

  • 运算符两侧必须有空格！
  • 单位问题
    • 如果参与运算的两个数只有一个有单位，那就以这个单位为准
    • 如果两个数都有单位，以第一个数的单位为准

      rem适配方案

      原理

  1. 确定1个rem有多大：按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小（媒体查询）
  2. 看每个元素有几个rem：CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值。

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

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <title>rem适配方案</title>
  6.     <style>
  7.         @media screen and (min-width: 320px) {
  8.             html {
  9.                 font-size: 21.33px;
  10.             }
  11.         }
  13.         @media screen and (min-width: 750px) {
  14.             html {
  15.                 font-size: 50px;
  16.             }
  17.         }
  19.         div {
  20.             width: 2rem;
  21.             height: 2rem;
  22.             background-color: pink;
  23.         }
  24.         /* 1. 首先我们选一套标准尺寸 750为准 
  25.         2. 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
  26.         /* 3. 页面元素的rem值 =  页面元素在 750像素的下px值 / html 里面的文字大小 */
  27.     </style>
  28. </head>
  30. <body>
  31.     <div></div>
  32. </body>
  34. </html>

技术方案二（推荐）：flexible.js + rem