移动webday06笔记

发表于
字数统计: 3.2k | 阅读时长 ≈ 12

《部分案例代码下载》

学习目标

  • 了解less的作用
  • 能够了解less的基本语法
  • 能够理解rem和em的区别
  • 掌握媒体查询+rem适配
  • 能够完成苏宁rem布局首页

。。。。。。

理解上课的知识点……

LESS的学习

在写css的时候，可以直接写一个.css文件，但是实际开发中也会使用less的方法写css。

less的写法比css的写法功能更加强大。

维护css的弊端

css是一门非编程式语言，没有变量、函数、作用域等概念

  • css需要书写大量没有逻辑的代码，冗余度较高

    比如：相同的样式往往css中需要写很多次，而你却无可奈何

  • 不方便维护和拓展，不利于复用

    比如：更改网页的主题色css需要一个一个的修改，而你却无可奈何

  • css没有很好的计算能力

    比如：css中的大小不能直接填写计算式子，一般要手动计算后填写结果

使用less就能解决以上css中的弊端

Less的介绍

Less 是一门 CSS 预处理语言，也叫做css的预处理器。它扩展了 CSS 的写法，增加了变量、函数等特性。

1
2
3
less作为css的拓展，并没有减少css的功能，而是在现有的css语法中，加入了程序式语言的特性
less在css的语法基础上，引入了变量、Mixin（混入）、运算以及函数等功能，大大简化了css的编写，并且减低了css的维护成本，正如其名字一样：less可以让我们用更少（less）的代码做更多的事情
当然，常见的css预处理器有：Less、Sass、Stylus

注意点：

  • 在less中，完全兼容css的语法，所以可以直接在less文件中写css没问题
  • 浏览器不认识less文件，需要需要使用less中的样式，需要先把less文件编译成.css文件，再使用！！

less的编译插件及配置

less写完之后需要编译.css文件才能使用，此时可以使用VScode中的插件完成。

插件的安装步骤：

  1. 选择左侧第五个拓展按钮，下载插件 easy less ，点击安装，再点击重新加载

    安装好之后，重新加载或者关闭vscode重新打开

    easyless安装

  2. 实际开发中需要对插件进行配置

    让编译好的css文件在css文件夹中

    在设置代码中添加一下配置即可

    使用的时候直接复制粘贴，注意在上一行的最后加一个逗号

    设置完之后需要重新打开vscode即可

    1
    2
    3
    "less.compile": {
        "out": "../css/"
    }

    easyless配置

注意点：

  • 以后项目中如果有less文件之后，样式都在less文件中写即可，不用去修改css文件

    因为css文件都是less编译之后的结果，只需要关注less的修改即可

  • 但是页面中引入的必须是编译之后的css文件，因为less文件浏览器不认识。

Less语法

less的注释

在less文件中可以写两种注释

  • 一种是css的注释：/* 注释的内容 */ ，最后会编译展示在css文件中
  • 一种是less的注释：// 注释的内容 ，只在less中使用，不会编译展示在css文件中

一般在less文件中，推荐使用less的注释方法

less的变量

一般在网站中会有主题色（当前网页中用的较多的颜色），如果此时需要改换网页的主题色，一个个去改非常麻烦，此时可以使用less中的变量完成效果

语法：

1
2
3
变量：可以变化的量
语法：@变量名:变量值;
作用：编译的时候会把less中所有的变量名替换成变量值，这样可以统一修改某一个值（如主题色）

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@mainColor:#e92322;

.box1 {
  width: 200px;
  height: 200px;
  background-color: @mainColor;
}
.box2 {
  width: 200px;
  height: 200px;
  background-color: @mainColor;
}
.box3 {
  width: 200px;
  height: 200px;
  background-color: @mainColor;
}

less的嵌套

在less中，选择器的关系可以通过嵌套来表示

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
// less中的嵌套：less中选择器可以嵌套
// 1、后代选择器，选择器嵌套即可
// 2、子代选择器，前面使用>
// 3、并集选择器，前面直接写,
// 4、交集选择器，前面使用&（&表示这一级选择器）
// 5、伪元素，前面使用&（&表示这一级选择器）

