CSS-13 媒体查询使用方式；CSS绝对单位|相对单位|像素|DPR和PPI；CSS预处理器LESS、Sass和Scss

1_媒体查询

1.1_使用

• 媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。

 可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改你的页面。

• 媒体查询的使用方式主要有三种：

 方式一：通过@media和@import使用不同的CSS规则（常用）；

  <style>
  	/*方式一：表示当界面宽度缩放小于等于800px的时候，会显现引用的css效果
  	@import url(./css/test.css) (max-width: 800px);
  	*/
	
	/*方式二：不引用css文件，直接写好*/
    @media (max-width: 800px) {
      body {
        background-color: orange;
      }
    }

  style>

  方式二：使用media属性为style, link, source和其他HTML元素指定特定的媒体类型；

<link rel="stylesheet" media="screen and (max-width: 800px)" href="./css/test.css">

  方式三：使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态；【跟JS有关】

1.2_ 媒体类型（Media types）

在使用媒体查询时，必须指定要使用的媒体类型。媒体类型是可选的，并且会（隐式地）应用 all 类型。

常见的媒体类型值如下：

• all：适用于所有设备。

• print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。

• screen（掌握）：主要用于屏幕。

• speech：主要用于语音合成器。

被废弃的媒体类型：

  CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, 以及 aural)；

  但是以上在Media Queries 4 中已经被废弃，并且不应该被使用；

  aural类型被替换为具有相似效果的speech

1.3_媒体特性（Media features）

媒体特性（Media features）描述了 浏览器、输出设备，或是预览环境的具体特征；

通常会将媒体特性描述为一个表达式；

每条媒体特性表达式都必须用括号括起来；

1.4_逻辑操作符（logical operators）

媒体查询的表达式最终会获得一个Boolean值，也就是真（true）或者假（false）。

• 如果结果为真（true），那么就会生效；

• 如果结果为假（false），那么就不会生效；

如果有多个条件，我们可以通过逻辑操作符联合复杂的媒体查询：

• and：用于将多个媒体查询规则组合成单条媒体查询

• not：用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。

• only：仅在整个查询匹配时才用于应用样式。

• , (逗号)：逗号用于将多个媒体查询合并为一个规则。

 <style>
	/*比如下面表示：屏幕宽度大于500，小于700的时候，body背景颜色为红色；*/
    @media (min-width: 500px) and (max-width: 800px) {
      body {
        background-color: orange;
      }
    }
    
  style> 

1.5_常见的移动端设备

  <style>
    /* 让分辨率处于下面的范围时，显现对应的css样式
      320~375之间 font-size: 15px;
      375~414之间 font-size: 18px;
      414~480之间 font-size: 21px;
      大于480px font-size: 24px
    */
    /* @media (min-width: 320px) and (max-width: 375px) {
      .box { font-size: 15px; }
    }
    @media (min-width: 375px) and (max-width: 414px) {
      .box { font-size: 18px; }
    }
    @media (min-width: 414px) and (max-width: 480px) {
      .box { font-size: 21px; }
    }
    @media (min-width: 480px) {
      .box { font-size: 24px; }
    } */

    /* CSS层叠性：效果与上面注释的一样 */
    @media (min-width: 320px) {
      .box { font-size: 15px; }
    }
    @media (min-width: 375px) {
      .box { font-size: 18px; }
    }
    @media (min-width: 414px) {
      .box { font-size: 21px; }
    }
    @media (min-width: 480px) {
      .box { font-size: 24px; }
    }

  style>

2_CSS的单位

经常会使用px来表示一个长度（大小），比如font-size设置为18px，width设置为100px。

px是一个长度（length）单位，事实上CSS中还有非常多的长度单位。

整体可以分成两类：

• 绝对长度单位（Absolute length units）；

• 相对长度单位（Relative length units）；
  
  

2.1_绝对单位（ Absolute length units ）

• 比如cm（厘米）、mm（毫米）、in(英寸)、pt（点）、px…
• 这些值中的大多数在用于打印，比用于屏幕输出时更有用
• 惟一个经常使用的值，就是px(像素)
  
  

2.2_相对单位（ Relative length units ）

• 相对长度单位相对于其他一些东西； 比如父元素的字体大小，或者视图端口的大小；

• 使用相对单位的好处是，经过一些仔细的规划，可以使文本或其他元素的大小与页面上的其他内容相对应；

  em、rem与字体大小fot-size有关，vw 用的多

2.3_像素是什么

• px是pixel单词的缩写，翻译为像素。
• 像素是影响显示的基本单位。（比如屏幕上看到的画面、一幅图片）；
• pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel；
• “像素”表示“画像元素”之意，有时亦被称为pel（picture element）；

