官方文檔
https://uniapp.dcloud.io/frame?id=頁面樣式與布局
rpx單位
uni-app 支持的通用 css 單位包括 px、rpx
- px 即屏幕像素
- rpx 即響應式px，一種根據屏幕寬度自適應的動態單位。以750寬的屏幕為基准，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實際顯示效果會等比放大，但在 App 端和 H5 端屏幕寬度達到 960px 時，默認將按照 375px 的屏幕寬度進行計算，具體配置參考：rpx計算配置 。
例
<template>
<view>
<view>
樣式的學習
</view>
<view class="box1">
測試文字
<text>123</text>
</view>
<view class="iconfont icon-tupian"></view>
</view>
</template>
<script>
</script>
<style lang="scss">
.box1{
width: 375rpx;
height: 375rpx;
background: #0000FF;
font-size: 30rpx;
color: #fff;
}
</style>
自適應的效果
可以明顯的看到寬高自動變化
@import導入外聯樣式表
使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。
例：
創建一個a.css,內容如下
view{
color: green;
}
頁面中引入
@import url("./a.css");
選擇器
https://uniapp.dcloud.io/frame?id=選擇器
目前支持的選擇器有：
| 選擇器 | 樣例 | 樣例描述 |
|---|---|---|
| .class | .intro | 選擇所有擁有 class="intro" 的組件 |
| #id | #firstname | 選擇擁有 id="firstname" 的組件 |
| element | view | 選擇所有 view 組件 |
| element, element | view, checkbox | 選擇所有文檔的 view 組件和所有的 checkbox 組件 |
| ::after | view::after | 在 view 組件后邊插入內容，僅微信小程序和App生效 |
| ::before | view::before | 在 view 組件前邊插入內容，僅微信小程序和App生效 |
注意：
-
在
uni-app中不能使用*選擇器。 -
微信小程序自定義組件中僅支持 class 選擇器
-
page相當於body節點，例如：<!-- 設置頁面背景顏色，使用 scoped 會導致失效 --> page { background-color:#ccc; }
全局樣式與局部樣式
https://uniapp.dcloud.io/frame?id=全局樣式與局部樣式
定義在 App.vue 中的樣式為全局樣式，作用於每一個頁面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋 App.vue 中相同的選擇器。
注意：
- App.vue 中通過
@import語句可以導入外聯樣式，一樣作用於每一個頁面
例：
app.vue中寫入樣式
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每個頁面公共css */
.box1{
background-color: pink;
}
</style>
頁面局部樣式
<template>
<view>
<view>
樣式的學習
</view>
<view class="box1">
測試文字
<text>123</text>
</view>
<view class="iconfont icon-tupian"></view>
</view>
</template>
<script>
</script>
<style lang="scss">
@import url("./a.css");
/* .box1{
width: 375rpx;
height: 375rpx;
background: #0000FF;
font-size: 30rpx;
color: #fff;
} */
</style>
可以看到上面暫時把 box1的局部樣式注釋了，看看效果
將注釋打開
可以看到樣式被覆蓋了
字體圖標
https://uniapp.dcloud.io/frame?id=字體圖標
uni-app 支持使用字體圖標，使用方式與普通 web 項目相同，需要注意以下幾點：
-
支持 base64 格式字體圖標。
-
支持網絡路徑字體圖標。
-
小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3編譯模式起支持直接使用本地背景圖和字體。
-
網絡路徑必須加協議頭
https。 -
從 http://www.iconfont.cn 上拷貝的代碼，默認是沒加協議頭的。
-
從 http://www.iconfont.cn 上下載的字體文件，都是同名字體（字體名都叫iconfont，安裝字體文件時可以看到），在nvue內使用時需要注意，此字體名重復可能會顯示不正常，可以使用工具修改。
-
使用本地路徑圖標字體需注意：
-
為方便開發者，在字體文件小於 40kb 時，
uni-app會自動將其轉化為 base64 格式； -
字體文件大於等於 40kb，仍轉換為 base64 方式使用的話可能有性能問題，如開發者必須使用，則需自己將其轉換為 base64 格式使用，或將其挪到服務器上，從網絡地址引用；
-
字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑。
@font-face { font-family: test1-icon; src: url('~@/static/iconfont.ttf'); }
-
使用示例
將字體圖標復制到項目的static目錄中
在app.vue中引入，在這里引入相當於全局引入
@import url("./static/fonts/iconfont.css");
修改字體的引入路徑，要符合這個
字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑。
如
在頁面中使用
例：
<view class="iconfont icon-tupian"></view>
完整頁面
<template>
<view>
<view class="iconfont icon-tupian"></view>
</view>
</template>
<script>
</script>
<style>
</style>
效果
如何使用scss或者less
scss使用文檔：https://www.sass.hk/docs/
HBuilderX的配置
首先要確保，你安裝了相關的編譯插件如scss插件
頁面使用
在vue文件下的style標簽添加lang="scss"屬性即可使用
例：使用uni.scss中的變量設置樣式
在uni.scss文件中加入變量
$global-color: red;
style標簽添加lang="scss"屬性
<style lang="scss">
頁面使用
background: $global-color;
完整的頁面
<template>
<view>
<view>
樣式的學習
</view>
<view class="box1">
測試文字
<text>123</text>
</view>
<view class="iconfont icon-tupian"></view>
</view>
</template>
<script>
</script>
<style lang="scss">
@import url("./a.css");
.box1{
width: 375rpx;
height: 375rpx;
background: $global-color;
font-size: 30rpx;
color: #fff;
text{
color: pink;
}
}
</style>
效果
