[發(fā)明專利]一種前端單位轉(zhuǎn)換方法、裝置、設(shè)備和存儲介質(zhì)在審
| 申請?zhí)枺?/td> | 201910689964.4 | 申請日： | 2019-07-29 |
| 公開（公告）號： | CN110515624A | 公開（公告）日： | 2019-11-29 |
| 發(fā)明（設(shè)計）人： | 楊坤 | 申請（專利權(quán)）人： | 濟南浪潮數(shù)據(jù)技術(shù)有限公司 |
| 主分類號： | G06F8/40 | 分類號： | G06F8/40 |
| 代理公司： | 11227 北京集佳知識產(chǎn)權(quán)代理有限公司 | 代理人： | 劉翠香<國際申請>=<國際公布>=<進(jìn)入 |
| 地址： | 250101 山東省濟南市高新區(qū)*** | 國省代碼： | 山東;37 |
| 權(quán)利要求書： | 查看更多 | 說明書： | 查看更多 |
| 摘要： | |||
| 搜索關(guān)鍵詞： | 單位轉(zhuǎn)換 終端屏幕 預(yù)設(shè) 像素值轉(zhuǎn)換 存儲介質(zhì) 基準(zhǔn)終端 開發(fā)效率 可控的 模塊化 申請 屏幕 靈活 | ||
本申請公開了一種前端單位轉(zhuǎn)換方法，包括以基準(zhǔn)終端屏幕的第一寬度值為依據(jù)，將像素值轉(zhuǎn)換為rem值；獲取預(yù)設(shè)終端屏幕的第二寬度值；以所述第二寬度值為依據(jù)，設(shè)置與所述預(yù)設(shè)終端屏幕對應(yīng)的html的font?size。上述前端單位轉(zhuǎn)換方法，能夠擺脫px2rem?loader和webpack的限制，以靈活可控的方式將px單位轉(zhuǎn)換為rem單位，開發(fā)效率更高，在非模塊化的前端也可以使用，適用范圍更廣。本申請還公開了前端單位轉(zhuǎn)換裝置、設(shè)備和存儲介質(zhì)，具有與上述方法同樣的優(yōu)點。
技術(shù)領(lǐng)域
本發(fā)明屬于前端開發(fā)技術(shù)領(lǐng)域，特別是涉及一種前端單位轉(zhuǎn)換方法裝置、設(shè)備和存儲介質(zhì)。
背景技術(shù)
目前的移動端HTML5開發(fā)過程中，為了讓頁面能適配不同尺寸的移動終端設(shè)備，讓設(shè)計稿在不同尺寸的移動設(shè)備上展示效果一致，常用方法就是使用rem自適應(yīng)布局，rem是CSS3的一個相對單位，就是相對于根元素<html>的font-size來做計算，例如根元素<html>設(shè)置的font-size＝12px，非根元素設(shè)置width＝2rem，則2rem換算成px單位就是24px。利用rem的特性，在移動端HTML5的開發(fā)過程中，用javascript按照一定的規(guī)則容易動態(tài)設(shè)置<html>的font-size，從而可以看出，能夠以rem為單位實現(xiàn)適配效果。
目前，設(shè)計師的設(shè)計圖通常選擇iPhone6作為基準(zhǔn)設(shè)計尺寸，交付給前端開發(fā)人員的設(shè)計尺寸是按750px*1334px為準(zhǔn)，所有的單位都是以像素(px)為單位，那么前端開發(fā)人員在開發(fā)過程中要耗費大精力去計算，以將px單位轉(zhuǎn)換為rem單位，這就降低了程序開發(fā)的效率。
現(xiàn)在的將px單位轉(zhuǎn)換為rem單位的方法，是在主頁面引入lib-flexible.js然后npm安裝px2rem-loader，然后在webpack.config.js里配置，但是這種方法對于沒有實現(xiàn)前端模塊化和沒有使用webpack構(gòu)建工具的項目來說是無法使用的，導(dǎo)致其應(yīng)用范圍較窄，因此在許多情況下不能應(yīng)用這種方法實現(xiàn)轉(zhuǎn)換。
發(fā)明內(nèi)容
為解決上述問題，本發(fā)明提供了一種前端單位轉(zhuǎn)換方法、裝置、設(shè)備和存儲介質(zhì)，能夠擺脫px2rem-loader和webpack的限制，以靈活可控的方式將px單位轉(zhuǎn)換為rem單位，開發(fā)效率更高，在非模塊化的前端也可以使用，適用范圍更廣。
本發(fā)明提供的一種前端單位轉(zhuǎn)換方法包括：
以基準(zhǔn)終端屏幕的第一寬度值為依據(jù)，將像素值轉(zhuǎn)換為rem值；
獲取預(yù)設(shè)終端屏幕的第二寬度值；
以所述第二寬度值為依據(jù)，設(shè)置與所述預(yù)設(shè)終端屏幕對應(yīng)的html的font-size。
優(yōu)選的，在上述前端單位轉(zhuǎn)換方法中，所述以基準(zhǔn)終端屏幕的第一寬度值為依據(jù)，將像素值轉(zhuǎn)換為rem值包括：
將所述基準(zhǔn)終端屏幕的第一寬度值除以預(yù)設(shè)值，得到第一相對寬度值；
將所述像素值除以所述第一相對寬度值，得到所述rem值。
優(yōu)選的，在上述前端單位轉(zhuǎn)換方法中，所述預(yù)設(shè)值為10至50之間的一個值。
優(yōu)選的，在上述前端單位轉(zhuǎn)換方法中，所述以所述第二寬度值為依據(jù)，設(shè)置與所述預(yù)設(shè)終端屏幕對應(yīng)的html的font-size為：
將所述第二寬度值除以所述預(yù)設(shè)值，得到第二相對寬度值；
將所述第二相對寬度值設(shè)置為與所述預(yù)設(shè)終端屏幕對應(yīng)的html的font-size。
本發(fā)明提供的一種前端單位轉(zhuǎn)換裝置，包括：
轉(zhuǎn)換部件，用于以基準(zhǔn)終端屏幕的第一寬度值為依據(jù)，將像素值轉(zhuǎn)換為rem值；
該專利技術(shù)資料僅供研究查看技術(shù)是否侵權(quán)等信息，商用須獲得專利權(quán)人授權(quán)。該專利全部權(quán)利屬于濟南浪潮數(shù)據(jù)技術(shù)有限公司，未經(jīng)濟南浪潮數(shù)據(jù)技術(shù)有限公司許可，擅自商用是侵權(quán)行為。如果您想購買此專利、獲得商業(yè)授權(quán)和技術(shù)合作，請聯(lián)系【客服】
本文鏈接：http://www.szxzyx.cn/pat/books/201910689964.4/2.html，轉(zhuǎn)載請聲明來源鉆瓜專利網(wǎng)。