2.4_像素的不同分类

设备像素（物理像素）:

• 设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了；
• 在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小；
• 比如iPhone X的分辨率 1125x2436，指的就是设备像素；

设备独立像素（逻辑像素）：

• 如果面向开发者使用设备像素显示一个100px的宽度，在不同屏幕上显示效果会是不同的；
• 开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发；
• 所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念；
• 比如购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论购买的是2k、4k的显示器，对于开发者来说，都是1920x1080的大小

CSS像素：

• CSS中经常使用的单位也是pixel，在默认情况下等同于设备独立像素（逻辑像素）
• 逻辑像素才是面向开发者的。
  
  

2.5_DPR、PPI

DPR：Device Pixel Ratio （设备像素比）

• 2010年，iPhone4问世，带来了移动互联网，还有Retina屏幕；
• Retina屏幕翻译为视网膜显示屏，可以为用户带来更好的显示；
• 在Retina屏幕中，一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比（device pixel ratio）；
• 我们可以通过window.devicePixelRatio获取到当前屏幕上的DPR值；

PPI（了解）：每英寸像素（英语：Pixels Per Inch，缩写：PPI）

• 通常用来表示一个打印图像或者显示器上像素的密度；
• 前面我们提过1英寸=2.54厘米，在工业领域被广泛应用；
  
  
  

3_CSS预处理器

3.1_CSS编写的痛点

前端项目越来越复杂, 需要几千行甚至上万行的CSS完成页面美化工作，随着代码量的增加, 造成很多的编写不便：

• 比如大量的重复代码, 虽然可以用类来勉强管理和抽取, 但是使用起来依然不方便；
• 比如无法定义变量（当然目前已经支持）, 如果一个值被修改, 需要修改大量代码, 可维护性很差; (比如主题颜色)
• 比如没有专门的作用域和嵌套, 需要定义大量的id/class来保证选择器的准确性, 避免样式混淆。
  
  

另一种CSS称呼是 面向命名编程；

社区为了解决问题, 出现了CSS预处理器(CSS_preprocessor)：

• 让你通过预处理器自己独有的语法来生成CSS的程序;
• 市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性;
• 代码最终会转化为CSS来运行, 因为对于浏览器来说只识别CSS;
  
  

3.2_常见的CSS预处理器

Sass/Scss：

• 2007年诞生，最早最成熟的CSS预处理器，拥有ruby社区的支持，是属于Haml（一种模板系统）的一部分;
• 目前受LESS影响，已经进化到了全面兼容CSS的Scss;

Less:

• 2009年出现，受Sass的影响较大，但又使用CSS的语法，让大部分开发者更容易上手;
• 比起SASS来，可编程功能不够，不过优点是使用方式简单、便捷，兼容CSS，并且已经足够使用；
• 另外反过来也影响了Sass演变到了Scss的时代；
• 著名的Twitter Bootstrap就是采用Less做底层语言的，也包括React的UI框架AntDesign。

Stylus:

• 2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持;
• 语法偏向于Python, 使用率相对于Sass/Less少很多
  
  
  

4_CSS预处理器 LESS

4.1_认识

官方的介绍: It’s CSS, with just a little more.

Less （Leaner Style Sheets的缩写） 是一门CSS扩展语言,且兼容CSS

• Less增加了很多相比于CSS更好用的特性;
• 比如定义变量、混入、嵌套、计算等等；
• Less最终需要被编译成CSS运行于浏览器中（包括部署到服务器中）；
  
  

4.2_编码+编译(举例)

html文件

<body>
  
  <div class="container">
    <div class="box">div>
  div>

body>

less文件内容（.box可嵌套）

.container {
  width: 200px;
  height: 200px;
  background-color: orange;

  .box {
    width: 100px;
    height: 100px;
    background-color: #f00;
  }
  
}

编译方式:

方式一：下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译；

  目前还没有学习到Node，更没学习过npm工具；

  所以现阶段不使用less本地工具来管理；

  后续学习了webpack可以自动完成这些操作的；

方法二：通过VSCode插件[Easy LESS]来编译成CSS ,到时在html文件link引入编译生成的css文件;

或者在线编译 https://lesscss.org/less-preview/ 【不推荐】

方式三：引入CDN的less编译代码，对less进行实时的处理；

<link rel="stylesheet/less" href="./less/test.less">
<script src="https://cdn.jsdelivr.net/npm/less@4" >script>

方式四 ：将less编译的js代码下载到本地，执行js代码对less进行编译；

 <link rel="stylesheet/less" href="./less/test.less">
 <script src="./js/lessc.js">script>

