uni-app-样式

误将油门当刹车踩 發表於 2020-8-26 14:23:00

官方文档
<ul>
<li>rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx为屏幕宽度，屏幕变宽，rpx实际显示效果会等比放大</li>
<li>使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用；表示语句结束</li>
<li>支持基本常用的选择器class、id、element等</li>
<li>在uniapp中不能使用*选择器</li>
<li>page相当于body节点</li>
<li>定义在app.vue中的样式为全局样式，作用于每一个页面。在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.vue中相同的选择器</li>
<li>uniapp支持使用字体图标，使用方式与普通web项目相同，注意
<ul>
<li>字体文件小于40kb，uniapp会自动将其转换为base64格式</li>
<li>字体文件大于等于40kb，需要开发者自己转换，否则使用不生效</li>
<li>字体文件的引用路径推荐使用以~@开头的绝对路径</li>
</ul>
</li>
</ul>
<h3 id="尺寸单位" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 1.5rem; color: rgba(44, 62, 80, 1); margin: -40px 0 0.6rem; padding-top: 60px; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">尺寸单位</h3>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif"><code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 支持的通用 css 单位包括 px、rpx
<ul style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">px 即屏幕像素</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。</li>
</ul>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">vue页面支持普通H5单位，但在nvue里不支持：
<ul style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">rem 默认根字体大小为屏幕宽度/20（微信小程序、字节跳动小程序、App、H5）</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">vh viewpoint height，视窗高度，1vh等于视窗高度的1%</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">vw viewpoint width，视窗宽度，1vw等于视窗宽度的1%</li>
</ul>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">nvue还不支持百分比单位。
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">nvue中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：
<ul style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">px:，以750宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 逻辑不一样。）</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">wx：与设备屏幕宽度无关的长度单位，与 vue 页面中的 px 理念相同</li>
</ul>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">下面对 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">rpx</code> 详细说明：
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">设计师在提供设计图时，一般只提供一个分辨率的图。
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形。
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">微信小程序设计了 rpx 解决这个问题，<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 在 App 端、H5 端都支持了 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">rpx</code>。
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 规定屏幕基准宽度 750rpx。
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif"><code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx</code>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">换言之，页面元素宽度在 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 中的宽度计算公式：
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif"><code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">750 * 元素在设计稿中的宽度 / 设计稿基准宽度</code>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">举例说明：
<ol style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 里面的宽度应该设为：<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">750 * 100 / 750</code>，结果为：100rpx。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 里面的宽度应该设为：<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">750 * 100 / 640</code>，结果为：117rpx。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 里面的宽度应该设为：<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">750 * 200 / 375</code>，结果为：400rpx。</li>
</ol>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">Tips
<ul style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">设计师可以用 iPhone6 作为视觉稿的标准。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">如果设计稿不是750px，HBuilderX提供了自动换算的工具，详见：https://ask.dcloud.net.cn/article/35445。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了，详见</li>
</ul>
<h3 id="样式导入" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 1.5rem; color: rgba(44, 62, 80, 1); margin: -40px 0 0.6rem; padding-top: 60px; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">样式导入</h3>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">使用<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">@import</code>语句可以导入外联样式表，<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">@import</code>后跟需要导入的外联样式表的相对路径，用<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">;</code>表示语句结束。
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">示例代码：
<pre data-lang=""><code class="lang-" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(82, 82, 82, 1); font-size: 0.8rem; margin: 0 2px; padding: 2.2em 5px; white-space: inherit; font-family: "Roboto Mono", Monaco, courier, monospace; display: block; line-height: inherit; max-width: inherit; overflow: inherit"><span class="token tag" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(41, 115, 183, 1)"><span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)"><style<span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">>
<span class="token atrule" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(34, 162, 201, 1)">@import "../../common/uni.css"<span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">;