.father {
  width: 600px;
  height: 600px;
  background-color: pink;
    
   // 后代的关系，直接嵌套即可
  .son {
    width: 400px;
    height: 400px;
    background-color: blue;
	
    // 子代选择器，前面加一个>
    >.sun {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  }
    
  // 并集选择器
  .box1,
  .box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
  }

  // 交集选择器
  &.active {
    background-color: red;
  }
    
  // 伪元素
  &::after {
    content: '';
  }

}
————————

less的运算

在less代码中可以直接写加减乘除进行计算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
  width: 200px;
  height: 200px;
  background-color: pink;

  // 伪类的写法
  &:hover {
    // less中可以直接计算加减乘除计算的，编译之后会把计算的结果直接显示在css文件中。之后学习的rem布局中需要使用到less运算的功能
    width: 200px / 3;
    width: 200px * 2;
    width: 200px + 100;
    width: 200px - 100;
  }
}

less的函数（了解）

针对于css中重复的样式，除了可以使用定义公共类的方式，还可以使用less中的函数来处理（函数在之后的js会详细说到，先简单了解下）

需求：

每一个选择器中的width和height代码都重复了，节省代码的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.red {
  width: 300px;
  height: 300px;
  background-color: red;
}
.blue {
  width: 300px;
  height: 300px;
  background-color: blue;
}
.green {
  width: 300px;
  height: 300px;
  background-color: green;
}
  • 可以提取出一个公共类出来，然后给对应的标签上加公共类
  • 也可以使用less中的函数，给选择器上使用函数也可以
  • 语法：.函数名(){重复的样式} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 在less中也一种处理重复样式的方法：函数。直接在选择器里面使用
// 函数的写法和定义公共类很像，后面需要加上括号

// 定义函数
.common() {
  width: 300px;
  height: 300px;
}

.red {
  // 使用函数
  .common();
  background-color: red;
}

.blue {
  .common();
  background-color: blue;
}

.green {
  .common();
  background-color: green;
}

拓展：

函数里面可以传参，让函数中样式的取值变化（变化的量→变量）

比如让红盒子100*100， 蓝盒子200*200 ，绿盒子300*300

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.common(@value) {
  width: @value;
  height: @value;
}

.red {
  // 使用函数
  .common(100px);
  background-color: red;
}

.blue {
  .common(200px);
  background-color: blue;
}

.green {
  .common(300px);
  background-color: green;
}
ヾ(๑╹◡╹)ﾉ” 使用less实现京东头部

带同学们熟悉less写项目的操作

  • 视口：

    1
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  • 全局容器

————————

rem布局

em和rem的认识

在布局中，除了px之外，还有两个常见的单位，em和rem

em： 相对于当前元素的字体大小→ 1em = 当前标签的font-size

rem： 相对于根元素（html）的字体大小→ 1rem = html标签的font-size

浏览器默认的font-size的大小为16px

之后会使用rem单位完成rem布局（等比例缩放）的效果

rem布局的效果：

  • 屏幕越大，标签就越大
  • 屏幕越小，标签就越小

rem布局的原理：

  • 当屏幕越大，让html标签的font-size变大即可
  • 当屏幕越小，让html标签的font-size变小即可

怎么检测屏幕大小变化呢？通过媒体查询的方式动态改变html标签的font-size的大小

为什么要用rem布局

之前的流式布局或者响应式布局并不能完美的显示设计图的效果，并不能解决所有屏幕适配的问题。而rem能做到：等比例的适配所有的屏幕。

现状：

由于市面上手机种类繁多，导致移动端的屏幕种类非常的混乱，比如有常见的320px 360px 375px 384px 480px 640px等。在开发中，UI一般只会提供 750px 或者是 640px 的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕。常见的方案有以下：

  • 流式布局：

    但是目前使用流式布局的网页还是较多的，比如 亚马逊

    • 优点：各种屏幕都适配，都能看
    • 缺点：只有当屏幕大小和设计图相同时才能完美还原设计图，其他屏幕下都会拉伸

  • 响应式布局：

    一般多用于简单的网页和从零开始的站点。

    • 优点：一套页面可以适配多个客户端。
    • 缺点：对于复杂的网页来说工作量太大，维护性太难。

  • rem布局：

    与less配合使用更加方便，目前使用rem布局的有：淘宝 、 苏宁

    • 优点：rem布局盒子适配所有的屏幕，并且可以在多个屏幕大小中完美还原设计图（等比例缩放）
