詳解uni-app中的樣式
更新時間：2021年11月17日 10:08:27 作者：printf（"小白"）；
這篇文章主要為大家介紹了uni-app中的樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
uni-app中的樣式
- sass插件需要在官網(wǎng)下載，按提示操作即可
- rpx 即響應(yīng)式px，一種根據(jù)屏幕寬度自適應(yīng)的動態(tài)單位。以750寬的屏幕為基準，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實際顯示效果會等比放大。
- 使用
@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束 - 定義在 App.vue 中的樣式為全局樣式，作用于每一個頁面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對應(yīng)的頁面，并會覆蓋 App.vue 中相同的選擇器。
uni-app 支持使用字體圖標，使用方式與普通 web 項目相同，需要注意以下幾點：
- 字體文件小于 40kb，uni-app 會自動將其轉(zhuǎn)化為 base64 格式；
- 字體文件大于等于 40kb， 需開發(fā)者自己轉(zhuǎn)換，否則使用將不生效；
- 字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑。
<template>
<view>
<view>
樣式學習
</view>
<view class="box1">
測試文字
<text>123</text>
</view>
<view class="iconfont icon-shipin">
</view>
</view>
</template>
<script>
</script>
<style lang="scss">
@import url("./a.css");//導(dǎo)入了外部的css文件
.box1{
width: 350rpx; //rpx不僅可以給盒子使用還可以給文字使用
height: 350rpx;
background: red;
font-size: 50rpx;
color: #FFFFFF;
text{
color: pink;
}
}
</style>
在App.vue里面定義公共的全局樣式
<style>
/*每個頁面公共css */
//全局樣式,會被局部樣式覆蓋掉
@import url("./static/fonts/iconfont.css");
.box1{
background: pink;
}
</style>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了js正則表達式中exec用法,實例分析了javascript中使用exec執(zhí)行正則表達式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
基于BootStrap的Metronic框架實現(xiàn)頁面鏈接收藏夾功能按鈕移動收藏記錄(使用Sortable進行拖動排序)
這篇文章主要介紹了基于BootStrap的Metronic框架實現(xiàn)頁面鏈接收藏夾功能按鈕移動收藏記錄(使用Sortable進行拖動排序)的相關(guān)資料,非常不錯，需要的朋友可以參考下2016-08-08
Weex開發(fā)之WEEX-EROS開發(fā)踩坑(小結(jié))
這篇文章主要介紹了Weex開發(fā)之WEEX-EROS開發(fā)踩坑(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
webpack的tree shaking的實現(xiàn)方法
這篇文章主要介紹了webpack的tree shaking的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了Paypal支付不完全指北，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
利用微信強大的社交能力通過小程序達到裂變的目的，拉取新用戶。下面小編給大家?guī)砹宋⑿判〕绦蛏珊蠓窒砼笥讶Φ膶崿F(xiàn)方法，感興趣的朋友跟隨小編一起看看吧2019-05-05
js 將圖片連接轉(zhuǎn)換成base64格式的簡單實例
下面小編就為大家?guī)硪黄猨s 將圖片連接轉(zhuǎn)換成base64格式的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
下面小編就為大家?guī)硪黄獪\談原型對象的常用開發(fā)模式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了用javascript實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
頁面中實現(xiàn)setInterval和setTimeout效果示例詳解
這篇文章主要為大家介紹了不使用setTimeout和setInterval在頁面中實現(xiàn)setInterval和setTimeout效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09