[發(fā)明專利]顯示界面的適配方法、裝置、設(shè)備及存儲(chǔ)介質(zhì)

在審

• 申請(qǐng)?zhí)枺?/td>: 202011282972.6
• 申請(qǐng)日: 2020-11-17
• 公開（公告）號(hào): CN112395531A
• 公開（公告）日: 2021-02-23
• 發(fā)明（設(shè)計(jì)）人: 蔡榮輝
• 申請(qǐng)（專利權(quán)）人: 平安普惠企業(yè)管理有限公司
• 主分類號(hào): G06F16/957
• 分類號(hào): G06F16/957;G06F16/958
• 代理公司: 北京市京大律師事務(wù)所 11321
• 代理人: 姚維

本發(fā)明涉及功能優(yōu)化領(lǐng)域，公開了顯示界面的適配方法、裝置、設(shè)備及存儲(chǔ)介質(zhì)，用于提高PC端顯示界面的適配效率。顯示界面的適配方法包括：獲取目標(biāo)屏幕中顯示界面的初始長(zhǎng)度數(shù)據(jù)，采用PostCSS插件將初始長(zhǎng)度數(shù)據(jù)的初始長(zhǎng)度單位轉(zhuǎn)換為預(yù)置長(zhǎng)度單位，得到轉(zhuǎn)換長(zhǎng)度數(shù)據(jù)和轉(zhuǎn)換界面；采用層疊樣式表CSS中的Media query模塊查詢目標(biāo)屏幕的寬度和分辨率，利用目標(biāo)屏幕的分辨率設(shè)置轉(zhuǎn)換界面的界面標(biāo)簽顏色；基于預(yù)置的查詢指令和目標(biāo)屏幕的寬度在預(yù)置的適配比例表中查詢轉(zhuǎn)換界面的適配顯示比例；通過適配顯示比例對(duì)轉(zhuǎn)換界面進(jìn)行界面適配，得到適配后的顯示界面。此外，本發(fā)明還涉及區(qū)塊鏈技術(shù)，初始長(zhǎng)度數(shù)據(jù)可存儲(chǔ)于區(qū)塊鏈中。

技術(shù)領(lǐng)域

本發(fā)明涉及功能優(yōu)化領(lǐng)域，尤其涉及一種顯示界面的適配方法、裝置、設(shè)備及存儲(chǔ)介質(zhì)。

背景技術(shù)

個(gè)人計(jì)算機(jī)(personal computer，PC)顯示界面的適配指的是根據(jù)PC的屏幕大小配置顯示的顯示界面的大小，顯示界面為用戶操作界面，現(xiàn)有的適配方案為層疊樣式表3級(jí)(cascading style sheets level 3，CSS3)適配方案和Rem(設(shè)置字體大小的單位)適配方案。CSS3適配方案是使用media query對(duì)多個(gè)顯示界面響應(yīng)點(diǎn)進(jìn)行切分，其中不同的顯示界面響應(yīng)點(diǎn)應(yīng)用不同的樣式；而Rem適配方案可以隨著顯示界面中根元素的字體大小變化而變化，進(jìn)而達(dá)到自適應(yīng)屏幕的效果。

在現(xiàn)有的技術(shù)中，兩種適配方案都需要對(duì)不同元素一一進(jìn)行處理，導(dǎo)致PC端顯示界面的適配效率低下。

發(fā)明內(nèi)容

本發(fā)明提供了一種顯示界面的適配方法、裝置、設(shè)備及存儲(chǔ)介質(zhì)，用于提高PC端顯示界面的適配效率。

