Vue 和 uniApp 中 CSS 样式差异

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

Vue 2 项目：

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

1. .container {
2.   width: 300px;
3.   height: 200px;
4. }

复制代码

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

1. @media (max-width: 768px) {
2. .container {
3.     width: 50%;
4.   }
5. }

复制代码

UniApp：

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

1. .container {
2.   width: 750rpx;
3.   height: 100rpx;
4. }

复制代码

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

二、样式隔离

Vue 2 项目：

• 一样寻常情况下，全局样式会影响整个应用，除非使用了 CSS 模块化或 Scoped CSS 来限定样式的作用范围。
  
• 使用 <style scoped> 可以将样式限定在当前组件内，但子组件的根元素仍然会受到父组件样式的影响。比方：
  

1. <template>
2.   <div class="parent">
3.     <child-component></child-component>
4.   </div>
5. </template>
7. <style scoped>
8. .parent {
9.   background-color: red;
10. }
11. </style>

复制代码

• 在上述例子中，.parent 类的样式仅作用于父组件，但 child-component 的根元素可能会继续 parent 的部分样式，如字体、颜色等。
  

UniApp：

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

1. <template>
2.   <view class="page-container">
3.     <custom-component></custom-component>
4.   </view>
5. </template>
7. <style>
8. .page-container {
9.   background-color: red;
10. }
11. /* 穿透样式隔离，影响子组件 */
12. /deep/.child-element {
13.   color: blue;
14. }
15. </style>

复制代码

三、平台相关的条件编译

UniApp：

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

1. /* #ifdef H5 */
2. h1 {
3.   color: red;
4. }
5. /* #endif */
6. /* #ifdef MP-WEIXIN */
7. h1 {
8.   color: blue;
9. }
10. /* #endif */

复制代码

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

Vue 2 项目：

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

四、全局样式处理

Vue 2 项目：

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

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

复制代码

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

1. <template>
2.   <div id="app">
3.     <router-view></router-view>
4.   </div>
5. </template>
7. <style>
8. @import './assets/css/global.css';
9. </style>

复制代码

UniApp：

• 可以在 App.vue 的 <style> 中定义全局样式，比方：
  

1. <template>
2.   <view>
3.     <router-view></router-view>
4.   </view>
5. </template>
7. <style>
8. body {
9.   background-color: #f0f0f0;
10. }
11. </style>

复制代码

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

五、CSS 预处理器支持

Vue 2 项目：

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

1. <template>
2.   <div class="box">
3.     Hello, Vue 2
4.   </div>
5. </template>
7. <style lang="scss">
8. $primary-color: #333;
9. .box {
10.   background-color: $primary-color;
11.   border: 1px solid $primary-color;
12.   &:hover {
13.     background-color: #666;
14.   }
15. }
16. </style>

复制代码

UniApp：

• 同样支持 CSS 预处理器，在 <style> 标签中使用 lang 属性指定，如 lang="scss"、lang="less" 或 lang="stylus"。比方：
  

1. <template>
2.   <view class="box">
3.     Hello, UniApp
4.   </view>
5. </template>
7. <style lang="scss">
8. $primary-color: #333;
9. .box {
10.   background-color: $primary-color;
11.   border: 1px solid $primary-color;
12.   &:hover {
13.     background-color: #666;
14.   }
15. }
16. </style>

复制代码

六、CSS 框架的使用

Vue 2 项目：

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

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

复制代码

UniApp：

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

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

复制代码

总结

        Vue 2 项目和 UniApp 在 CSS 基本语法和样式特性上有很多相似之处，都支持 CSS 预处理器、动态样式绑定等。
       但 UniApp 针对移动端开发，有独特的结构单位 rpx，更强的样式隔离机制，支持平台条件编译，更适合跨平台的移动应用开发。
       而 Vue 2 项目在开发 Web 应用时，更多使用 px 等传统单位，样式隔离相对较弱，更注重相应式结构和不同设备的适配，通常需要更多的自定义开发或使用 CSS 框架来实现跨设备的一致性。在实际开发中，根据项目范例和需求选择符合的开发框架和样式处理方式。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。