4.3_语法

Less兼容CSS

• 可以在Less文件中编写所有的CSS代码；
• 但把css的扩展名改成了less

变量（Variables）

(1) 在一个大型的网页项目中，CSS使用到的某几种属性值往往是特定的

比如主题颜色值，每次编写类似于#f3c258格式的语法，但记忆这种格式不太方便，需要重新编写或者拷贝样式；
如果主题颜色改变，需要修改大量的代码， 所以将常见的颜色或者字体等定义为变量来使用；

(2)在Less文件中使用如下的格式来定义变量：@变量名: 变量值 ;

/* 先定义变量*/
@mainColor: #a40011;
@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 18px;

/* 后使用变量*/
.box {
  color: @mainColor;
  font-size: @normalFontSize;
}

嵌套（Nesting）

（1）当我们需要找到一个内层的元素时，往往需要嵌套很多层的选择器

.box h1 .keyword .section .list .item a .desc {
  color: @mainColor;
  font-size: @bigFontSize;
 }

（2）Less提供了选择器的嵌套
（3）特殊符号：& 表示当前选择器

.box {
  .pel {
    color: @mainColor;
    font-size: @normalFontSize;
  }

  h1 {
    .keyword {
      color: @mainColor;
      font-size: @bigFontSize;
    }
  }

  p {
    a.link {
      color: @mainColor;
      font-size: @smallFontSize;

      background-color: #0f0;
      
      &:hover {   //选中的元素是 
        color: #00f;
      }
    }
  }
}

运算（Operations） （加减乘除）

• 算术运算符 +、-、 * 、/ 可以对任何数字、颜色或变量进行运算。
• 算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准；
• 如果单位换算无效或失去意义，则忽略单位；

.box {
   font-size: 20px;
   width:  50px + 10% ;/* 55px*/
   height: 100px;
   background-color: #ff0000 + #00ff00;
}

混合（Mixins）

• 在CSS编写过程中，多个选择器中可能会有大量相同的代码

  • 将这些代码进行抽取到一个独立的地方，任何选择器都可以进行复用；
  • 在less中提供了混入（Mixins）来帮助完成这样的操作；

• 混合（Mixin）是一种将一组属性从一个规则集（或混入）到另一个规则集的方法。

• 注意：混入在没有参数的情况下，小括号可以省略，但是不建议这样使用

/* 没有传参的混合 基本写法。先定义一组代码，后在其他地方调用*/
.nowrap_ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.box1 {
  width: 100px;
  background-color: #f00;
  .nowrap_ellipsis();/*调用另一组css样式*/
}

.box2 {
  width: 150px;
  background-color: #0f0;
  .nowrap_ellipsis();/*调用另一组css样式*/
}

// 传参的混合 写法。先定义一组代码，含有参数，后在其他地方调用，同时可以传参
.box_border(@borderWidth: 5px, @borderColor: purple) {
  border: @borderWidth solid @borderColor;
}

.box1 {
  width: 100px;
  background-color: #f00;
  .box_border();/*调用*/
}

.box2 {
  width: 150px;
  background-color: #0f0;
  .box_border(10px, orange);/*含参调用*/
}

映射（Maps）

//先定义一个函数
.box_size {
  width: 100px;
  height: 100px;
}

.box1 {
  width: .box_size()[width];//映射这个函数中的一个数据
  background-color: #f00;
}

extend继承

• 和mixins作用类似，用于复用代码；
• 和mixins相比，继承代码最终会转化成并集选择器，所有的样式都显现出来；
  
  

Less内置函数

• Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
• 内置函数手册：https://less.bootcss.com/functions/
  
  

作用域（Scope）

• 在查找一个变量时，首先在本地查找变量和混合（mixins）；
• 如果找不到，则从“父”级作用域继承；
  
  

注释（Comments）： 在Less中，块注释和行注释都可以使用；

导入（Importing）

• 导入的方式和CSS的用法是一致的；
• 导入一个 .less 文件，此文件中的所有变量就可以全部使用了；
• 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉；
  
  
  

5_简单认识Sass和Scss

• Sass的语法使用的是类似于Ruby的语法，没有花括号，没有分号，具有严格的缩进

• Sass的语法和CSS区别很大，后来官方推出了全新的语法Scss，意思是Sassy CSS，是完全兼容CSS的。

• 学习Scss：

  • Scss的语法也包括变量、嵌套、混入、函数、操作符、作用域等；

  • 通常也包括更为强大的控制语句、更灵活的函数、插值语法等；

  • 可以根据之前学习的less语法来学习一些SCS语法；

  • 学习网站 https://sass-lang.com/guide