一種css兼容性調(diào)優(yōu)的方法及系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001] 本申請涉及兼容性領(lǐng)域，特別涉及一種CSS兼容性調(diào)優(yōu)的方法及系統(tǒng)。
【背景技術(shù)】
[0002] 隨著互聯(lián)網(wǎng)開發(fā)技術(shù)的發(fā)展和移動互聯(lián)網(wǎng)的普及，人們對CSS兼容性調(diào)優(yōu)的要求 越來越高。
[0003] 現(xiàn)有的對CSS兼容性調(diào)優(yōu)的方法多以移動優(yōu)先為首要設(shè)計目標(biāo)，但是對于傳統(tǒng)行 業(yè)內(nèi)部系統(tǒng)，特別涉及金融、政府、教育等領(lǐng)域，因為其操作用戶的范圍性、應(yīng)用環(huán)境的敏感 性等，使得傳統(tǒng)行業(yè)Web應(yīng)用中CSS樣式不能很好適配不同分辨率桌面以及不同瀏覽器，導(dǎo) 致網(wǎng)頁CSS兼容性調(diào)優(yōu)過程繁瑣、實施不便的問題。
[0004] 因此，如何能夠簡單的實現(xiàn)CSS兼容性調(diào)優(yōu)，很好的適配不同分辨率桌面以及不 同瀏覽器是本領(lǐng)域技術(shù)人員目前需要解決的技術(shù)問題。

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

