## 重要說明
請刪除 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等。
- 第1講 : 創建項目、部署 VUE 、入口頁面布局
- 第2講,快速開始第一個項目
- 第3講 : uni-app 開發規范及目錄結構
- 第4講 : uni-app 頁面樣式與布局
- 第5講 : uni-app 配置文件 - pages.json
- 第6講 : 配置文件 - manifest.json
- 第7講 : uni-app 頁面生命周期
- 第8講 : uni-app 模板語法 - 數據綁定
- 第9講Class 與 Style 綁定 (動態菜單激活示例)
- 第10講 : uni-app 事件處理、事件綁定、事件傳參
- 第11講 : uni-app 組件 - 基礎組件
- 第12講 : uni-app 組件 - 表單組件
- 第13講 : uni-app 組件 - navigator(導航)及頁
- 第14講 : uni-app 組件 - 媒體組件
- 第15講 : uni-app 組件 - 地圖組件
- 第16講 : uni-app 接口 - 網絡請求
- 第17講 : uni-app 接口 - 從本地相冊選擇圖片或使
- 第18講 : uni-app 上傳(圖片上傳實戰)
- 第19講 : uni-app 接口 - 數據緩存
- 第20講 : uni-app 設備相關
- 第21講 : uni-app 交互反饋
- 第22講 : uni-app 設置導航條
- 第23講 : uni-app 導航(頁面流轉)
- 第24講 : uni-app 下拉刷新
- 第25講 : uni-app 上拉加載更多
- 第26講 : uni-app 第三方登錄(小程序篇)
- 第27講 : uni-app 登錄(h5+ app 篇)
- 第28講 : 自定義組件創建及使用