Style Processing
In uni-app development, style processing is an important part of building user interfaces. This guide provides detailed information about style processing methods, cross-platform style adaptation, and common styling techniques in uni-app.
uni-app Style Basics
Supported Style Languages
uni-app supports the following style languages:
- CSS: Standard Cascading Style Sheets
- SCSS/SASS: CSS preprocessor, requires installing corresponding dependencies
- Less: Another CSS preprocessor, also requires installing corresponding dependencies
- Stylus: Third CSS preprocessor, requires installing corresponding dependencies
Using Preprocessors
To use CSS preprocessors, first install the corresponding dependencies:
# Install SCSS/SASS
npm install sass sass-loader -D
# Install Less
npm install less less-loader -D
# Install Stylus
npm install stylus stylus-loader -D
Then specify the lang attribute in the <style>
tag:
<!-- Using SCSS -->
<style lang="scss">
$primary-color: #007AFF;
.btn {
background-color: $primary-color;
&:active {
opacity: 0.8;
}
}
</style>
<!-- Using Less -->
<style lang="less">
@primary-color: #007AFF;
.btn {
background-color: @primary-color;
&:active {
opacity: 0.8;
}
}
</style>
<!-- Using Stylus -->
<style lang="stylus">
primary-color = #007AFF
.btn
background-color primary-color
&:active
opacity 0.8
</style>
Style Imports
uni-app supports importing external style files through @import
:
/* Import common styles */
@import '@/common/styles/common.css';
@import '@/common/styles/variables.scss';
Tip
When using preprocessors, you can globally import variables and mixins to avoid repeated imports in each component.
uni-app Style Features
rpx Responsive Unit
uni-app provides rpx
(responsive pixel) as a responsive unit for adapting to different screen sizes. On different devices, rpx automatically scales proportionally.
- Screen width is defined as 750rpx (design draft based on 750px standard)
- Developers can write styles directly according to design draft dimensions without pixel conversion
.container {
width: 750rpx;
height: 100rpx;
padding: 20rpx;
font-size: 28rpx;
}
rpx to px conversion ratio:
Device | rpx to px Ratio |
---|---|
iPhone 5 | 1rpx = 0.42px |
iPhone 6/7/8 | 1rpx = 0.5px |
iPhone 6/7/8 Plus | 1rpx = 0.552px |
iPhone X/XS | 1rpx = 0.552px |
Note
On smaller screens, if the px value calculated from rpx is less than 1, it will be rounded, which may cause inaccuracy. For scenarios requiring precise control like borders, it's recommended to use px as the unit.
Style Scope
uni-app supports two style scopes:
- Global Styles: Styles defined in App.vue, apply to the entire application
- Local Styles: Styles defined in pages or components, only apply to current page or component
<!-- App.vue -->
<style>
/* Global styles */
.btn {
padding: 20rpx;
border-radius: 8rpx;
}
</style>
<!-- Page or component -->
<style>
/* Local styles */
.container {
padding: 30rpx;
}
</style>
To use scoped styles in components (only apply to current component), add the scoped
attribute:
<style scoped>
.title {
font-size: 32rpx;
color: #333;
}
</style>
Conditional Compilation Styles
uni-app supports writing platform-specific styles through conditional compilation:
/* Common styles for all platforms */
.btn {
padding: 20rpx;
}
/* #ifdef H5 */
/* H5 platform specific styles */
.btn {
cursor: pointer;
}
/* #endif */
/* #ifdef MP-WEIXIN */
/* WeChat Mini Program specific styles */
.btn {
line-height: 2;
}
/* #endif */
/* #ifdef APP-PLUS */
/* App platform specific styles */
.btn {
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
/* #endif */
Supported platforms for conditional compilation include:
- H5: H5 platform
- MP-WEIXIN: WeChat Mini Program
- MP-ALIPAY: Alipay Mini Program
- MP-BAIDU: Baidu Mini Program
- MP-TOUTIAO: Toutiao Mini Program
- MP-QQ: QQ Mini Program
- APP-PLUS: App platform
- APP-NVUE: nvue pages on App platform
Common Styling Techniques
Flexbox Layout
Flexbox layout is the most commonly used layout method in uni-app, suitable for various complex layout requirements:
/* Basic Flex container */
.container {
display: flex;
flex-direction: row; /* Horizontal arrangement, options: row, column */
justify-content: space-between; /* Main axis alignment */
align-items: center; /* Cross axis alignment */
flex-wrap: wrap; /* Whether to wrap */
}
/* Flex items */
.item {
flex: 1; /* Evenly distribute space */
}
.item-fixed {
flex: 0 0 200rpx; /* Fixed width */
}
Common Flexbox layout scenarios:
- Horizontal Center
.center-horizontal {
display: flex;
justify-content: center;
}
- Vertical Center
.center-vertical {
display: flex;
align-items: center;
}
- Horizontal and Vertical Center
.center {
display: flex;
justify-content: center;
align-items: center;
}
- Space Between
.space-between {
display: flex;
justify-content: space-between;
}
- Space Around
.space-around {
display: flex;
justify-content: space-around;
}
- Bottom Alignment
.align-bottom {
display: flex;
align-items: flex-end;
}
Grid Layout
For more complex two-dimensional layouts, you can use Grid layout:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
grid-gap: 20rpx; /* Gap */
}
.grid-item {
background-color: #f1f1f1;
padding: 20rpx;
}
/* Items spanning multiple columns or rows */
.grid-item-large {
grid-column: span 2; /* Span 2 columns */
grid-row: span 2; /* Span 2 rows */
}
Note
Grid layout may not be fully supported in some older versions of mini programs. Please confirm target platform compatibility before use.
Positioning
uni-app supports CSS positioning properties:
/* Relative positioning */
.relative {
position: relative;
top: 20rpx;
left: 30rpx;
}
/* Absolute positioning */
.absolute {
position: absolute;
top: 50rpx;
right: 50rpx;
}
/* Fixed positioning */
.fixed {
position: fixed;
bottom: 30rpx;
right: 30rpx;
}
Note
In mini programs, fixed
positioned elements are positioned relative to the page, not the viewport.
Text Styles
Common text style settings:
.text {
font-size: 28rpx;
color: #333;
line-height: 1.5;
text-align: center;
font-weight: bold;
text-decoration: underline;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Multi-line text overflow with ellipsis:
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* Number of lines to display */
overflow: hidden;
}
Shadow Effects
Adding shadow effects:
.card {
background-color: #fff;
border-radius: 8rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
/* Stronger shadow */
.card-raised {
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.15);
}
Gradient Backgrounds
Creating gradient backgrounds:
.gradient-bg {
background: linear-gradient(to right, #4facfe, #00f2fe);
}
/* Diagonal gradient */
.gradient-diagonal {
background: linear-gradient(135deg, #667eea, #764ba2);
}
/* Radial gradient */
.gradient-radial {
background: radial-gradient(circle, #667eea, #764ba2);
}
Animation Effects
Using CSS animations:
/* Define animation */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Apply animation */
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
/* Transition effects */
.btn {
background-color: #007AFF;
transition: all 0.3s ease;
}
.btn:active {
background-color: #0056b3;
transform: scale(0.98);
}
Style Organization and Management
Style Modularization
To better organize styles, you can split styles into multiple files by functionality:
styles/
├── variables.scss # Variable definitions
├── mixins.scss # Mixin definitions
├── reset.scss # Reset styles
├── typography.scss # Typography styles
├── buttons.scss # Button styles
├── forms.scss # Form styles
├── layout.scss # Layout styles
└── utilities.scss # Utility class styles
Import these styles in App.vue
:
<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';
@import '@/styles/reset.scss';
@import '@/styles/typography.scss';
@import '@/styles/buttons.scss';
@import '@/styles/forms.scss';
@import '@/styles/layout.scss';
@import '@/styles/utilities.scss';
</style>
Using SCSS Variables and Mixins
Define variables in variables.scss
:
// Colors
$primary-color: #007AFF;
$secondary-color: #6c757d;
$success-color: #28a745;
$danger-color: #dc3545;
$warning-color: #ffc107;
$info-color: #17a2b8;
$light-color: #f8f9fa;
$dark-color: #343a40;
// Fonts
$font-family-base: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
$font-size-base: 28rpx;
$font-size-large: 32rpx;
$font-size-small: 24rpx;
// Spacing
$spacing-base: 20rpx;
$spacing-large: 30rpx;
$spacing-small: 10rpx;
// Borders
$border-radius: 8rpx;
$border-color: #eee;
$border-width: 1rpx;
// Shadows
$box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
Define mixins in mixins.scss
:
// Clearfix
@mixin clearfix {
&::after {
content: '';
display: table;
clear: both;
}
}
// Text ellipsis
@mixin text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// Multi-line text ellipsis
@mixin multi-ellipsis($lines: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
overflow: hidden;
}
// Absolute center
@mixin absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// Responsive breakpoints
@mixin respond-to($breakpoint) {
@if $breakpoint == 'small' {
@media screen and (max-width: 375px) {
@content;
}
} @else if $breakpoint == 'medium' {
@media screen and (min-width: 376px) and (max-width: 768px) {
@content;
}
} @else if $breakpoint == 'large' {
@media screen and (min-width: 769px) {
@content;
}
}
}
Using variables and mixins in components:
<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';
.card {
background-color: #fff;
border-radius: $border-radius;
box-shadow: $box-shadow;
padding: $spacing-base;
margin-bottom: $spacing-base;
.title {
font-size: $font-size-large;
color: $dark-color;
@include text-ellipsis;
}
.content {
font-size: $font-size-base;
color: $secondary-color;
margin-top: $spacing-small;
@include multi-ellipsis(3);
}
.footer {
margin-top: $spacing-base;
@include clearfix;
.btn {
float: right;
background-color: $primary-color;
color: #fff;
padding: $spacing-small $spacing-base;
border-radius: $border-radius;
}
}
@include respond-to('small') {
padding: $spacing-small;
}
}
</style>
Utility Classes
Define common utility classes in utilities.scss
:
// Spacing
.m-0 { margin: 0; }
.m-1 { margin: $spacing-small; }
.m-2 { margin: $spacing-base; }
.m-3 { margin: $spacing-large; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: $spacing-small; }
.mt-2 { margin-top: $spacing-base; }
.mt-3 { margin-top: $spacing-large; }
// Similarly define other directions for margin and padding...
// Text alignment
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
// Text colors
.text-primary { color: $primary-color; }
.text-secondary { color: $secondary-color; }
.text-success { color: $success-color; }
.text-danger { color: $danger-color; }
.text-warning { color: $warning-color; }
.text-info { color: $info-color; }
.text-light { color: $light-color; }
.text-dark { color: $dark-color; }
// Background colors
.bg-primary { background-color: $primary-color; }
.bg-secondary { background-color: $secondary-color; }
.bg-success { background-color: $success-color; }
.bg-danger { background-color: $danger-color; }
.bg-warning { background-color: $warning-color; }
.bg-info { background-color: $info-color; }
.bg-light { background-color: $light-color; }
.bg-dark { background-color: $dark-color; }
// Display
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
// Flex utilities
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }
// Other utilities
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.rounded { border-radius: $border-radius; }
.border { border: $border-width solid $border-color; }
.shadow { box-shadow: $box-shadow; }
.overflow-hidden { overflow: hidden; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
Using utility classes in pages:
<template>
<view class="container">
<view class="card m-2 shadow">
<view class="d-flex justify-content-between align-items-center">
<text class="text-dark">Title</text>
<text class="text-secondary">Subtitle</text>
</view>
<view class="mt-2 text-primary">Content</view>
<view class="d-flex justify-content-end mt-2">
<button class="bg-primary text-light">Button</button>
</view>
</view>
</view>
</template>
Cross-Platform Style Adaptation
Style Compatibility Issues
Different platforms have varying levels of CSS support, which may cause styles to display inconsistently across platforms. Common compatibility issues include:
- Flexbox Layout: Some older versions of mini programs have incomplete support for Flexbox layout
- CSS Variables: Older platforms may not support CSS variables
- Animation Effects: Some complex animations may display inconsistently across platforms
- Fonts: Different platforms have different default fonts, which may cause text display differences
Platform-Specific Handling
Conditional Compilation
Use conditional compilation to provide platform-specific styles:
<style>
/* Common styles */
.btn {
padding: 20rpx;
}
/* #ifdef H5 */
/* H5 specific styles */
.btn {
cursor: pointer;
}
/* #endif */
/* #ifdef MP-WEIXIN */
/* WeChat Mini Program specific styles */
.btn {
line-height: 2;
}
/* #endif */
</style>
Platform-Specific Style Classes
Add specific class names for different platforms:
// Add platform identifier class in page or component onLoad
onLoad() {
// #ifdef H5
this.platformClass = 'platform-h5'
// #endif
// #ifdef MP-WEIXIN
this.platformClass = 'platform-mp-weixin'
// #endif
// #ifdef APP-PLUS
this.platformClass = 'platform-app'
// #endif
}
Use in template:
<template>
<view :class="['container', platformClass]">
<!-- Content -->
</view>
</template>
Write platform-specific styles in CSS:
/* Common styles */
.container {
padding: 20rpx;
}
/* H5 platform specific styles */
.platform-h5 .btn {
cursor: pointer;
}
/* WeChat Mini Program specific styles */
.platform-mp-weixin .btn {
line-height: 2;
}
/* App platform specific styles */
.platform-app .btn {
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
Responsive Layout
To adapt to different screen sizes, you can adopt the following strategies:
- Use rpx units: Automatically adapt to different screen sizes
- Use percentages: Automatically adjust based on parent container size
- Use Flexbox layout: Flexibly distribute space
- Media queries: Provide different styles for different screen sizes
.container {
padding: 20rpx;
@include respond-to('small') {
padding: 10rpx;
}
@include respond-to('large') {
padding: 30rpx;
max-width: 750rpx;
margin: 0 auto;
}
}
Common Style Examples
Card Component
<template>
<view class="card">
<view class="card-header">
<text class="card-title">Card Title</text>
<text class="card-subtitle">Subtitle</text>
</view>
<view class="card-body">
<text class="card-text">Card content area, can contain various content.</text>
</view>
<view class="card-footer">
<button class="btn btn-primary">Button</button>
</view>
</view>
</template>
<style lang="scss">
.card {
background-color: #fff;
border-radius: 12rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
margin-bottom: 20rpx;
overflow: hidden;
&-header {
padding: 20rpx;
border-bottom: 1rpx solid #eee;
}
&-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
display: block;
}
&-subtitle {
font-size: 24rpx;
color: #666;
margin-top: 6rpx;
display: block;
}
&-body {
padding: 20rpx;
}
&-text {
font-size: 28rpx;
color: #333;
line-height: 1.5;
}
&-footer {
padding: 20rpx;
border-top: 1rpx solid #eee;
display: flex;
justify-content: flex-end;
}
}
.btn {
padding: 15rpx 30rpx;
border-radius: 8rpx;
font-size: 28rpx;
&-primary {
background-color: #007AFF;
color: #fff;
}
}
</style>
Summary
In uni-app development, style processing is an important part of building user interfaces. By properly using uni-app's style features and cross-platform adaptation techniques, you can create beautiful, consistent, and efficient user interfaces.
This guide covers the fundamentals of uni-app styling, features, and common techniques, including:
- Style Language Support: CSS, SCSS/SASS, Less, Stylus
- uni-app Style Features: rpx responsive units, style scope, conditional compilation styles
- Common Styling Techniques: Flexbox layout, Grid layout, positioning, text styles, shadow effects, gradient backgrounds, animation effects
- Style Organization and Management: Style modularization, using variables and mixins, utility classes
- Cross-Platform Style Adaptation: Handling style compatibility issues, platform-specific handling, responsive layout
- Common Style Examples: Card components, list components, form styles, navigation components, tab components
By mastering these style processing methods and techniques, developers can more efficiently build user interfaces for uni-app applications and provide better user experiences.