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 来限制样式的作用范围。
- 使用
<style scoped>可以将样式限制在当前组件内，但子组件的根元素仍然会受到父组件样式的影响。例如：
<template>
<div class="parent">
<child-component></child-component>
</div>
</template>
<style scoped>
.parent {
background-color: red;
}
</style>- 在上述例子中，
.parent类的样式仅作用于父组件，但child-component的根元素可能会继承parent的部分样式，如字体、颜色等。
UniApp：
- 具有更强的样式隔离机制，页面和组件的样式默认不会相互影响。
- 页面和组件有各自独立的样式范围，确保样式的独立性和组件的可复用性。例如，在一个页面中定义的样式不会意外地影响其他页面或组件，除非使用
/deep/或>>>选择器（在 Vue 3 中使用:deep()）来穿透样式隔离。例如：
<template>
<view class="page-container">
<custom-component></custom-component>
</view>
</template>
<style>
.page-container {
background-color: red;
}
/* 穿透样式隔离，影响子组件 */
/deep/.child-element {
color: blue;
}
</style>三、平台相关的条件编译
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中直接引入：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
@import './assets/css/global.css';
</style>UniApp：
- 可以在
App.vue的<style>中定义全局样式，例如：
<template>
<view>
<router-view></router-view>
</view>
</template>
<style>
body {
background-color: #f0f0f0;
}
</style>- 在
App.vue中定义的样式会影响整个应用程序，适用于设置全局的背景颜色、字体样式等。
五、CSS 预处理器支持
Vue 2 项目：
- 可以使用各种 CSS 预处理器，如 Sass、Less 和 Stylus，需要通过相应的 Webpack 或 Vue CLI 配置。例如使用 Sass：
<template>
<div class="box">
Hello, Vue 2
</div>
</template>
<style lang="scss">
$primary-color: #333;
.box {
background-color: $primary-color;
border: 1px solid $primary-color;
&:hover {
background-color: #666;
}
}
</style>UniApp：
- 同样支持 CSS 预处理器，在
<style>标签中使用lang属性指定，如lang="scss"、lang="less"或lang="stylus"。例如：
<template>
<view class="box">
Hello, UniApp
</view>
</template>
<style lang="scss">
$primary-color: #333;
.box {
background-color: $primary-color;
border: 1px solid $primary-color;
&:hover {
background-color: #666;
}
}
</style>六、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 框架来实现跨设备的一致性。在实际开发中，根据项目类型和需求选择合适的开发框架和样式处理方式。