#页面样式与布局
# 页面样式与布局 uni-app 有 vue 页面、nvue 页面、uvue页面。
vue 页面是 webview 渲染的 app-nvue 页面是原生渲染的，其样式比 web 会限制更多，另见nvue的css app-uvue 页面是原生渲染的，是 web 的css子集，另见uvue的css uni-app 的 css 与 web 的 css 基本一致。本文没有讲解 css 的用法。在你了解 web 的 css 的基础之上，本文讲述一些样式相关的注意事项。
本文重点介绍 vue 页面，也就是webview中的样式注意事项。
# css预处理器支持 uni-app 支持less、sass、scss、stylus等预处理器。
参考： css预处理器
vue2开发者sass预处理注意：
sass的预处理器，早年使用node-sass，也就是vue2最初默认的编译器。
sass官方推出了dart-sass来替代。node-sass已经停维很久了。
vue3默认使用的是dart-sass。
另外node-sass不支持arm cpu，也即Apple的M系列CPU，导致HBuilderX的arm版只能使用dart-sass。
node-sass有些淘汰的写法，在dart-sass里已不再支持。
所以开发者在从vue2升vue3时，使用HBuilderX arm版时，会发现老的vue2项目如果写了废弃scss语法，会编译报错。
这种分裂也导致插件生态混乱，导致多人协作时，比如一个项目有人用arm专版，有人使用intel版，造成协作障碍。
DCloud推荐开发者尽快升级到vue3，改用dart-sass。
从 HBuilderX 4.56+ ，vue2 项目也将默认使用 dart-sass 预编译器。
如果您希望继续使用node-sass，可以在manifest.json根节点配置: "sassImplementationName": "node-sass"; 可选值 "dart-sass" | "node-sass"。 sassImplementationName 配置仅限 uni-app（vue2）项目且非 HBuilderX Mac Arm 版本，HBuilder Mac Arm 版本以及uni-app vue3和uni-app x项目仅支持dart-sass。 node-sass升级dart-sass常见问题及改进方法：
SassError: expected selector. /deep/ 解决方案：/deep/ 替换成::v-deep
WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. 解决方案：使用 math.div() 替换除法运算符 详情，如果遇到@use 'sass:math';编译报错，可以在uni.scss中定义，详情
SassError: xxx and xxx are incompatible. 解决方案：calc 在特定情况需要带单位，比如：width: calc(100% - 215) 修改为：width: calc(100% - 215px)
# 尺寸单位 uni-app 支持的通用 css 单位包括 px、rpx
px 即屏幕像素 rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置 。 vue 页面支持下面这些普通 H5 单位，但在 nvue 里不支持：
rem 根字体大小可以通过 page-meta 配置抖音小程序和飞书小程序：屏幕宽度/20、百度小程序：16px、支付宝小程序：50px vh viewpoint height，视窗高度，1vh 等于视窗高度的 1% vw viewpoint width，视窗宽度，1vw 等于视窗宽度的 1% nvue 还不支持百分比单位。
App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx
nvue 中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中基本一致，另外启用 dynamicRpx 后可以适配屏幕大小动态变化。weex 模式目前遵循 weex 的单位，它的单位比较特殊：
px:，以 750 宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 逻辑不一样。） wx：与设备屏幕宽度无关的长度单位，与 vue 页面中的 px 理念相同 下面对 rpx 详细说明：
设计师在提供设计图时，一般只提供一个分辨率的图。
严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形。
而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。
微信小程序设计了 rpx 解决这个问题。uni-app 在 App 端、H5 端都支持了 rpx，并且可以配置不同屏幕宽度的计算方式，具体参考：rpx 计算配置。
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换言之，页面元素宽度在 uni-app 中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
举例说明：
若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为： 750 * 200 / 375，结果为：400rpx。 Tips
注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。 如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。 rpx 不支持动态横竖屏切换计算，使用 rpx 建议锁定屏幕方向 设计师可以用 iPhone6 作为视觉稿的标准。 如果设计稿不是 750px，HBuilderX 提供了自动换算的工具，详见：HBuilderX中自动转换px为upx。 App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。 早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了，详见 # 样式导入 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码：
# 内联样式 框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
# 选择器 目前支持的选择器有：
选择器 样例 样例描述 .class .intro 选择所有拥有 class="intro" 的组件 #id #firstname 选择拥有 id="firstname" 的组件 element view 选择所有 view 组件 element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件 ::after view::after 在 view 组件后边插入内容，仅 vue 页面生效 ::before view::before 在 view 组件前边插入内容，仅 vue 页面生效 注意：
在 uni-app 中不能使用 * 选择器。
微信小程序自定义组件中仅支持 class 选择器
page 相当于 body 节点，例如：
示例 2 - nvue 页面获取状态栏高度
# 固定值 uni-app 中以下组件的高度是固定的，不可修改：
组件 描述 App H5 NavigationBar 导航栏 44px 44px TabBar 底部选项卡 HBuilderX 2.3.4 之前为 56px，2.3.4 起和 H5 调为一致，统一为 50px。（但可以自主更改高度） 50px 各小程序平台，包括同小程序平台的 iOS 和 Android 的高度也不一样。
# Flex 布局 为支持跨平台，框架建议使用 Flex 布局，关于 Flex 布局可以参考外部文档A Complete Guide to Flexbox、阮一峰的 flex 教程等。
# 背景图片 uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目大体相同，但需要注意以下几点：
支持 base64 格式图片。 支持网络路径图片。 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。 使用本地路径背景图片需注意：
为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式； 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。 .test2 {
background-image: url('~@/static/logo.png');
}
注意
微信小程序不支持相对路径（真机不支持，开发工具支持） # 字体图标 uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
支持 base64 格式字体图标。 支持网络路径字体图标。 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。 网络路径必须加协议头 https。 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。 从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫 iconfont，安装字体文件时可以看到），在 nvue 内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。 使用本地路径图标字体需注意：
为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式； 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用； 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。 @font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}
nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。
var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
fontFamily: 'fontFamilyName',
src: "url('https://...')",
});
示例：