CSS适配

目录

CSS中的单位

常见的CSS预处理器

less 

CSS中的单位

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

整体可以分成两类：

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

绝对单位：

• 它们与其他任何东西都没有关系，通常被认为总是相同的大小。
• 这些值中的大多数在用于打印时比用于屏幕输出时更有用，例如，我们通常不会在屏幕上使用cm。
• 惟一一个您经常使用的值，就是px(像素)。

 

相对长度单位

• 相对长度单位相对于其他一些东西；
• 比如父元素的字体大小，或者视图端口的大小；
• 使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应；
• em：
• rem：
• vw/wh：

 

设备像素，也叫物理像素。

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

设备独立像素，也叫逻辑像素。

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

CSS像素

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

 

常见的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少很多

 

less 

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

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

less代码的编译

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

方法二：通过VSCode插件来编译成CSS或者在线编译

https://lesscss.org/less-preview/

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

https://cdn.jsdelivr.net/npm/less@4

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

Less语法一：Less是兼容CSS的

• 所以我们可以在Less文件中编写所有的CSS代码；
• 只是将css的扩展名改成了.less结尾而已；

 

Less语法二 – 变量（Variables） 

 

 Less语法三 – 嵌套（Nesting）

 Less语法四 – 运算（Operations）

 在Less中，算术运算符 +、-、 * 、/ 可以对任何数字、颜色或变量进行运算。

• 算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准；
• 如果单位换算无效或失去意义，则忽略单位；

 

Less语法五 – 混合（Mixins） 

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

 

 

 

 Less语法六：映射（Maps）

 

 

 Less语法七：extend继承

• 和mixins作用类似，用于复用代码；
• 和mixins相比，继承代码最终会转化成并集选择器；

 

Less语法八：Less内置函数

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

 

 

Less语法九：作用域（Scope）

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

 

 

Less语法十：注释（ Comments ）

• 在Less中，块注释和行注释都可以使用；

 

Less 语法十一：导入（ Importing ）

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