————————

rem布局适配多个屏幕

rem布局适配的原理说白了，就是根据屏幕的大小，动态的改变html标签的font-size的大小，此时就可以配合媒体查询做到不同屏幕的适配

需求：

当320设计图中div的宽高为200*200，此时要求使用rem适配 375、 414、640 的屏幕

  1. 先把px的单位转换成rem单位——》需要除以html标签的font-size的大小

    针对于设计图的尺寸自定义一个好算的font-size的大小

  2. 配合媒体查询适配不同的屏幕——》需要根据比例等比例缩放

    每一个屏幕的宽度与font-size的比例是相等的！！！

    所以求出设计图尺寸的比例之后，之后的屏幕的font-size的值就是——》屏幕宽度/比例

注意点：

因为要求页面是等比例缩放的，所以：

屏幕1宽度/屏幕1html标签font-size = 屏幕2宽度/屏幕2html标签font-size

保证屏幕宽度与html标签font-size的比例相同，就可以轻松适配多个屏幕

rem适配比例关系

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
/* 
适配320屏幕
屏幕宽度>=320时生效
比例：3.2
*/
@media screen and (min-width:320px) {
    html {
        font-size: 100px;
    }
}

/* 
适配375屏幕
屏幕宽度>=375时生效
fons-size=375/3.2
*/
@media screen and (min-width:375px) {
    html {
        font-size: 117.1875px;
    }
}

/* 
适配400屏幕
屏幕宽度>=400时生效
font-size=400/3.2
*/
@media screen and (min-width:400px) {
    html {
        font-size: 125px;
    }
}

@media screen and (min-width:414px) {
    html {
        font-size: 129.375px;
    }
}

/* 把px单位换算成rem */
div {
    width: 2rem;
    height: 2rem;
    background-color: pink;
}

苏宁易购

苏宁

项目搭建

  • images文件夹

  • less文件夹（之后使用less写项目）

    • 有index.less
    • 有base.less

  • 新建html页面

    • 引入css文件

    • 移动端项目设置视口

      1
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • 设置全局容器

rem布局首先进行适配工作

适配的步骤：

  1. 先适配设计图的屏幕大小（比如：750px），并且根据设计图屏幕大小定义一个html标签的font-size的大小（比如：50px），此时屏幕大小与font-size的比例为15
  2. 因为是等比例缩放的，所以每一个适配的屏幕大小与font-size的比例都是相同的，所以各个屏幕大小除以比例就能得出font-size的大小
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
// 苏宁官网中适配了：750 720 540 480 424 414 400 384 375 360 320
.adapter(@width) {
  @media screen and (min-width:@width) {
    html {
      // round(数值)：让这个数值四舍五入
      // round(数值，保留几位小数)
      font-size: round(@width/15,2);
    }
  }
}

.adapter(320px);
.adapter(360px);
.adapter(375px);
.adapter(384px);
.adapter(400px);
.adapter(414px);
.adapter(424px);
.adapter(480px);
.adapter(540px);
.adapter(720px);
.adapter(750px);

// 适配750的屏幕
// 定义设计图屏幕大小html的font-size值为50px，
// 比例为15
// @media screen and (min-width:750px) {
//   html {
//     font-size: 50px;
//   }
// }
————————–

px2rem插件的使用

在写项目中，每一次都需要手动写式子把px转换成rem比较麻烦，此时可以使用vscode的插件，完成对应的效果

  1. 安装插件 px2rem

    px2rem的安装

  2. 每次写数字px之后，会有提示转换成rem，按下键回车即可

  3. 插件中默认html的font-size的大小为16px，所以默认是除以16的如果需要更改，需要进行配置（如：设计如是750，html标签的font-size的大小为50px，此时应该除以50）

    在设置中搜索px2rem，然后直接修改设置即可，注意设置完了之后需要重启才能生效！！

    px2rem的设置