CSS 单位 预处理器 移动端适配方案

76433橘子
285 阅读10分钟

CSS 单位 预处理器 移动端适配方案

前端 CSS 学习目录导航

1. CSS 字体属性和文本属性

2. CSS 特性、盒子模型

3. CSS 背景设置、高级元素 form表单使用

4. CSS 结构伪类 以及 其他前端开发知识补充

5. CSS 定位流布局——position

6. CSS 浮动流布局——float

7. CSS 弹性盒布局——flex

8. CSS 形变和动画

9. CSS HTML5拓展 和 CSS函数使用

10. CSS BFC的理解

11. CSS 媒体查询

12. CSS 单位拓展、预处理器、移动端适配方案

CSS 常见单位

  • 前面我们实现使用的页面的长度的单位是我们的 px

  • 但是还具备很多的长度单位：

    • 绝对长度单位（absolute length units）
    • 相对长度单位（relative length units）

  • 绝对单位（absolute length units）

    • 绝对单位长度的话，和其他的任何的单位都是没有任何的联系的，在任何的设备上显示的大小都是一致的
    • 这些值的大多数在用于打印时候的实现屏幕输出
    • 这种绝对单位的话，常用的就只有一个px(像素)，用来实现的是我们的 pc 端的开发

  • 相对单位（relative length units）

    • 相对单位就是相对于一些东西而言的一些单位

    • 这个时候就可以实现我们的页面上面的大小实现相对于页面中其他东西实现我们的设置我们的盒子的大小

    • 就是因为具有这个属性，所以说，就可以用来实现一些基本的移动端适配

      • 原理就是： 我们实现设置一些固定的玩意实现决定一些页面中的其他的盒子的大小

    • em

      • 这个时候，我们页面中的元素盒子的大小就是相对于本身元素的: font-size 来实现的盒子大小的

        • 但是只不过我们的font-size 是具备继承性的，所以说有的时候，我们会相对于父元素的font-size
        • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      --my-font-size: 16px;
