最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

頁(yè)面樣式與布局

尺寸單位

uni-app 支持的通用 css 單位包括 px、rpx

成都創(chuàng)新互聯(lián)公司-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比北侖網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式北侖網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋北侖地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴(lài)。

• px 即屏幕像素
• rpx 即響應(yīng)式px，一種根據(jù)屏幕寬度自適應(yīng)的動(dòng)態(tài)單位。以750寬的屏幕為基準(zhǔn)，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實(shí)際顯示效果會(huì)等比放大。

vue頁(yè)面支持普通H5單位，但在nvue里不支持：

• rem 默認(rèn)根字體大小為 屏幕寬度/20（微信小程序、字節(jié)跳動(dòng)小程序、App、H5）
• vh viewpoint height，視窗高度，1vh等于視窗高度的1%
• vw viewpoint width，視窗寬度，1vw等于視窗寬度的1%

nvue還不支持百分比單位。

App端，在 pages.json 里的 titleNView 或頁(yè)面里寫(xiě)的 plus api 中涉及的單位，只支持 px。注意此時(shí)不支持 rpx

nvue中，uni-app 模式（nvue 不同編譯模式介紹）可以使用 px 、rpx，表現(xiàn)與 vue 中一致。weex 模式目前遵循weex的單位，它的單位比較特殊：

• px:，以750寬的屏幕為基準(zhǔn)動(dòng)態(tài)計(jì)算的長(zhǎng)度單位，與 vue 頁(yè)面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 邏輯不一樣。）
• wx：與設(shè)備屏幕寬度無(wú)關(guān)的長(zhǎng)度單位，與 vue 頁(yè)面中的 px 理念相同

下面對(duì) rpx 詳細(xì)說(shuō)明：

設(shè)計(jì)師在提供設(shè)計(jì)圖時(shí)，一般只提供一個(gè)分辨率的圖。

嚴(yán)格按設(shè)計(jì)圖標(biāo)注的 px 做開(kāi)發(fā)，在不同寬度的手機(jī)上界面很容易變形。

而且主要是寬度變形。高度一般因?yàn)橛袧L動(dòng)條，不容易出問(wèn)題。由此，引發(fā)了較強(qiáng)的動(dòng)態(tài)寬度單位需求。

微信小程序設(shè)計(jì)了 rpx 解決這個(gè)問(wèn)題，uni-app 在 App 端、H5 端都支持了 rpx。

rpx 是相對(duì)于基準(zhǔn)寬度的單位，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。uni-app 規(guī)定屏幕基準(zhǔn)寬度 750rpx。

開(kāi)發(fā)者可以通過(guò)設(shè)計(jì)稿基準(zhǔn)寬度計(jì)算頁(yè)面元素 rpx 值，設(shè)計(jì)稿 1px 與框架樣式 1rpx 轉(zhuǎn)換公式如下：

設(shè)計(jì)稿 1px / 設(shè)計(jì)稿基準(zhǔn)寬度 = 框架樣式 1rpx / 750rpx

換言之，頁(yè)面元素寬度在 uni-app 中的寬度計(jì)算公式：

750 * 元素在設(shè)計(jì)稿中的寬度 / 設(shè)計(jì)稿基準(zhǔn)寬度

舉例說(shuō)明：

1. 若設(shè)計(jì)稿寬度為 750px，元素 A 在設(shè)計(jì)稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 750，結(jié)果為：100rpx。
2. 若設(shè)計(jì)稿寬度為 640px，元素 A 在設(shè)計(jì)稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 640，結(jié)果為：117rpx。
3. 若設(shè)計(jì)稿寬度為 375px，元素 B 在設(shè)計(jì)稿上的寬度為 200px，那么元素 B 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 200 / 375，結(jié)果為：400rpx。

Tips

• 注意 rpx 是和寬度相關(guān)的單位，屏幕越寬，該值實(shí)際像素越大。如不想根據(jù)屏幕寬度縮放，則應(yīng)該使用 px 單位。
• 如果開(kāi)發(fā)者在字體或高度中也使用了 rpx ，那么需注意這樣的寫(xiě)法意味著隨著屏幕變寬，字體會(huì)變大、高度會(huì)變大。如果你需要固定高度，則應(yīng)該使用 px 。
• rpx不支持動(dòng)態(tài)橫豎屏切換計(jì)算，使用rpx建議鎖定屏幕方向
• 設(shè)計(jì)師可以用 iPhone6 作為視覺(jué)稿的標(biāo)準(zhǔn)。
• 如果設(shè)計(jì)稿不是750px，HBuilderX提供了自動(dòng)換算的工具，詳見(jiàn)：https://ask.dcloud.net.cn/article/35445。
• App端，在 pages.json 里的 titleNView 或頁(yè)面里寫(xiě)的 plus api 中涉及的單位，只支持 px，不支持 rpx。
• 早期 uni-app 提供了 upx ，目前已經(jīng)推薦統(tǒng)一改為 rpx 了，詳見(jiàn)

樣式導(dǎo)入

使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束。

示例代碼：

內(nèi)聯(lián)樣式

框架組件上支持使用 style、class 屬性來(lái)控制組件的樣式。

• style：靜態(tài)的樣式統(tǒng)一寫(xiě)到 class 中。style 接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡量避免將靜態(tài)的樣式寫(xiě)進(jìn) style 中，以免影響渲染速度。
• class：用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類(lèi)選擇器名(樣式類(lèi)名)的集合，樣式類(lèi)名不需要帶上.，樣式類(lèi)名之間用空格分隔。

選擇器

目前支持的選擇器有：

注意：

