溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下uni-app中樣式是怎么樣的，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
sass插件需要在官網下載，按提示操作即可
rpx 即響應式px，一種根據屏幕寬度自適應的動態單位。以750寬的屏幕為基準，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實際顯示效果會等比放大。
使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束
定義在 App.vue 中的樣式為全局樣式，作用于每一個頁面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 App.vue 中相同的選擇器。
uni-app 支持使用字體圖標，使用方式與普通 web 項目相同，需要注意以下幾點：
字體文件小于 40kb，uni-app 會自動將其轉化為 base64 格式；
字體文件大于等于 40kb， 需開發者自己轉換，否則使用將不生效；
字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑。
<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");//導入了外部的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>看完了這篇文章，相信你對“uni-app中樣式是怎么樣的”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