​
      body {
        padding: 0;
        margin: 0;
        font-size: var(--my-font-size);
​
        .box {
          /* 由于我们实现了继承，所以说最终的话，这个时候，盒子中的大小是: font-size: 16px */
          width: 10em; /* 160px,在浏览器中调试者工具中的 computed 中可以实现查看 */
          height: 100px;
          background-color: orange;
        }
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

    • rem

      • 这个单位的话，就是实现的是相对于我们的 根元素的 font-size

        • 根元素的书写方式：html{} 或者 :root{}
        • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      --root-font-size: 12px;
      
      font-size: var(--root-font-size);
​
      body {
        padding: 0;
        margin: 0;
​
        .box {
          width: 10rem;  /* 12px * 10 = 120px */
          height: 10rem;  /* 12px * 10 = 120px */
          background-color: skyblue;
        }
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

    • vw/vh

      • vw == viewport width / vh == viewport height
      • 这两个单位就是相对于我们的视口而言的，是视口宽度的 1%
      • 注意我们的 pc端 的布局视口和可视视口是相等的
      • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      --root-font-size: 12px;
      font-size: var(--root-font-size);
​
      body {
        padding: 0;
        margin: 0;
​
        .box {
          width: 10vw;
          height: 10vh;
          background-color: skyblue;
        }
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

CSS 预处理器

  • 为什么会出现 CSS 预处理器

    • 就是因为 使用原生的 CSS 来实现书写的时候，会出现一些痛点的

      • 书写的时候，我们时会出现很多的重复的代码的，这个时候，我们实现的时候进行书写的时候，我们是会进行抽离和管理的
      • 无法实现定义变量（但是现在是可以支持了的），但是最终的可维护性差
      • 没有专门的作用域和嵌套，定义大量的 id/class 才可以实现保证选择器的准确性（但是现在是可以了的）
      • 以前的 CSS 的 一种介绍就是我们的: 面向命名的编程

    • 为了解决的这样问题，所以说这个时候，就出现了我们的 CSS 预处理器 (CSS preprocessor)

      • CSS预处理器增加了一些 新的CSS特性规则，但是只不过
      • 我们的浏览器只可以识别 CSS ，所以说，通过CSS预处理器实现书写的代码，后面是会转化为CSS代码来实现运行的
      • 注意后面我们的学习到了typescript 的时候，也是因为浏览器只可以识别javascript，所以说也是需要进行转换的

    • 常见的 CSS 预处理器

      • Sass/Scss

        • 最早最成熟的CSS预处理器，拥有ruby 社区的支持，是属于Haml （一种模板系统）的一部分
        • 现在的 Scss 可以实现我们的全面兼容 CSS
        • 等待博主把ruby学了之后再来发这个部分的知识，呜呜呜！！！

      • less

        • 直接使用了我们的 CSS 语法，容易上手一些
        • 同时我们的组件库的话，bootstrop 和 antdesign 就是直接使用的我们的 less 来实现书写的

      • stylus

        • 来自于我们的 node.js 社区的，语法偏向于 python

Less 预处理器的使用

  • 使用less

    • less官网

    • linear style sheets

    • less 相对于我们的 CSS 具有更好的特性

    • 可以实现的是定义变量，混入，嵌套，计算等等

    • less 实现最终的运行的时候，是被编译为CSS代码实现的在浏览器进行运行

    • 实现编译 less 代码为 CSS

      • 方式一： 就是实现下载我们的node环境，然后通过npm下载less工具，实现使用less工具对代码进行编译

        • 但是放心，我们到了后面的话，是可以通过打包工具webpack或者vite来实现自动化的完成这一系列的操操作的
        • 下载 less 的工具后，直接实现使用: lessc less文件 需要转成的CSS文件

      • 方式二： 或者说直接实现使用我们的插件来实现自动的编译: easy less

      • 方式三： 直接实现CDN的less代码编译器将less代码自动的编译为CSS代码

      • .container {
  width: 100px;
  height: 100px;
  background-color: skyblue;
​
  .box {
    width: 50px;
    height: 50px;
    background-color: red;
  }
}
​
/* 这个就是我们的 less 代码部分 */

      • .container {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}
.container .box {
  width: 50px;
  height: 50px;
  background-color: red;
}
​
/* 通过 lessc less文件 或者 easy less 实现编译后的CSS代码 */

      • <link rel="stylesheet/less" href="../less/index.less">
<!-- 实现引入less的js编译器 -->
<script src="https://cdn.jsdelivr.net/npm/less"></script>

    • 定义变量（variables）[同时可以实现嵌套的写法（nesting{CSS现在也是支持的}）]

      • // 开始定义变量，就是为了我们的后面可能会发生变化或者说需要大量使用的，都是可以使用变量来实现抽取代码的
// 定义变量的形式: @变量名: 变量值;
@maintheme: black;
@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 16px;
​
// 和我们一起使用 CSS 书写的变量形式 -- 开头来实现定义白变量，但是那里需要使用 var() 函数来实现引用，但是这里，我们直接使用即可
​
:root {
  font-size: @normalFontSize;
​
  body {
    background-color: @maintheme;
  }
}

    • & 符号的使用

      • 当我们对一个元素实现使用我们的伪类的时候，就可以实现这个符号结合嵌套，实现找到本身的选择器
      •  a.link{
   color: red;
   text-decoration: none;
      
   // 使用 & 符号来实现表示我们的上一级 实现的就是找到自己本身的状态
   &:hover {
     color: skyblue;
   }
}

    • Less 中的运算（operations）

      • 可以实现使用我们的 + - * /
      • 以前我们使用的是calc()
      • 结合自己的代码风格自己书写自己喜欢的即可，反正博主个人不是很喜欢 Less 新出现的运算格式的

    • 混合（Mixins）

      • 就是在我们书写我们的 CSS 的时候可能会发现多个选择器会有很多的混合的代码，这个时候就可以实现混合来减省代码书写
      • 就是实现的是我们的将重复的代码实现抽离出来，然后实现使用就行了
      • 以前的写法是我们的添加一个新的选择器，然后进行添加这个选择器入元素中即可，但是现在我们是不用这样写了
      • // 开始实现使用我们的混合
​
// 开始抽离我们的相同的属性
.box_mixins_wh {
  width: 100px;
  height: 100px;
}
​
// 同时还是可以实现传入参数的
.box_mixins_border (@borderWidth: 5px, @borderColor: purple) {
  border: @borderWidth solid @borderColor;
  box-sizing: border-box
}
​
.box01 {
  // width: 100px;
  // height: 100px;
  .box_mixins_wh();
  .box_mixins_border();  // 不传入参数的时候直接使用默认的即可
  background-color: red;
}
​
.box02 {
  // width: 100px;
  // height: 100px;
  .box_mixins_wh();
  .box_mixins_border();  // 不传入参数的时候直接使用默认的即可
  background-color: skyblue;
}
​
​
.box03 {
  // 混合和映射的混合写法(看了后面的javascript后回来再看！！！)
  width: .box_mixins_wh()[width]
}

    • 继承（extend）

      • // 开始实现使用我们的混合
​
// 开始抽离我们的相同的属性
.box_mixins_wh {
  width: 100px;
  height: 100px;
}
​
.box_mixins_border {
  border: 5px solid saddlebrown;
  box-sizing: border-box;
}
​
// 实现使用我们的继承的写法来实现我们的使用一些重复代码
.box01 {
  .box_mixins_wh();
  background-color: skyblue;
  // 开始使用我们的继承的写法
  &:extend(.box_mixins_border);
}
      • 可以看看我们的混入和继承编译后的CSS代码有什么不同的，可以康康

    • Less 内置函数

      • 官方文档
      • 用的不多，文档我推荐看看就行了！！！

    • 实现导入我们的外面的 less 文件的方式： @import "less文件"

移动端适配详细讲解

  • 移动端的开发：

    • 原生app的开发（ios | andriod | react native | uniapp | flutter），这个是属于移动端开发工程师的任务
    • 小程序开发（原生app开发 | uniapp | taro）
    • web网页开发（移动端页面的开发 | pc端页面的开发）

  • 进行移动端开发的时候需要了解的两个概念

    • 自适应： 根据不同的设备的我屏幕的大小自动的调整内部元素的尺寸或者大小
    • 响应式： 实现随着屏幕的实时变动来实现自动的调整，这个就是我们的响应式

  • 前端布局的时候使用的几种相对单位（relative units）：

    • em: 是相对于我们的自身元素的字体大小来实现的计算，如果父元素也含有字体大小，那么这个时候就是父元素的
    • rem 是相对于我们的:root | html 的字体大小实现的自动调整大小的
    • vw/wh 是实现的是我们的相对于屏幕的大小实现的适应，是屏幕大小的 1% | 0.01
    • 上面的几个单位就是可以实现的是我们的元素大小可以根据不同的设备的大小来实现元素大小的改变
    • 但是绝对单位px 就是实现的是我们设置为多大，那么在任何的屏幕上的显示的大小就是多大

  • 认识视口（viewport）

    • 在一个浏览器中，我们用户可以实现看到的区域就是视口（viewport）

    • 前面描述 固定定位的时候（position: fixed） 就是实现的是我们的相对于视口实现的布局

    • 在pc端的开发中，我们是不用对视口进行详细的区分，但是如果是进行移动端开发，那么这个时候就需要对视口有一个区分

      • 视口分为： 布局视口 或者 视觉视口

        • 在 pc端的开发中，这两个视口指的是同一个，也就是说明两个是视口是一致的，大小一样
        • 但是只不过对于前端开发者而言的话，我们需要了解的就是： 布局视口 >= 视觉视口

    • 移动端开发者需要了解的视口

      • 布局视口（layout viewport）
      • 视觉视口（visual viewport）
      • 理想视口（ideal viewport）

这个部分就是前端 html + CSS 学习的总的内容，后续就是带大家进入我们的 JavaScript 的学习了

avatar
文章
阅读
粉丝