本發(fā)明第一方面提供了一種顯示界面的適配方法，包括：獲取目標(biāo)屏幕中顯示界面的初始長(zhǎng)度數(shù)據(jù)，采用PostCSS插件將所述初始長(zhǎng)度數(shù)據(jù)的初始長(zhǎng)度單位轉(zhuǎn)換為預(yù)置長(zhǎng)度單位，得到轉(zhuǎn)換長(zhǎng)度數(shù)據(jù)，并將所述轉(zhuǎn)換長(zhǎng)度數(shù)據(jù)確定為所述顯示界面的長(zhǎng)度數(shù)據(jù)，得到轉(zhuǎn)換界面；采用層疊樣式表CSS中的Media query模塊查詢所述目標(biāo)屏幕的寬度和分辨率，利用所述目標(biāo)屏幕的分辨率設(shè)置所述轉(zhuǎn)換界面的界面標(biāo)簽顏色；執(zhí)行預(yù)置的查詢指令，基于所述預(yù)置的查詢指令和所述目標(biāo)屏幕的寬度在預(yù)置的適配比例表中查詢轉(zhuǎn)換界面的適配顯示比例；通過所述適配顯示比例對(duì)所述轉(zhuǎn)換界面進(jìn)行界面適配，得到適配后的顯示界面。

可選的，在本發(fā)明第一方面的第一種實(shí)現(xiàn)方式中，所述獲取目標(biāo)屏幕中顯示界面的初始長(zhǎng)度數(shù)據(jù)，采用PostCSS插件將所述初始長(zhǎng)度數(shù)據(jù)的初始長(zhǎng)度單位轉(zhuǎn)換為預(yù)置長(zhǎng)度單位，得到轉(zhuǎn)換長(zhǎng)度數(shù)據(jù)，并將所述轉(zhuǎn)換長(zhǎng)度數(shù)據(jù)確定為所述顯示界面的長(zhǎng)度數(shù)據(jù)，得到轉(zhuǎn)換界面包括：獲取目標(biāo)屏幕的顯示界面，并獲取所述顯示界面的初始長(zhǎng)度數(shù)據(jù)和對(duì)應(yīng)的初始長(zhǎng)度單位；通過PostCSS插件中將px單位自動(dòng)轉(zhuǎn)換成viewport單位的轉(zhuǎn)換指令將所述初始長(zhǎng)度單位轉(zhuǎn)換為預(yù)置長(zhǎng)度單位，得到對(duì)應(yīng)的轉(zhuǎn)換長(zhǎng)度數(shù)據(jù)，將所述轉(zhuǎn)換長(zhǎng)度數(shù)據(jù)確定為所述顯示界面的長(zhǎng)度數(shù)據(jù)，得到轉(zhuǎn)換界面，所述轉(zhuǎn)換指令為視口轉(zhuǎn)換函數(shù)。

可選的，在本發(fā)明第一方面的第二種實(shí)現(xiàn)方式中，所述通過PostCSS插件中將px單位自動(dòng)轉(zhuǎn)換成viewport單位的轉(zhuǎn)換指令將所述初始長(zhǎng)度單位轉(zhuǎn)換為預(yù)置長(zhǎng)度單位，得到對(duì)應(yīng)的轉(zhuǎn)換長(zhǎng)度數(shù)據(jù)，將所述轉(zhuǎn)換長(zhǎng)度數(shù)據(jù)確定為所述顯示界面的長(zhǎng)度數(shù)據(jù)，得到轉(zhuǎn)換界面，所述轉(zhuǎn)換指令為視口轉(zhuǎn)換函數(shù)包括：通過PostCSS插件中將px單位自動(dòng)轉(zhuǎn)換成viewport單位的轉(zhuǎn)換指令將初始長(zhǎng)度單位轉(zhuǎn)換為預(yù)置長(zhǎng)度單位，得到待測(cè)長(zhǎng)度數(shù)據(jù)，所述待測(cè)長(zhǎng)度數(shù)據(jù)的長(zhǎng)度單位為所述預(yù)置長(zhǎng)度單位，所述轉(zhuǎn)換指令為視口轉(zhuǎn)換函數(shù)；利用修正指令對(duì)所述待測(cè)長(zhǎng)度數(shù)據(jù)進(jìn)行數(shù)位修正，將所述待測(cè)長(zhǎng)度數(shù)據(jù)的數(shù)位位數(shù)設(shè)定為修正位數(shù)，得到轉(zhuǎn)換長(zhǎng)度數(shù)據(jù)，將所述轉(zhuǎn)換長(zhǎng)度數(shù)據(jù)確定為所述顯示界面的長(zhǎng)度數(shù)據(jù)，得到轉(zhuǎn)換界面，所述修正指令為精確單位精度函數(shù)。