<span class="token selector" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(102, 121, 204, 1)">.uni-card {
 <span class="token property" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(192, 139, 48, 1)">box-shadow: none;
}
<span class="token tag" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(41, 115, 183, 1)"><span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)"></style<span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">></code></pre>
<h3 id="内联样式" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 1.5rem; color: rgba(44, 62, 80, 1); margin: -40px 0 0.6rem; padding-top: 60px; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">内联样式</h3>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">框架组件上支持使用 style、class 属性来控制组件的样式。
<ul style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<pre data-lang=""><code class="lang-" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(82, 82, 82, 1); font-size: 0.8rem; margin: 0 2px; padding: 2.2em 5px; white-space: inherit; font-family: "Roboto Mono", Monaco, courier, monospace; display: block; line-height: inherit; max-width: inherit; overflow: inherit"><span class="token tag" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(41, 115, 183, 1)"><span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)"><view :style<span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">="<span class="token attr-value" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: var(--theme-color,#42b983)"><span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">{<span class="token property" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(192, 139, 48, 1)">color<span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">:color<span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">}<span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">" <span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">/></code></pre>
</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<pre data-lang=""><code class="lang-" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(82, 82, 82, 1); font-size: 0.8rem; margin: 0 2px; padding: 2.2em 5px; white-space: inherit; font-family: "Roboto Mono", Monaco, courier, monospace; display: block; line-height: inherit; max-width: inherit; overflow: inherit"><span class="token tag" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(41, 115, 183, 1)"><span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)"><view class<span class="token attr-value" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: var(--theme-color,#42b983)"><span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">=<span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">"normal_view<span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">" <span class="token punctuation" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(82, 82, 82, 1)">/></code></pre>
</li>
</ul>
<h3 id="选择器" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 1.5rem; color: rgba(44, 62, 80, 1); margin: -40px 0 0.6rem; padding-top: 60px; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">选择器</h3>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">目前支持的选择器有：
<table style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-size: 15px; border-spacing: 0; display: block; margin-bottom: 1rem; overflow: auto; width: 1170.02px; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<thead style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)"><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">选择器</th><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">样例</th><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">样例描述</th></tr>
</thead>
<tbody style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)">
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">.class</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">.intro</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">选择所有拥有 class="intro" 的组件</td>
</tr>
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)">
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">#id</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">#firstname</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">选择拥有 id="firstname" 的组件</td>
</tr>
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)">
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">element</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">view</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">选择所有 view 组件</td>
</tr>
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)">
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">element, element</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">view, checkbox</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">选择所有文档的 view 组件和所有的 checkbox 组件</td>
</tr>
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)">
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">::after</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">view::after</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">在 view 组件后边插入内容，仅微信小程序和App生效</td>
</tr>
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)">
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">::before</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">view::before</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">在 view 组件前边插入内容，仅微信小程序和App生效</td>
</tr>
</tbody>
</table>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">注意：
<ul style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">在 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 中不能使用 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">*</code> 选择器。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box"><code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">page</code> 相当于 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">body</code> 节点，例如：</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">微信小程序自定义组件中仅支持 class 选择器
<pre data-lang="css"><code class="lang-css" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(82, 82, 82, 1); font-size: 0.8rem; margin: 0 2px; padding: 2.2em 5px; white-space: inherit; font-family: "Roboto Mono", Monaco, courier, monospace; display: block; line-height: inherit; max-width: inherit; overflow: inherit"><span class="token selector" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(102, 121, 204, 1)">
page {
<span class="token property" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; min-height: 1.5rem; color: rgba(192, 139, 48, 1)">background-color:#ccc;
}</code></pre>
</li>
</ul>
<h3 id="全局样式与局部样式" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 1.5rem; color: rgba(44, 62, 80, 1); margin: -40px 0 0.6rem; padding-top: 60px; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">全局样式与局部样式</h3>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">注意：
<ul style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">App.vue 中通过 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">@import</code> 语句可以导入外联样式，一样作用于每一个页面。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">nvue页面暂不支持全局样式</li>
</ul>
<h3 id="css变量" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 1.5rem; color: rgba(44, 62, 80, 1); margin: -40px 0 0.6rem; padding-top: 60px; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">CSS变量</h3>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">uni-app 提供内置 CSS 变量
<table style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-size: 15px; border-spacing: 0; display: block; margin-bottom: 1rem; overflow: auto; width: 1170.02px; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<thead style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)"><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">CSS变量</th><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">描述</th><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">App</th><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">小程序</th><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">H5</th></tr>
</thead>
<tbody style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)">
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">--status-bar-height</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">系统状态栏高度</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">系统状态栏高度、nvue注意见下</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">25px</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">0</td>
</tr>
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)">
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">--window-top</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">内容区域距离顶部的距离</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">0</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">0</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">NavigationBar 的高度</td>
</tr>
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)">
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">--window-bottom</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">内容区域距离底部的距离</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">0</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">0</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">TabBar 的高度</td>
</tr>
</tbody>
</table>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">注意：
<ul style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box"><code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">var(--status-bar-height)</code> 此变量在微信小程序环境为固定 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">25px</code>，在 App 里为手机实际状态栏高度。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">当设置 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">"navigationStyle":"custom"</code> 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">var(--status-bar-height)</code> 的 view 放在页面顶部，避免页面内容出现在状态栏。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">由于在H5端，不存在原生导航栏和tabbar，也是前端div模拟。如果设置了一个固定位置的居底view，在小程序和App端是在tabbar上方，但在H5端会与tabbar重叠。此时可使用<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">--window-bottom</code>，不管在哪个端，都是固定在tabbar上方。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">目前 nvue 在App端，还不支持 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">--status-bar-height</code>变量，替代方案是在页面onLoad时通过uni.getSystemInfoSync().statusBarHeight获取状态栏高度，然后通过style绑定方式给占位view设定高度。下方提供了示例代码</li>
</ul>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">代码块
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">快速书写css变量的方法是：在css中敲hei，在候选助手中即可看到3个css变量。（HBuilderX 1.9.6以上支持）
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">示例1 - 普通页面使用css变量：
<div class="cnblogs_code">
<pre><template>

