【Day47】移动端

媒体查询（Media Queries）是 CSS3 中引入的一种技术，用于针对不同设备或视口大小应用不同的样式或布局。媒体查询可以根据设备的宽度、高度、宽高比、屏幕方向、分辨率、显示模式等特征类型来判断媒体是否匹配，并选择性地加载应用样式。

以下是媒体查询中常用的描述值和特征类型：

1. 描述值：

a. max-width 和 min-width：用于定义设备的最大宽度和最小宽度，通常用于响应式设计中。

b. max-height 和 min-height：用于定义设备的最大高度和最小高度。

c. max-device-width 和 min-device-width：用于定义设备屏幕的最大宽度和最小宽度。

d. max-device-height 和 min-device-height：用于定义设备屏幕的最大高度和最小高度。

e. orientation：用于定义设备的屏幕方向，包括横向和纵向。

f. resolution：用于定义设备的屏幕分辨率，以像素（dpi）为单位。

1. 特征类型：

a. width：设备的屏幕宽度，以像素为单位。

b. height：设备的屏幕高度，以像素为单位。

c. aspect-ratio：设备的屏幕宽高比。

d. device-width：设备屏幕的宽度，以像素为单位。

e. device-height：设备屏幕的高度，以像素为单位。

f. device-aspect-ratio：设备屏幕的宽高比。

g. orientation：设备屏幕的方向（横向或纵向）。

h. resolution：设备屏幕的分辨率。

i. color：设备支持的颜色位数。

j. screen：设备的显示模式，如屏幕、打印等。

媒体查询的描述值和特征类型提供了多种灵活的匹配规则，使开发人员能够根据具体的场景为不同设备设置不同的样式或布局，以提高网站的可访问性和用户体验。

CSS 预编译器（CSS preprocessor）是一种将类似于编程语言的高级语法转换为标准 CSS 的工具。预编译器可以使 CSS 的编写变得更加高效、灵活和易于维护。目前比较流行的 CSS 预处理器有 Sass、Less、Stylus 等。

下面是关于 CSS 预处理器的一些常见问题：

1. CSS 预处理器的优点是什么？

使用 CSS 预处理器可以提高 CSS 开发效率，减少代码冗余、避免编写样板代码，同时增加更多的表达性和多样性，也可以更好地组织样式表结构，提高代码可读性和可维护性。

1. CSS 预处理器与原生 CSS 有什么不同？

CSS 预处理器具有更加丰富和灵活的语法，支持变量、嵌套、Mixin、函数、循环和逻辑控制等高级语法，将这些功能的实现和样式的管理都变得更加娴熟。与此相比，原生 CSS 通常需要编写更多的样板代码，或者需要在 CSS 和 HTML 之间进行更多的交互，因此 CSS 预处理器更加简洁和易于维护。

1. Sass、Less、Stylus 之间有什么区别？

Sass、Less 和 Stylus 在基本语法、语法习惯、函数使用、混合方式等方面都有所区别。Sass 主要是通过语法的嵌套和 Mixin 来简化 CSS 的编写，并支持变量和复杂的逻辑控制；Less 语法类似于 CSS，并且支持 Mixin、变量、嵌套规则和导入；而 Stylus 采用的则是更加简洁的语法和特有的轻量级 Mixin。

总之，无论是哪种 CSS 预处理器，都可以在工作中提高开发效率、提升代码质量，并使样式表结构更加健壮。选择合适的预处理器取决于个人喜好、具体项目需求、团队开发习惯等因素。

后编译器（postprocessor）是 CSS 预处理器输出的 CSS 代码的最后一道处理程序，可用于进一步加工处理 CSS 代码，以实现更高级别的功能。一些后编译器用于自动添加 CSS 前缀、压缩样式表、替换字体名称等操作。

下面是一些常见的后编译器及其功能：

1. Autoprefixer：用于自动添加 CSS 前缀，以满足不同浏览器的兼容性要求。

2. cssnano：用于深度压缩 CSS 代码，以减小文件大小。

3. PostCSS：是一个强大的 CSS 后编译器，并且它本身也是可插拨型的，可以使用各种插件来处理不同的需求，比如支持 CSS 前缀、函数、嵌套规则、变量等。

4. CSS Modules：用于在 CSS 的类、ID 和选择器名之间创建局部作用域，以便于编写可复用样式。

5. PurgeCSS：用于分析项目中的 HTML、JavaScript 和 CSS，删除未使用的 CSS，从而减少文件大小。

后编译器可以帮助开发人员在 CSS 预处理器输出的代码上进行进一步的处理和优化，从而实现更好的性能、更高质量的代码和更好的开发效率。

相关依赖的安装

在安装Vue项目所需的软件包时，需要根据软件包的用途来决定安装方式和安装位置。包管理工具npm的两个常用指令为 -D 和 -S，分别代表安装在开发环境和生产环境下。下面是针对less、postcss、less-loader、postcss-loader、postcss-px-to-viewport这些软件包安装的建议。

• less是一种CSS预处理器，使用 -S 方式安装，因为它在生产环境中也会被使用。

npm install -S less

• postcss是一个用于处理CSS的工具，使用 -D 安装，因为它仅用于开发环境。

npm install -D postcss

• less-loader用于将 less 文件转换成 CSS 文件，需要安装到 devDependencies。

npm install -D less-loader

• postcss-loader用于将 CSS 文件通过 PostCSS 进行处理，需要安装到 devDependencies。

npm install -D postcss-loader

• postcss-px-to-viewport是一个将像素转换为视口单位的PostCSS插件，因此也应该安装到 devDependencies。

npm install -D postcss-px-to-viewport

在安装过程中，建议按照上述步骤执行，以确保软件包被正确安装并在开发和生产环境中发挥作用。