• 在 uni-app 中不能使用 * 選擇器。
• page 相當(dāng)于 body 節(jié)點(diǎn)，例如： page { background-color:#ccc; }

全局樣式與局部樣式

定義在 App.vue 中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋 App.vue 中相同的選擇器。

注意：

• App.vue 中通過(guò) @import 語(yǔ)句可以導(dǎo)入外聯(lián)樣式，一樣作用于每一個(gè)頁(yè)面。
• nvue頁(yè)面暫不支持全局樣式

CSS變量

uni-app 提供內(nèi)置 CSS 變量

注意：

• var(--status-bar-height) 此變量在微信小程序環(huán)境為固定 25px，在 App 里為手機(jī)實(shí)際狀態(tài)欄高度。
• 當(dāng)設(shè)置 "navigationStyle":"custom" 取消原生導(dǎo)航欄后，由于窗體為沉浸式，占據(jù)了狀態(tài)欄位置。此時(shí)可以使用一個(gè)高度為 var(--status-bar-height) 的 view 放在頁(yè)面頂部，避免頁(yè)面內(nèi)容出現(xiàn)在狀態(tài)欄。
• 由于在H5端，不存在原生導(dǎo)航欄和tabbar，也是前端div模擬。如果設(shè)置了一個(gè)固定位置的居底view，在小程序和App端是在tabbar上方，但在H5端會(huì)與tabbar重疊。此時(shí)可使用--window-bottom，不管在哪個(gè)端，都是固定在tabbar上方。
• 目前 nvue 在App端，還不支持 --status-bar-height變量，替代方案是在頁(yè)面onLoad時(shí)通過(guò)uni.getSystemInfoSync().statusBarHeight獲取狀態(tài)欄高度，然后通過(guò)style綁定方式給占位view設(shè)定高度。下方提供了示例代碼

代碼塊

快速書(shū)寫(xiě)css變量的方法是：在css中敲hei，在候選助手中即可看到3個(gè)css變量。（HBuilderX 1.9.6以上支持）

示例1 - 普通頁(yè)面使用css變量：

示例2 - nvue頁(yè)面獲取狀態(tài)欄高度

固定值

uni-app 中以下組件的高度是固定的，不可修改：

各小程序平臺(tái)，包括同小程序平臺(tái)的iOS和Android的高度也不一樣。

Flex布局

為支持跨平臺(tái)，框架建議使用Flex布局，關(guān)于Flex布局可以參考外部文檔A Complete Guide to Flexbox、阮一峰的flex教程等。

背景圖片

uni-app 支持使用在 css 里設(shè)置背景圖片，使用方式與普通 web 項(xiàng)目大體相同，但需要注意以下幾點(diǎn)：

• 支持 base64 格式圖片。
• 支持網(wǎng)絡(luò)路徑圖片。
• 小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3編譯模式起支持直接使用本地背景圖和字體。
• 使用本地路徑背景圖片需注意：為方便開(kāi)發(fā)者，在背景圖片小于 40kb 時(shí)，uni-app 編譯到不支持本地背景圖的平臺(tái)時(shí)，會(huì)自動(dòng)將其轉(zhuǎn)化為 base64 格式；圖片大于等于 40kb，會(huì)有性能問(wèn)題，不建議使用太大的背景圖，如開(kāi)發(fā)者必須使用，則需自己將其轉(zhuǎn)換為 base64 格式使用，或?qū)⑵渑驳椒?wù)器上，從網(wǎng)絡(luò)地址引用。本地背景圖片的引用路徑推薦使用以 ~@ 開(kāi)頭的絕對(duì)路徑。 .test2 { background-image: url('~@/static/logo.png'); }

注意

• 微信小程序不支持相對(duì)路徑（真機(jī)不支持，開(kāi)發(fā)工具支持）

字體圖標(biāo)

uni-app 支持使用字體圖標(biāo)，使用方式與普通 web 項(xiàng)目相同，需要注意以下幾點(diǎn)：

• 支持 base64 格式字體圖標(biāo)。
• 支持網(wǎng)絡(luò)路徑字體圖標(biāo)。
• 小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3編譯模式起支持直接使用本地背景圖和字體。
• 網(wǎng)絡(luò)路徑必須加協(xié)議頭 https。
• 從 http://www.iconfont.cn 上拷貝的代碼，默認(rèn)是沒(méi)加協(xié)議頭的。
• 從 http://www.iconfont.cn 上下載的字體文件，都是同名字體（字體名都叫iconfont，安裝字體文件時(shí)可以看到），在nvue內(nèi)使用時(shí)需要注意，此字體名重復(fù)可能會(huì)顯示不正常，可以使用工具修改。
• 使用本地路徑圖標(biāo)字體需注意：為方便開(kāi)發(fā)者，在字體文件小于 40kb 時(shí)，uni-app 會(huì)自動(dòng)將其轉(zhuǎn)化為 base64 格式；字體文件大于等于 40kb，仍轉(zhuǎn)換為 base64 方式使用的話(huà)可能有性能問(wèn)題，如開(kāi)發(fā)者必須使用，則需自己將其轉(zhuǎn)換為 base64 格式使用，或?qū)⑵渑驳椒?wù)器上，從網(wǎng)絡(luò)地址引用；字體文件的引用路徑推薦使用以 ~@ 開(kāi)頭的絕對(duì)路徑。 @font-face { font-family: test1-icon; src: url('~@/static/iconfont.ttf'); }

nvue中不可直接使用css的方式引入字體文件，需要使用以下方式在js內(nèi)引入。nvue內(nèi)不支持本地路徑引入字體，請(qǐng)使用網(wǎng)絡(luò)鏈接或者base64形式。src字段的url的括號(hào)內(nèi)一定要使用單引號(hào)。

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
  'fontFamily': "fontFamilyName",
  'src': "url('https://...')"
})

示例：