## 重要说明 请删除 app.vue 中的全局样式： view{display:flex;} 在需要flex的时候使用flex即可。 ## 尺寸单位 uni-app框架目前仅支持长度单位 px 和 %。与传统 web 页面不同，px 是相对于基准宽度的单位，已经适配了移动端屏幕，其原理类似于 rem。 PS：uni-app 的基准宽度为 750px。 开发者只需按照设计稿确定框架样式中的 px 值即可。设计稿 1px 与框架样式 1px 转换公式如下： 设计稿 1px / 设计稿基准宽度 = 框架样式1px / 750px 换言之，页面元素宽度在uni-app中的宽度计算公式： 750px * 元素在设计稿中的宽度 / 设计稿基准宽度 **举例说明：** 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在uni-app里面的宽度应该设为：750 * 100 / 640，结果为：117px。 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在uni-app里面的宽度应该设为：750 * 200 / 375，结果为：400px。 ## 样式导入 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。 ## 示例代码： ``` <style> @import "../../common/uni.css"; .uni-card { box-shadow: none; } </style> ``` **内联样式** 框架组件上支持使用 style、class 属性来控制组件的样式。 style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 `<view style="color:{{color}};" />` class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。 `<view class="normal_view" />` **选择器** 目前支持的选择器有： **.class** .intro 选择所有拥有 class="intro" 的组件 **#id** #firstname 选择拥有 id="firstname" 的组件 **element** view 选择所有 view 组件 **element, element view**, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件 **::after** view::after 在 view 组件后边插入内容，仅微信小程序和5+App生效 **::before** view::before 在 view 组件前边插入内容，仅微信小程序和5+App生效 ## 全局样式与局部样式 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。 注意： App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。 ## Flex布局 为支持跨平台，框架建议使用Flex布局，关于Flex布局可以参考外部文档A Complete Guide to Flexbox等。