[發(fā)明專利]一種彈性響應(yīng)式網(wǎng)頁數(shù)據(jù)設(shè)定方法

在審

• 申請?zhí)枺?/td>: 201811274653.3
• 申請日: 2018-10-30
• 公開（公告）號: CN109471628A
• 公開（公告）日: 2019-03-15
• 發(fā)明（設(shè)計(jì)）人: 程國艮;郝雁華
• 申請（專利權(quán)）人: 中譯語通科技股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F16/958
• 代理公司: 北京中譽(yù)威圣知識產(chǎn)權(quán)代理有限公司 11279
• 代理人: 蔣常雪

本發(fā)明公開一種彈性響應(yīng)式網(wǎng)頁數(shù)據(jù)設(shè)定方法，盡最大可能實(shí)現(xiàn)彈性可伸縮的布局，具體包括如下內(nèi)容：使用百分比長度或者視口相關(guān)的單位取代固定長度；為了在較大分辨率下得到固定寬度，使用max?width取代width；為替換元素設(shè)置一個max?width，值為100%；設(shè)置background?size:cover這個屬性；當(dāng)網(wǎng)頁元素以行列式進(jìn)行布局時(shí)，讓視口的寬度來決定列的數(shù)量，通過彈性盒布局或者display:inline?block加上常規(guī)的文本折行行為來實(shí)現(xiàn)這一點(diǎn)；在使用多列文本時(shí)，指定列寬column?width以便在較小的屏幕上自動顯示為單列布局。本發(fā)明所述方法能夠減輕媒體查詢所產(chǎn)生的維護(hù)成本，拓展響應(yīng)式網(wǎng)頁設(shè)計(jì)方法的適用范圍。

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

本發(fā)明屬于網(wǎng)頁設(shè)計(jì)開發(fā)技術(shù)領(lǐng)域，具體涉及一種彈性響應(yīng)式網(wǎng)頁設(shè)計(jì)方法。

背景技術(shù)

響應(yīng)式網(wǎng)站設(shè)計(jì)（Responsive Web Design，RWD）是一種網(wǎng)絡(luò)頁面設(shè)計(jì)布局，其理念是：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的終端設(shè)備環(huán)境進(jìn)行相對應(yīng)的布局。

響應(yīng)式網(wǎng)站設(shè)計(jì)的目標(biāo)是：頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同終端設(shè)備；換句話說，頁面應(yīng)該有能力去自動響應(yīng)用戶的終端設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁設(shè)計(jì)就是一個網(wǎng)站能夠兼容多個終端設(shè)備，而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計(jì)和開發(fā)了。

近年來隨著2K、4k屏幕的普及，常見的響應(yīng)式網(wǎng)頁設(shè)計(jì)是用媒體查詢（MediaQuery）規(guī)則來修補(bǔ)網(wǎng)站在這些分辨率下出現(xiàn)的問題。然而每次對 CSS 代碼的修改都要求我們逐一核對這些媒體查詢是否需要做配合修改，媒體查詢越多CSS 代碼冗余維護(hù)成本就會變得越來越高，甚至可能要求我們反過來修改這些媒體查詢的設(shè)置。這并不是說媒體查詢是一種不良實(shí)踐，而是應(yīng)該把它作為最后的修復(fù)手段。

媒體的工作原理基于某幾個特定的斷點(diǎn)，不能以一種連續(xù)的方式來修復(fù)問題。如果大部分樣式代碼并不是以彈性的方式來編寫的，那么媒體查詢能做的只是修補(bǔ)某個特定分辨率下的特定問題而已。然而這一點(diǎn)常常被我們忽略，導(dǎo)致后患無窮。

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

為了解決現(xiàn)有的響應(yīng)式網(wǎng)頁設(shè)計(jì)技術(shù)存在多樣化終端適配冗余問題，本發(fā)明提供一種彈性響應(yīng)式網(wǎng)頁設(shè)計(jì)方法，所述方法根據(jù)終端設(shè)備自身來大小使用及少量媒體查詢方案，盡最大努力實(shí)現(xiàn)彈性可伸縮的布局，并在多樣化終端設(shè)備實(shí)現(xiàn)輕便高效渲染。

為實(shí)現(xiàn)上述目標(biāo)，本發(fā)明采用以下技術(shù)方案：

一種彈性響應(yīng)式網(wǎng)頁設(shè)計(jì)方法，所述盡最大可能實(shí)現(xiàn)彈性可伸縮的布局。具體包括如下內(nèi)容：

1）、使用百分比長度或者視口相關(guān)的單位（vw、vh、vmin 和 vmax）來取代固定長度；

2）、為了在較大分辨率下得到固定寬度，使用 max-width取代 width，因?yàn)閙ax-width可以適應(yīng)較小的分辨率，而無需使用媒體查詢；

3）、為替換元素（比如 img、object、video、iframe 等）設(shè) 置一個 max-width，值為100%；

4）、設(shè)置background-size: cover 這個屬性，以便使背景圖片能夠完整地鋪滿一個容器，而不管容器的尺寸如何變化；

5）、當(dāng)圖片等網(wǎng)頁元素以行列式進(jìn)行布局時(shí)，讓視口的寬度來決定列的數(shù)量，通過彈性盒布局（即 Flexbox）或者 display: inline-block 加上常規(guī)的文本折行行為，都可以實(shí)現(xiàn)這一點(diǎn)；