Vue 和 uniApp 中 CSS 样式差别

        之前一直在做vue2的项目，最近开始uniapp的项目，发现两种项目之间css还是有亿点区别的。

一、布局单位

Vue 2 项目：

• 通常使用 px 作为主要的长度单位，这是一个绝对单位，在不同设备屏幕上显示的物理尺寸相同。例如：

.container {
  width: 300px;
  height: 200px;
}

• 在响应式设计中，可能会使用 % 或 vw、vh 等相对单位，以及媒体查询来适配不同的屏幕尺寸。例如：

@media (max-width: 768px) {
.container {
    width: 50%;
  }
}

UniApp：

• 推荐使用 rpx 作为长度单位，它是一个相对单位，会根据设备屏幕宽度自动调整元素大小，以实现跨设备的等比例缩放。例如：

.container {
  width: 750rpx;
  height: 100rpx;
}

• 对于不同设备，如 iPhone 6 屏幕宽度为 750px，使用 750rpx 会占满整个屏幕宽度，在其他设备上会根据设备宽度自动缩放，保证布局比例一致。

二、样式隔离

Vue 2 项目：

• 一般情况下，全局样式会影响整个应用，除非使用了 CSS 模块化或 Scoped CSS 来限制样式的作用范围。
• 使用 
  • 在上述例子中，.parent 类的样式仅作用于父组件，但 child-component 的根元素可能会继承 parent 的部分样式，如字体、颜色等。

  UniApp：

  • 具有更强的样式隔离机制，页面和组件的样式默认不会相互影响。
  • 页面和组件有各自独立的样式范围，确保样式的独立性和组件的可复用性。例如，在一个页面中定义的样式不会意外地影响其他页面或组件，除非使用 /deep/ 或 >>> 选择器（在 Vue 3 中使用 :deep()）来穿透样式隔离。例如：

  三、平台相关的条件编译

  UniApp：

  • 支持条件编译，可以根据不同的平台应用不同的 CSS 样式。例如：

  /* #ifdef H5 */
  h1 {
    color: red;
  }
  /* #endif */
  /* #ifdef MP-WEIXIN */
  h1 {
    color: blue;
  }
  /* #endif */

  • 上述代码中，#ifdef H5 和 #endif 之间的样式仅在 H5 平台生效，#ifdef MP-WEIXIN 和 #endif 之间的样式仅在微信小程序平台生效，方便针对不同平台进行样式调整。

  Vue 2 项目：

  • 不支持类似 UniApp 的平台条件编译，需要通过 JavaScript 代码或其他方式（如 Vue 的动态绑定）来根据不同平台加载不同的样式。

  四、全局样式处理

  Vue 2 项目：

  • 通常在 src/assets/css 或类似目录下定义全局 CSS 文件，然后在 main.js 或 App.vue 中导入，例如：

  // main.js
  import './assets/css/global.css';

  • 或者在 App.vue 中直接引入：

  UniApp：

  • 可以在 App.vue 的 
    • 在 App.vue 中定义的样式会影响整个应用程序，适用于设置全局的背景颜色、字体样式等。

    五、CSS 预处理器支持

    Vue 2 项目：

    • 可以使用各种 CSS 预处理器，如 Sass、Less 和 Stylus，需要通过相应的 Webpack 或 Vue CLI 配置。例如使用 Sass：

    UniApp：

    • 同样支持 CSS 预处理器，在 

      六、CSS 框架的使用

      Vue 2 项目：

      • 可以使用 Bootstrap、Element UI、Vuetify 等 CSS 框架，通过 npm 安装和导入使用。例如使用 Element UI：

      import Vue from 'vue';
      import ElementUI from 'element-ui';
      import 'element-ui/lib/theme-chalk/index.css';
      
      Vue.use(ElementUI);

      UniApp：

      • 可以使用一些专门为移动端开发的 UI 框架，如 uView、uni-ui 等。这些框架会考虑到移动端的特点和 UniApp 的特性。例如使用 uni-ui：

      import Vue from 'vue';
      import uniUI from 'uni-ui';
      import 'uni-ui/lib/uni-ui.css';
      
      Vue.use(uniUI);

      总结

              Vue 2 项目和 UniApp 在 CSS 基本语法和样式特性上有很多相似之处，都支持 CSS 预处理器、动态样式绑定等。

             但 UniApp 针对移动端开发，有独特的布局单位 rpx，更强的样式隔离机制，支持平台条件编译，更适合跨平台的移动应用开发。

             而 Vue 2 项目在开发 Web 应用时，更多使用 px 等传统单位，样式隔离相对较弱，更注重响应式布局和不同设备的适配，通常需要更多的自定义开发或使用 CSS 框架来实现跨设备的一致性。在实际开发中，根据项目类型和需求选择合适的开发框架和样式处理方式。