詳解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寬的屏幕為基準(zhǔn)，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實際顯示效果會等比放大。
- 使用
@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束 - 定義在 App.vue 中的樣式為全局樣式，作用于每一個頁面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對應(yīng)的頁面，并會覆蓋 App.vue 中相同的選擇器。
uni-app 支持使用字體圖標(biāo)，使用方式與普通 web 項目相同，需要注意以下幾點(diǎn)：
- 字體文件小于 40kb，uni-app 會自動將其轉(zhuǎn)化為 base64 格式；
- 字體文件大于等于 40kb， 需開發(fā)者自己轉(zhuǎn)換，否則使用將不生效；
- 字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑。
<template>
<view>
<view>
樣式學(xué)習(xí)
</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)文章
prettify是Google提供的一款源代碼語法高亮著色器，它提供一種簡單的形式來著色HTML頁面上的程序代碼，最值得亮點(diǎn)的地方是不需要指明代碼的語言類型，它會自動進(jìn)行判斷。2010-12-12
JavaScript設(shè)置獲取和設(shè)置屬性的方法
這篇文章主要介紹了JavaScript設(shè)置獲取和設(shè)置屬性的方法，學(xué)會使用getAttribute、setAttribute的用法,需要的朋友可以參考下2015-03-03
JavaScript實現(xiàn)鼠標(biāo)拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)鼠標(biāo)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript使用setTimeout實現(xiàn)延遲彈出警告框的方法
這篇文章主要介紹了JavaScript使用setTimeout實現(xiàn)延遲彈出警告框的方法,實例分析了javascript中setTimeout函數(shù)的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
JavaScript 產(chǎn)生不重復(fù)的隨機(jī)數(shù)三種實現(xiàn)思路
在 JavaScript 中，一般產(chǎn)生的隨機(jī)數(shù)會重復(fù)，但是有時我們需要不重復(fù)的隨機(jī)數(shù)，如何實現(xiàn)?本文給于解決方法，需要的朋友可以參考下2012-12-12
這篇文章主要介紹了js預(yù)加載圖片方法,實例匯總了javascript實現(xiàn)預(yù)加載圖片的常用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了詳解Webpack抽離第三方類庫以及common解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
DataJoin(數(shù)據(jù)連接)是D3中很重要的一個概念。D3是基于數(shù)據(jù)操作DOM的js庫，DataJoin使我們能夠根據(jù)現(xiàn)有?HTML?文檔中的數(shù)據(jù)集注入、修改和刪除元素。本文主要和大家詳細(xì)聊聊DataJoin的使用，感興趣的可以學(xué)習(xí)一下2022-11-11
JavaScript在IE和Firefox(火狐)的不兼容問題解決方法小結(jié)
今天測試代碼時，發(fā)現(xiàn)不少IE可以運(yùn)行的ajax，但在FF中報錯。IE和Firefox(火狐)在JavaScript方面的不兼容及統(tǒng)一方法總結(jié)如下，需要的朋友可以看下，對于以后的代碼書寫一定要考慮到多瀏覽器的兼容性。2010-04-04
這篇文章主要介紹了js get和post實現(xiàn)代碼解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02