## 重要說明 請刪除 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等。