[0005] 本申請所要解決的技術(shù)問題是提供一種CSS兼容性調(diào)優(yōu)的方法及系統(tǒng)，解決了現(xiàn) 有技術(shù)中不能很好適配不同分辨率桌面以及不同瀏覽器，導(dǎo)致網(wǎng)頁CSS兼容性調(diào)優(yōu)過程繁 瑣、實施不便的問題。
[0006] 其具體方案如下：
[0007] -種CSS兼容性調(diào)優(yōu)的方法，該方法包括：
[0008] 插入CSS文件到待展示頁面中，所述CSS文件包括針對桌面端Web應(yīng)用的視圖布 局樣式文件和針對低版本瀏覽器的調(diào)整樣式文件；
[0009] 利用所述視圖布局樣式中預(yù)設(shè)的組件類名命名所述待展示頁面中各元素的類屬 性；
[0010] 根據(jù)當(dāng)前項目的設(shè)計要求，調(diào)整所述待展示頁面的屬性；
[0011] 在不同系統(tǒng)環(huán)境不同瀏覽器平臺下展示所述待展示頁面；
[0012] 檢查所述待展示頁面是否滿足預(yù)設(shè)的展示效果，若否，則對所述待展示頁面對應(yīng) 的屬性進行調(diào)整。
[0013] 上述的方法，優(yōu)選的，
[0014] 所述插入CSS文件到待展示頁面中為：
[0015] 在所述待展示頁面的標(biāo)簽中以鏈接的形式插入所述CSS文件。
[0016] 上述的方法，優(yōu)選的，
[0017] 所述針對桌面端Web應(yīng)用的視圖布局樣式文件，采用流式柵格系統(tǒng)，針對所述桌 面端Web應(yīng)用常用的頁面元素書寫了完整的兼容性樣式方案。
[0018] 上述的方法，優(yōu)選的，
[0019] 所述兼容性樣式方案包括：
[0020] 針對不同系統(tǒng)環(huán)境不同瀏覽器下的樣式重構(gòu)調(diào)整、具備完整的流式柵格系統(tǒng)、可 適配多分辨率桌面設(shè)備、可穩(wěn)定設(shè)置元素的尺寸位置或者可實現(xiàn)多層級元素嵌套。
[0021] 上述的方法，優(yōu)選的，
[0022] 所述的針對低版本瀏覽器的調(diào)整樣式文件，針對傳統(tǒng)行業(yè)常使用的三種低版本瀏 覽器IE6、IE7、IE8分別書寫了樣式缺陷的彌補性樣式方案。
[0023] 上述的方法，優(yōu)選的，
[0024] 所述樣式缺陷的彌補性樣式方案，包括：
[0025] 浮動產(chǎn)生雙倍間距的解決方案，頁面最小寬度的解決方案，高度不適應(yīng)的解決方 案，DIV元素浮動導(dǎo)致文本產(chǎn)生3像素間距的解決方案等。
[0026] 一種CSS兼容性調(diào)優(yōu)的系統(tǒng)，該系統(tǒng)包括：
[0027] 插入單元，用于插入CSS文件到待展示頁面中，所述CSS文件包括針對桌面端Web 應(yīng)用的視圖布局樣式文件和針對低版本瀏覽器的調(diào)整樣式文件；
[0028] 命名單元，用于利用所述視圖布局樣式中預(yù)設(shè)的組件類名命名所述待展示頁面中 各元素的類屬性；
[0029] 調(diào)整單元，用于根據(jù)當(dāng)前項目的設(shè)計要求，調(diào)整所述待展示頁面的屬性；
[0030] 展示單元，用于在不同系統(tǒng)環(huán)境不同瀏覽器平臺下展示所述待展示頁面；
[0031] 檢查單元，用于檢查所述待展示頁面是否滿足預(yù)設(shè)的展示效果，若否，則對所述待 展示頁面對應(yīng)的屬性進行調(diào)整。
[0032] 本申請?zhí)峁┑囊环NCSS兼容性調(diào)優(yōu)的方法中，插入CSS文件到待展示頁面中，所述 CSS文件包括針對桌面端Web應(yīng)用的視圖布局樣式文件和針對低版本瀏覽器的調(diào)整樣式文 件；利用所述視圖布局樣式中預(yù)設(shè)的組件類名命名所述待展示頁面中各元素的類屬性；根 據(jù)當(dāng)前項目的設(shè)計要求，調(diào)整所述待展示頁面的屬性；在不同系統(tǒng)環(huán)境不同瀏覽器平臺下 展示所述待展示頁面；檢查所述待展示頁面是否滿足預(yù)設(shè)的展示效果，若否，則對所述待展 示頁面對應(yīng)的屬性進行調(diào)整。實現(xiàn)了對傳統(tǒng)行業(yè)Web應(yīng)用的響應(yīng)式設(shè)計，優(yōu)先考慮其對多 瀏覽器的支持，著重于桌面端的Web頁面兼容性調(diào)優(yōu)，降低了CSS兼容性調(diào)優(yōu)的難度及時間 成本，能夠很好的適配不同分辨率桌面以及不同瀏覽器。
【附圖說明】
[0033] 為了更清楚地說明本申請實施例中的技術(shù)方案，下面將對實施例描述中所需要使 用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本申請的一些實施例，對于 本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動性的前提下，還可以根據(jù)這些附圖獲得其 他的附圖。
[0034] 圖1是本申請的一種CSS兼容性調(diào)優(yōu)的方法實施例1的流程圖；
[0035] 圖2是本申請的一種CSS兼容性調(diào)優(yōu)的系統(tǒng)實施例1的結(jié)構(gòu)示意圖。
【具體實施方式】
[0036] 本發(fā)明的核心是提供一種CSS兼容性調(diào)優(yōu)的方法及系統(tǒng)，解決了現(xiàn)有技術(shù)中不能 很好適配不同分辨率桌面以及不同瀏覽器，導(dǎo)致網(wǎng)頁CSS兼容性調(diào)優(yōu)過程繁瑣、實施不便 的問題。
[0037] 下面將結(jié)合本申請實施例中的附圖，對本申請實施例中的技術(shù)方案進行清楚、完 整地描述，顯然，所描述的實施例僅僅是本申請一部分實施例，而不是全部的實施例。基于 本申請中的實施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他 實施例，都屬于本申請保護的范圍。
[0038] 參考圖1，示出了本申請一種CSS兼容性調(diào)優(yōu)的方法實施例1的流程圖，可以包括 以下步驟：
[0039] 步驟S101 :插入CSS文件到待展示頁面中，所述CSS文件包括針對桌面端Web應(yīng) 用的視圖布局樣式文件和針對低版本瀏覽器的調(diào)整樣式文件。
[0040] 本申請中涉及到的CSS是一種用于為結(jié)構(gòu)化文檔（如HTML文檔、XML應(yīng)用）添加 樣式的計算機語言，常被用作標(biāo)準(zhǔn)網(wǎng)頁設(shè)計中網(wǎng)頁內(nèi)容的表現(xiàn)，可以有效地對全站頁面有 共同性質(zhì)屬性的布局、字體、顏色、背景和其它效果屬性實現(xiàn)更加精確的控制。
[0041] 響應(yīng)式設(shè)計：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用 的設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進行相對應(yīng)的布局。
[0042] 柵格系統(tǒng)：以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。網(wǎng) 頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來，可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可 用性。
[0043] 移動優(yōu)先：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的 設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進行相對應(yīng)的布局。
[0044] 本申請中，所述插入CSS文件到待展示頁面中為：在所述待展示頁面的標(biāo)簽中以 鏈接的形式插入所述CSS文件。
[0045] 所述針對桌面端Web應(yīng)用的視圖布局樣式文件，采用流式柵格系統(tǒng)，針對所述桌 面端Web應(yīng)用常用的頁面元素書寫了完整的兼容性樣式方案。
[0046] 所述兼容性樣式方案包括：
[0047] 針對不同系統(tǒng)環(huán)境不同瀏覽器下的樣式重構(gòu)調(diào)整、具備完整的流式柵格系統(tǒng)、可 適配多分辨率桌面設(shè)備、可穩(wěn)定設(shè)置元素的尺寸位置或者可實現(xiàn)多層級元素嵌套。
[0048] 所述視圖布局樣式文件包括：大分辨率桌面（寬度大于1200像素），中分辨率桌 面（寬度大于960像素），小分辨率桌面（寬度大于768像素），柵格系統(tǒng)的最大列數(shù)為12 列，柵格系統(tǒng)的行選項，柵格系統(tǒng)的元素寬度可包含1至12列和柵格系統(tǒng)的元素水平位置 可通過偏移列數(shù)來控制。
[0049] 所述的針對低版本瀏覽器的調(diào)整樣式文件，針對傳統(tǒng)行業(yè)常使用的三種低版本瀏 覽器IE6、IE7、IE8分別書寫了樣式缺陷的彌補性樣式方案。
[0050] 所述樣式缺陷的彌補性樣式方案，包括：
[0051] 浮動產(chǎn)生雙倍間距的解決方案，頁面最小寬度的解決方案，高度不適應(yīng)的解決方 案，DIV元素浮動導(dǎo)致文本產(chǎn)生3像素間距的解決方案等。
[0052] 步驟S102:利用所述視圖布局樣式中預(yù)設(shè)的組件類名命名所述待展示頁面中各 元素的類屬性。
[0053] 所述預(yù)設(shè)的組件類名為：Component Name (組件名）+View Group (視圖類 另lj )+Index(or Number)(索引）。
[0054] 具體實現(xiàn)例如：
[0055] <div class=,,panel-row-sm-6 panel-col-sm-1 panel-row-sm-offset-3,,> </div>
[0056] 其具體含義表示為：小分辨率桌面（寬度介于768像素至