<page-meta>
 <navigation-bar />
</page-meta>
<view>
 <view class="status_bar">
 
 </view>
 <view> 状态栏下的文字 </view>
</view>
</template>
<style>
.status_bar {
 height: var(--status-bar-height);
 width: 100%;
}
</style>
<template>
<view>
 <view class="toTop">
 
 </view>
</view>
</template>
<style>
.toTop {
 bottom: calc(var(--window-bottom) + 10px)
}
</style></pre>
</div>
<pre data-lang="html"><code class="lang-html" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(82, 82, 82, 1); font-size: 0.8rem; margin: 0 2px; padding: 2.2em 5px; white-space: inherit; font-family: "Roboto Mono", Monaco, courier, monospace; display: block; line-height: inherit; max-width: inherit; overflow: inherit">示例2 - nvue页面获取状态栏高度</code></pre>
<div class="cnblogs_code">
<pre><template>
<view class="content">
 <view :style="{ height: iStatusBarHeight + 'px'}"></view>
</view>
</template>

<script>
export default {
 data() {
 return {
 iStatusBarHeight:0
 }
 },
 onLoad() {
 this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
 }
}
</script></pre>
</div>
<h3 id="固定值" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 1.5rem; color: rgba(44, 62, 80, 1); margin: -40px 0 0.6rem; padding-top: 60px; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">固定值</h3>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif"><code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 中以下组件的高度是固定的，不可修改：
<table style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; font-size: 15px; border-spacing: 0; display: block; margin-bottom: 1rem; overflow: auto; width: 1170.02px; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<thead style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)"><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">组件</th><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">描述</th><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">App</th><th style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 6px 20px; white-space: nowrap; text-align: left">H5</th></tr>
</thead>
<tbody style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)">
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">NavigationBar</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">导航栏</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">44px</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">44px</td>
</tr>
<tr style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-top: 1px solid rgba(204, 204, 204, 1)">
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">TabBar</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">底部选项卡</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">HBuilderX 2.3.4之前为56px，2.3.4起和H5调为一致，统一为 50px。但可以自主更改高度）</td>
<td style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-color: rgba(221, 221, 221, 1); padding: 12px 20px; height: 60px">50px</td>
</tr>
</tbody>
</table>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">各小程序平台，包括同小程序平台的iOS和Android的高度也不一样。
<h3 id="flex布局" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 1.5rem; color: rgba(44, 62, 80, 1); margin: -40px 0 0.6rem; padding-top: 60px; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">Flex布局</h3>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">为支持跨平台，框架建议使用Flex布局，关于Flex布局可以参考外部文档A Complete Guide to Flexbox、阮一峰的flex教程等。
<h3 id="背景图片" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 1.5rem; color: rgba(44, 62, 80, 1); margin: -40px 0 0.6rem; padding-top: 60px; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">背景图片</h3>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif"><code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 支持使用在 css 里设置背景图片，使用方式与普通 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">web</code> 项目大体相同，但需要注意以下几点：
<ul style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">支持 base64 格式图片。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">支持网络路径图片。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3编译模式起支持直接使用本地背景图和字体。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">使用本地路径背景图片需注意：<ol style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">为方便开发者，在背景图片小于 40kb 时，<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
<div class="cnblogs_code">
<pre>.test2 {
background-image: url('~@/static/logo.png');
}</pre>
</div>
</li>
</ol></li>
</ul>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">注意
<ul style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">微信小程序不支持相对路径（真机不支持，开发工具支持）</li>
</ul>
<h3 id="字体图标" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 1.5rem; color: rgba(44, 62, 80, 1); margin: -40px 0 0.6rem; padding-top: 60px; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">字体图标</h3>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif"><code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 支持使用字体图标，使用方式与普通 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">web</code> 项目相同，需要注意以下几点：
<ul style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">支持 base64 格式字体图标。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">支持网络路径字体图标。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3编译模式起支持直接使用本地背景图和字体。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">网络路径必须加协议头 <code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">https</code>。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫iconfont，安装字体文件时可以看到），在nvue内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">使用本地路径图标字体需注意：<ol style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; line-height: 1.6rem; word-spacing: 0.05rem; padding-left: 1.5rem">
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">为方便开发者，在字体文件小于 40kb 时，<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">uni-app</code> 会自动将其转化为 base64 格式；</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；</li>
<li style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box">字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
<div class="cnblogs_code">
<pre> @font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}</pre>
</div>
</li>
</ol></li>
</ul>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif"><code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">nvue</code>中不可直接使用css的方式引入字体文件，需要使用以下方式在js内引入。nvue内不支持本地路径引入字体，请使用网络链接或者<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">base64</code>形式。<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">src</code>字段的<code style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(233, 105, 0, 1); font-size: 0.8rem; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; font-family: "Roboto Mono", Monaco, courier, monospace">url</code>的括号内一定要使用单引号。
<div class="cnblogs_code">
<pre>var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "fontFamilyName",
'src': "url('https://...')"
})</pre>
</div>
<p style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; font-size: 15px; margin: 1.2em 0; line-height: 1.6rem; word-spacing: 0.05rem; color: rgba(52, 73, 94, 1); font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif">示例：
<div class="cnblogs_code">
<pre><template>
<view>
 <view>
 <text class="test">&#xe600;</text>
 <text class="test">&#xe687;</text>
 <text class="test">&#xe60b;</text>
 </view>
</view>
</template>
<style>
@font-face {
 font-family: 'iconfont';
 src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
}
.test {
 font-family: iconfont;
 margin-left: 20rpx;
}
</style></pre>
</div>
<pre data-lang="html"><code class="lang-html" style="-webkit-font-smoothing: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box; border-radius: 2px; color: rgba(82, 82, 82, 1); font-size: 0.8rem; margin: 0 2px; padding: 2.2em 5px; white-space: inherit; font-family: "Roboto Mono", Monaco, courier, monospace; display: block; line-height: inherit; max-width: inherit; overflow: inherit"> </code></pre> 
来源：https://www.cnblogs.com/fwjlucifinil/p/13560396.html

頁: [1]

琼殿技术论坛's Archiver

uni-app-样式