uni-app: 尺寸单位、Flex布局与背景图片-CSDN博客

本文链接：https://blog.csdn.net/weixin_42554191/article/details/148816942

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

尺寸单位

uni-app 支持多种尺寸单位，以下是一些常用的：

px: 像素，固定尺寸。
rpx: 响应式像素，不同设备上会自动调整大小，以实现更好的适配效果。在 iPhone6 上，1rpx = 0.5px。
rem: 相对于根元素 <html> 的字体大小。需要在 pages.json 中配置 globalStyle 来设置根字体大小。
%: 百分比，相对于父元素的尺寸。

Flex布局

Flex布局（弹性盒子）是一种现代的布局方式，uni-app 完全支持 Flex 布局。以下是一些常用的 Flex 布局属性：

display: flex;: 设置元素为弹性盒子。
flex-direction: 设置主轴方向（row、row-reverse、column、column-reverse）。
justify-content: 设置主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）。
align-items: 设置交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）。
flex-wrap: 设置是否换行（nowrap、wrap、wrap-reverse）。

背景图片

在 uni-app 中设置背景图片，可以使用 background-image 属性，例如：

.view {
background-image: url('/static/images/background.png');
background-size: cover; /* 图片覆盖整个元素 */
background-repeat: no-repeat; /* 不重复 */
background-position: center; /* 图片居中 */
}

在 uni-app 中，静态资源通常放在 static 目录下，这样可以确保资源在编译时被正确处理。

示例代码

以下是一个结合了尺寸单位、Flex布局和背景图片的示例：

<template>
<view class="container">
<view class="box">内容区域</view>
</view>
</template>

<script>
export default {
// 组件逻辑
};
</script>

<style>
.container {
display: flex; /* 使用 Flex布局 */
justify-content: center; /* 主轴居中 */
align-items: center; /* 交叉轴居中 */
height: 100vh; /* 视口高度 */
background-image: url('/static/images/background.jpg'); /* 背景图片 */
background-size: cover; /* 图片覆盖整个容器 */
}

.box {
width: 80rpx; /* 使用 rpx 单位 */
height: 80rpx;
background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
text-align: center;
line-height: 80rpx; /* 垂直居中文本 */
}
</style>