第4讲 : uni-app 页面样式与布局
最后更新于：2022-04-02 07:27:52
## 重要说明
请删除 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、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
`
';