前端移动web-day03学习笔记

01-rem布局

1.rem介绍 ： 相对单位 1rem = html元素字体大小

应用场景 : 适配高度

2.rem与em区别

相同点 ： 都是相对单位

不同点： 参考的元素不同

rem:参考的是根元素（html）字体大小 （统一的，一个页面只有一个html）

em:参考的是元素自身字体大小 (不统一，页面的元素字体大小不一定都是一致的)

3.rem使用流程

(1)设置HTML字体大小一般为 屏幕宽度 1/10

* 一般使用js来实现（后期会学习js）

* 导入rem.js

(2)设置cssrem插件的参考值为 当前设计稿的rem

(3)根据UI设计稿，计算rem的值 (cssrem插件自动帮我们计算)

* 例如 ： 640设计稿 1rem = 32px rem = px/32

* 例如 ： 750设计稿 1rem = 37.5px rem = px/37.5

4.cssrem插件使用

(1)计算元素的rem = 设计稿的px / 设计稿的屏幕的1rem

(2)cssrem插件 ： 自动根据px来计算rem

a.安装

b.设置cssrem插件的rem单位为设计稿的rem

c.写样式代码 按照设计稿的px来写， 插件会自动转换成rem

动态修改html字体大小为屏幕 1/10

• 在实际开发中，一般公司都会设置 1rem = 1/10屏幕宽度
  • 也有的公司会设置1rem = 1/20屏幕宽度
  • 也有的公司会设置1rem = 1/100 屏幕宽度
  • 这个rem的值无论是多少，都不影响它本身的作用：同时适配宽度和高度。所以还是那句话，怎么舒服怎么来
    • 这里是淘宝内部解释为什么淘宝的开发团队将rem设置为 1/10 屏幕宽度(其实是为了以后能够兼容vw和vh)
      • https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
• rem布局注意点
  • a.一般使用rem布局，都需要设置html字体大小
  • b.实际开发中，一般设置 html字体大小 = 1/10 屏幕宽度

  也就是说，通过动态设置html字体大小，实现 1rem = 1/10 屏幕宽度

  • c.动态设置html字体大小为手机当前屏幕 1/10的两种方式
    • 1.使用js代码（推荐）
    • 2.使用css媒体查询
      • 由于实际开发中一般使用js代码来动态设置html字体大小，实现1rem = 1/10 屏幕宽度，
        • 由于暂时未接触js语言，所以这里老师提前写好一个js文件，我们开发时只需要导入即可

02-Less语法(CSS预处理语言)

1.less语言，css预处理语言

a.浏览器只识别三种语言：html,css,js

b.如果是其他的语言，浏览器不能直接识别，需要转成浏览器可以识别的语言

c.预处理语言：浏览器不能直接识别，需要预先处理成css语言

2.less语言作用：给css加buff（让css更加强大）

*less支持所有的css语法，只是在原有的css功能上添加了一些功能（4-5）

3.less工作流程

*（1）新建一个后缀名为.less的文件

*（2）需要将less预处理成css语言（Eazy LESS）

* 你在less文件中写代码，只要保存，这个插件就会帮你自动生成css更新

*（3）在浏览器中导入“css文件”

less语法-变量

• 1.变量(variable)作用：存储数据
  • 类似于数学中的字母，例如 a = 10, ax5 = 50.这个a就代表10，好处就是便于维护css代码
• 2.语法：@变量名 : 值
  • @w:100px,定义一个变量w，存储宽度100px
  • @bgc:hotpink,定义一个变量bgc，存储颜色hotpink
• 3.注意点：less中的变量可以使用 + - * / 进行数学计算
  • 加：+
  • 减：-
  • 乘：*
  • 除：/

less语法-混合

• 1.less混合语法作用：在一段css代码中通过类名插入另一端css代码
• 2.语法: .类名()

less代码如下

.myborder{
    border-top: 5px solid pink;
    border-bottom: 10px solid green;
}
.box{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    //使用混合语法插入上面一段css代码:  .类名()
    .myborder();
}

预处理之后的css代码

.myborder {
  border-top: 5px solid pink;
  border-bottom: 10px solid green;
}
.box {
  width: 200px;
  height: 200px;
  background-color: yellowgreen;
  border-top: 5px solid pink;
  border-bottom: 10px solid green;
}

==less语法-嵌套==

less嵌套语法作用：将后代选择器写在一个大括号中，提高代码阅读性

less代码如下

.box{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    
    span{//相当于css的后代选择器: .box span
        color: green;
    }

    >span{//相当于css子代选择器： .box>span
        color: purple;
    }

    a{//相当于css后代选择器： .box a
        color: blue;
        &:hover{//less支持多层嵌套，注意伪类前面需要加上&,相当于css： .box a:hove
            color: black;
        }
    }
}

预处理之后的css代码

.box {
  width: 200px;
  height: 200px;
  border: 2px solid red;
}
.box span {
  color: green;
}
.box > span {
  color: purple;
}
.box a {
  color: blue;
}
.box a:hover {
  color: black;
}

less语法-导入

• 1.less导入语法作用：在一个文件中导入多个css文件，可以减少html文件中link标签数量(提高代码简洁性)
  • 其实就是将多个css文件代码合并到一个css文件中
  • 项目一般是会有多个css文件，那么现在我们使用less的方式来写css，相对来讲，文件数目会翻倍。 如果每个css文件我都导入，那相对来讲是一件非常麻烦的事情,所以我们可以利用LESS中的导入语法
• 2.导入语法: @imports "需要导入的less文件名;"
  • 注意点
    • a.注意less文件名需要使用双引号引起来
    • b.最后面那个分号不能省略
    • c.后缀名less可以省略

//导入：相当于把多个文件css代码合并到一个css文件中

//将base和index两个文件css代码合并到total文件中

@import "base.less";//后缀名less也可以省略， @import "base"

@import "index.less";