一種調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法及系統(tǒng)的制作方法
【專利摘要】本發(fā)明提供一種調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法，包括，A：將屏幕進(jìn)行分類(lèi)得到屏幕分類(lèi)結(jié)果；B：根據(jù)所述分類(lèi)結(jié)果確立相應(yīng)的網(wǎng)頁(yè)樣式方案；C：將所述網(wǎng)頁(yè)樣式方案寫(xiě)入同一樣式表中或者寫(xiě)入不同樣式表中；D：匹配屏幕寬度，從所述樣式表中加載相應(yīng)的網(wǎng)頁(yè)樣式方案應(yīng)用于網(wǎng)頁(yè)。本發(fā)明還提供了一種調(diào)節(jié)網(wǎng)頁(yè)展示效果的系統(tǒng)，所述系統(tǒng)包含屏幕分類(lèi)模塊、網(wǎng)頁(yè)樣式設(shè)計(jì)模塊、網(wǎng)頁(yè)樣式配置文件生成模塊、網(wǎng)頁(yè)樣式生成模塊。本發(fā)明的有益效果是能根據(jù)屏幕分辨率加載不同網(wǎng)頁(yè)樣式方案，使得網(wǎng)頁(yè)智能調(diào)整呈現(xiàn)不同的外觀。
【專利說(shuō)明】一種調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法及系統(tǒng)
【技術(shù)領(lǐng)域】
[0001]本申請(qǐng)涉及網(wǎng)絡(luò)【技術(shù)領(lǐng)域】，特別是涉及一種調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法及系統(tǒng)。
【背景技術(shù)】
[0002]隨著科技的進(jìn)步，人們不再僅僅通過(guò)臺(tái)式機(jī)、筆記本瀏覽網(wǎng)頁(yè)，人們還可以通過(guò)手機(jī)等移動(dòng)設(shè)備瀏覽各類(lèi)網(wǎng)頁(yè)，這些變化給人們生活帶來(lái)方便的同時(shí)也給網(wǎng)頁(yè)設(shè)計(jì)形式提出了新的要求，那就是傳統(tǒng)的網(wǎng)頁(yè)固定寬度設(shè)計(jì)形式將不再是最佳選擇，一方面?zhèn)€人計(jì)算機(jī)屏幕分辨率越來(lái)越大(一般都在1000像素以上，目前主流寬度是1366X 768，有的還達(dá)到了2000像素)，如果還沿用固定的網(wǎng)頁(yè)寬度會(huì)影響網(wǎng)頁(yè)美觀，例如在1024X600以下分辨率下網(wǎng)頁(yè)布局寬度為970px，在1440X900以上分辨率下網(wǎng)頁(yè)布局寬度若依舊是970px，兩邊會(huì)留下至少各215px的空白。另一方面，對(duì)于手機(jī)（寬度通常在600像素以下）這類(lèi)顯示屏幕小的設(shè)備，網(wǎng)頁(yè)內(nèi)容會(huì)被瀏覽器遮住，例如在800 X 600px以下分辨率下，無(wú)法將970px布局寬度的網(wǎng)頁(yè)內(nèi)容顯示全。很多網(wǎng)站的解決方法，是為不同的設(shè)備提供不同的網(wǎng)頁(yè)，比如專門(mén)提供一個(gè)移動(dòng)設(shè)備版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時(shí)要維護(hù)好幾個(gè)版本，而且如果一個(gè)網(wǎng)站有多個(gè)入口，會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。
[0003]如果能“一次設(shè)計(jì)，普遍適用〃，讓同一張網(wǎng)頁(yè)自動(dòng)適應(yīng)不同大小的屏幕，將大大減少網(wǎng)站的運(yùn)營(yíng)維護(hù)成本。
[0004]在CSS3中的Media Queries增加了很多的媒體查詢功能，同時(shí)可以添加不同的媒體類(lèi)型的表達(dá)式用來(lái)檢查媒體是否符合某些條件，如果媒體符合相應(yīng)的條件，那么就會(huì)調(diào)用對(duì)應(yīng)的樣式表。換句簡(jiǎn)單的說(shuō)，“在CSS3中我們可以設(shè)置不同類(lèi)型的媒體條件，并根據(jù)對(duì)應(yīng)的條件，給相應(yīng)符合條件的媒體調(diào)用相對(duì)應(yīng)的樣式表”。它可以使設(shè)計(jì)人員制作的網(wǎng)頁(yè)在不同的分辨率和設(shè)備下都能顯示正常，并且不會(huì)因此而丟失樣式。例如，你可以把用于大屏幕上顯示的樣式和用于移動(dòng)設(shè)備的專用樣式放在一個(gè)樣式文檔中，這樣，在不改變文檔內(nèi)容的情況下，不同的設(shè)備可以呈現(xiàn)不同的界面外觀。
[0005]如何使同一網(wǎng)頁(yè)內(nèi)容在不同分辨率的屏幕顯示時(shí)調(diào)節(jié)網(wǎng)頁(yè)展示效果是本發(fā)明要解決的問(wèn)題。
【發(fā)明內(nèi)容】
[0006]本申請(qǐng)?zhí)岢鲆环N調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法，該方法根據(jù)屏幕分辨率加載不同樣式方案使網(wǎng)頁(yè)呈現(xiàn)不同的外觀。
[0007]按照本發(fā)明的調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法，包括如下步驟，
A :將屏幕進(jìn)行分類(lèi)得到屏幕分類(lèi)結(jié)果；
B :根據(jù)所述屏幕分類(lèi)結(jié)果確立相應(yīng)的網(wǎng)頁(yè)樣式方案；
C :將所述網(wǎng)頁(yè)樣式方案寫(xiě)入同一樣式表中或者寫(xiě)入不同樣式表中；
D :匹配屏幕寬度，從所述樣式表中加載相應(yīng)的樣式方案應(yīng)用于網(wǎng)頁(yè)。
[0008]優(yōu)選的是，所述步驟A中，將所述屏幕按水平像素?cái)?shù)進(jìn)行分類(lèi)。根據(jù)數(shù)據(jù)統(tǒng)計(jì)，以下六種屏幕分辨率占到71%,依次是：1024X768，1440X900,1366X768，1280X800，1920X1080，1680X1050，但是如果將所述屏幕都分別設(shè)計(jì)出樣式方案會(huì)造成開(kāi)發(fā)工作量較大，所以，我們將屏幕按水平像素?cái)?shù)劃分為三類(lèi)，即，1024px的情況為一類(lèi)，1024px< X≤1366 px的情況為一類(lèi)，X>1366 px的情況為一類(lèi)，X表示屏幕水平像素?cái)?shù)。
[0009]所述任一方案優(yōu)選的是，所述步驟B中，網(wǎng)頁(yè)樣式方案包括， bl、使焦點(diǎn)圖根據(jù)屏幕水平像素?cái)?shù)情況改變大小；
b2、使網(wǎng)頁(yè)布局寬度根據(jù)屏幕水平像素?cái)?shù)情況變化。
[0010]所述任一方案優(yōu)選的是，所述網(wǎng)頁(yè)樣式方案bl即若屏幕水平像素?cái)?shù)變大則焦點(diǎn)圖變大，若屏幕水平像素?cái)?shù)變小則焦點(diǎn)圖變小。
[0011]例如，當(dāng)所述屏幕水平像素?cái)?shù)小于等于1024PX時(shí)，所述焦點(diǎn)圖尺寸設(shè)置為：990pxX 364px ；
當(dāng)所述屏幕水平像素?cái)?shù)小于等于1366px同時(shí)大于1024px時(shí)，所述焦點(diǎn)圖尺寸設(shè)置為：1280 pxX470 px ；
當(dāng)所述屏幕水平像素?cái)?shù)大于1366px時(shí)，所述焦點(diǎn)圖尺寸設(shè)置為：1440 pxX530 px。
[0012]所述任一方案優(yōu)選的是，所述網(wǎng)頁(yè)樣式方案b2，若網(wǎng)頁(yè)布局中包含多子模塊，則根據(jù)屏幕水平像素?cái)?shù)情況顯示部分或全部子模塊內(nèi)容。例如，當(dāng)所述屏幕水平像素?cái)?shù)小于等于1024px時(shí)，則顯示5列子模塊內(nèi)容；當(dāng)所述屏幕水平像素?cái)?shù)小于等于1366px同時(shí)大于1024px時(shí)，顯示6列子模塊內(nèi)容；當(dāng)所述屏幕水平像素?cái)?shù)大于1366px時(shí)，顯示7列子模塊內(nèi)容。
[0013]所述任一方案優(yōu)選的是，所述步驟C中，所述樣式表為CSS文件。
[0014]所述任一方案優(yōu)選的是，所述步驟D為利用CSS的Media Query模塊匹配屏幕寬度并選擇合適的樣式文件應(yīng)用在網(wǎng)頁(yè)。
[0015]本發(fā)明還涉及一種調(diào)節(jié)網(wǎng)頁(yè)展示效果的系統(tǒng)，所述系統(tǒng)包括屏幕分類(lèi)模塊、網(wǎng)頁(yè)樣式設(shè)計(jì)模塊、網(wǎng)頁(yè)樣式配置文件生成模塊、網(wǎng)頁(yè)樣式生成模塊；其特征在于：
所述屏幕分類(lèi)模塊將屏幕按水平像素?cái)?shù)進(jìn)行分類(lèi)，得到分類(lèi)列表文件；
所述網(wǎng)頁(yè)樣式設(shè)計(jì)模塊根據(jù)所述分類(lèi)列表文件內(nèi)容，自動(dòng)調(diào)整焦點(diǎn)圖的大小，以及自動(dòng)調(diào)整網(wǎng)頁(yè)子模塊數(shù)量的多少；
所述網(wǎng)頁(yè)樣式配置文件生成模塊，存儲(chǔ)所述網(wǎng)頁(yè)設(shè)計(jì)模塊中焦點(diǎn)圖大小和網(wǎng)頁(yè)子模塊多少信息，并將配置信息存儲(chǔ)于樣式表文件中。
[0016]在上述任一方案中優(yōu)選的是， 所述樣式表文件，用于保存所述配置信息，采用CSS文件格式。
[0017]在上述任一方案中優(yōu)選的是，所述網(wǎng)頁(yè)樣式生成模塊，讀取當(dāng)前屏幕分辨率，并根據(jù)所述分類(lèi)列表文 件和所述樣式表文件，自動(dòng)匹配，實(shí)現(xiàn)網(wǎng)頁(yè)樣式滿足所述當(dāng)屏幕分辨率的顯示功能。
[0018]按照本發(fā)明的調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法及系統(tǒng)，首先按照屏幕水平分辨率進(jìn)行分類(lèi)，然后根據(jù)分類(lèi)結(jié)果對(duì)網(wǎng)頁(yè)樣式進(jìn)行設(shè)計(jì)，包含對(duì)焦點(diǎn)圖和網(wǎng)頁(yè)子模塊布局的智能調(diào)整，并將最終結(jié)果存儲(chǔ)在樣式文件中，當(dāng)打開(kāi)網(wǎng)頁(yè)時(shí)，系統(tǒng)會(huì)自動(dòng)識(shí)別屏幕分辨率，根據(jù)分類(lèi)結(jié)果，從樣式文件中選擇合適的網(wǎng)頁(yè)樣式配置信息進(jìn)行網(wǎng)頁(yè)的顯示，從而實(shí)現(xiàn)了 “一次設(shè)計(jì)，普遍適用”，讓同一張網(wǎng)頁(yè)能自動(dòng)適應(yīng)不同大小的屏幕的功能。【專利附圖】
【附圖說(shuō)明】
[0019]圖I示出了按照本發(fā)明的調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法的流程圖；
圖2示出了當(dāng)屏幕水平像素?cái)?shù)小于等于1024px時(shí)顯示5列模塊的效果示意圖；
圖3示出了當(dāng)屏幕水平像素?cái)?shù)小于等于1366px同時(shí)大于1024px時(shí)顯示6列模塊的效果示意圖；
圖4示出了當(dāng)屏幕水平像素?cái)?shù)大于1366px時(shí)顯示7列模塊的示意圖；
圖5示出了按照本發(fā)明的調(diào)節(jié)網(wǎng)頁(yè)展示效果的系統(tǒng)的功能組成示意圖。
【具體實(shí)施方式】
[0020]以下將描述本發(fā)明的優(yōu)選的實(shí)施方式，本領(lǐng)域的技術(shù)人員應(yīng)當(dāng)清楚這些實(shí)施方式并非限制性的。[0021]按照本發(fā)明的調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法，依次包括如下步驟，
A :將屏幕進(jìn)行分類(lèi)得到屏幕分類(lèi)結(jié)果；
B :根據(jù)所述屏幕分類(lèi)結(jié)果確立相應(yīng)的網(wǎng)頁(yè)樣式方案；
C :將所述網(wǎng)頁(yè)樣式方案寫(xiě)入同一樣式表中或者寫(xiě)入不同樣式表中；
D :匹配屏幕寬度，從所述樣式表中加載相應(yīng)的樣式方案應(yīng)用于網(wǎng)頁(yè)。
[0022]在實(shí)施例中，我們將屏幕按水平像素?cái)?shù)劃分為三類(lèi)，即，X ( 1024px的情況為一類(lèi)，1024px < X ^ 1366 px的情況為一類(lèi)，X>1366 px的情況為一類(lèi)，X表示屏幕水平像素?cái)?shù)。
[0023]實(shí)施例I
在本實(shí)施例中，當(dāng)屏幕水平像素?cái)?shù)小于等于1024px時(shí)，焦點(diǎn)圖尺寸設(shè)置為：990pxX364px ;當(dāng)所述屏幕水平像素?cái)?shù)小于等于1366px同時(shí)大于1024px時(shí),焦點(diǎn)圖尺寸設(shè)置為：1280 pxX470 px ;當(dāng)所述屏幕水平像素?cái)?shù)大于1366px時(shí)，焦點(diǎn)圖尺寸設(shè)置為：1440pxX530 pxo
[0024]在本實(shí)施例I中，焦點(diǎn)圖示意代碼如下：
<div id=〃menu〃>
<ul>
<li id=’ jdt，><div> 焦點(diǎn)圖部分 </div><li>
</ul>
</div>
在本實(shí)施例I中，css文件示意代碼如下：
/*當(dāng)屏幕水平像素?cái)?shù)小于等于1024px時(shí)*/
Omedia screen and (max-width: 1024px) {
/*焦點(diǎn)圖尺寸設(shè)置為：990pxX364px */
#menu ul li.jdt{
width: 990px;
height: 364px;
}}
/*當(dāng)屏幕水平像素?cái)?shù)小于等于1366px同時(shí)大于1024px時(shí)*/
Omedia screen and (min-width: 1024px) and (max-width: 1366px) {
/*焦點(diǎn)圖尺寸設(shè)置為:1280pxX470px */
#menu ul l1.jdt {
width: 1280px;
height: 470px;
}
}
/*當(dāng)屏幕水平像素?cái)?shù)大于1366px時(shí)*/
Omedia screen and (min -width: 1366px) {
/*焦點(diǎn)圖尺寸設(shè)置為:1440pxX530px */
#menu ul l1.jdt {
width: 1440px;
height: 530px;
}
}
實(shí)施例2
如圖2所示，在本實(shí)施例中，當(dāng)屏幕水平像素?cái)?shù)小于等于1024px時(shí)，則顯示5列模塊；如圖3所示，在本實(shí)施例中，當(dāng)所述屏幕水平像素?cái)?shù)小于等于1366px同時(shí)大于1024px時(shí)，顯示6列模塊；如圖4所示，在本實(shí)施例中，當(dāng)所述屏幕水平像素?cái)?shù)大于1366px時(shí)，顯示7列模塊。
[0025]在本實(shí)施例3中，網(wǎng)頁(yè)布局示意代碼如下:
<div id=〃menu〃>
<ul>
〈li id=’mdl’ >〈div> 模塊 l〈/div>〈li>
〈li id=，md2’ >〈div> 模塊 2〈/div>〈li>
〈li id=，md3’ >〈div> 模塊 3〈/div>〈li>
〈li id=’ md4’ >〈div> 模塊 4〈/div>〈li>
〈li id=’ md5’ >〈div> 模塊 5〈/div>〈li>
〈li id=’ md6’ >〈div> 模塊 6〈/div>〈li>
〈li id=’ md7’ >〈div> 模塊 7〈/div>〈li>
</ul>
</div>
在本實(shí)施例3中，css文件示意代碼如下:
/*當(dāng)屏幕水平像素?cái)?shù)小于等于1024px時(shí)*/
Omedia screen and (max-width: 1024px) {
/*模塊6，模塊7不顯示*/ li# md6, li# md7{display:none;
}
/*模塊1、2、3、4、5寬度為18.5%，外邊距的寬度為0.75%*/
#menu ul Ii {
width: 18.5%;
margin-left: 0.75%;
margin-right: 0.75%;
}
}
/*當(dāng)屏幕水平像素?cái)?shù)小于等于1366px同時(shí)大于1024px時(shí)*/
?media screen and (min-width: 1024px) and (max-width: 1366px) {
Λ模塊?不顯示*/ li# md7{ display:none;
}
/*模塊1、2、3、4、5、6寬度為15.6%，外邊距的寬度為0.5%*/
#menu ul Ii {
width: 15.6666%;
margin-left: 0.5%;
margin-right: 0.5%;
}
}
/*當(dāng)屏幕水平像素?cái)?shù)大于1366px時(shí)*/
?media screen and (min-width: 1366px) {
/*模塊1、2、3、4、5、6、7寬度為13.4%，外邊距的寬度為0.4%*/
#menu ul Ii {
width: 13.4%;
margin-left: 0.4%;
margin-right: 0.4%;
}
}
同時(shí)CSS3 Media Queries還能查詢?cè)O(shè)備的寬度“device-width”來(lái)判斷樣式的調(diào)用，這個(gè)主要用在iPhone，iPads設(shè)備上，比如像下面的應(yīng)用:
1、iPhone 和 Smartphones 上的運(yùn)用
/氺 iPhone and Smartphones (portrait and landscape)，設(shè)備的實(shí)際寬度大于320px 小于 480px */
?media screen and (min-device-width: 320px) and (max-device~width: 480px)
{
//樣式放在這里...}
其中max-device-width指的是設(shè)備整個(gè)渲染區(qū)寬度(設(shè)備的實(shí)際寬度)。
[0026]2、iPads 上的運(yùn)用
/* iPads (landscape)實(shí)際寬度大于 768px 小于 1024px)*/
Omedia screen and (min-device-width: 768px) and (max-device-width:1024px) and (orientation: landscape)
{
//樣式放在這里...}
/* iPads (portrait)實(shí)際寬度大于 768px 小于 1024px */
Omedia screen and (min-device-width: 768px) and (max-device-width:1024px) and (orientation: portrait)
{
//樣式放在這里...}
針對(duì)移動(dòng)設(shè)備的運(yùn)用，如果你想讓樣式工作得比較正常，需要在“〈head〉”添加“viewport，，的 meta 標(biāo)簽:
<meta name=〃viewport〃 content=〃width=device_width，initial-scale=l.0〃>本發(fā)明還提供了一種調(diào)節(jié)網(wǎng)頁(yè)展示效果的系統(tǒng)，如圖5所示，所述系統(tǒng)包括屏幕分類(lèi)模塊、網(wǎng)頁(yè)樣式設(shè)計(jì)模塊、網(wǎng)頁(yè)樣式配置文件生成模塊、網(wǎng)頁(yè)樣式生成模塊；所述屏幕分類(lèi)模塊將屏幕按水平像素?cái)?shù)進(jìn)行分類(lèi)，得到分類(lèi)列表文件；所述網(wǎng)頁(yè)樣式設(shè)計(jì)模塊根據(jù)所述分類(lèi)列表文件內(nèi)容，自動(dòng)調(diào)整焦點(diǎn)圖的大小，以及自動(dòng)調(diào)整網(wǎng)頁(yè)子模塊數(shù)量的多少；所述網(wǎng)頁(yè)樣式配置文件生成模塊，存儲(chǔ)所述網(wǎng)頁(yè)設(shè)計(jì)模塊中焦點(diǎn)圖大小和網(wǎng)頁(yè)子模塊多少信息，并將配置信息存儲(chǔ)于樣式表文件中。
[0027]進(jìn)一步，所述屏幕分類(lèi)模塊，實(shí)現(xiàn)將屏幕按水平像素?cái)?shù)進(jìn)行分類(lèi)的功能。例如，將屏幕按水平像素?cái)?shù)劃分為三類(lèi)，其中X表示屏幕水平像素?cái)?shù)，即X < 1024px為類(lèi)一，1024px< X ≤ 1366 px 為類(lèi)二，X>1366 px 為類(lèi)三。
[0028]所述分類(lèi)列表文件，用于存儲(chǔ)所述屏幕按水平像素?cái)?shù)進(jìn)行分類(lèi)的結(jié)果。例如，根據(jù)所述三類(lèi)結(jié)果，保存邊界數(shù)值1024和1366。
[0029]所述網(wǎng)頁(yè)樣式設(shè)計(jì)模塊，實(shí)現(xiàn)焦點(diǎn)圖自適應(yīng)和網(wǎng)頁(yè)布局自適應(yīng)的功能。所述焦點(diǎn)圖自適應(yīng)，是根據(jù)所述分類(lèi)列表文件內(nèi)容，自動(dòng)調(diào)整焦點(diǎn)圖的大小。例如，當(dāng)所述屏幕水平像素?cái)?shù)< 1024px時(shí)，所述焦點(diǎn)圖尺寸設(shè)置為:900pxX364px ;當(dāng)所述屏幕水平像素?cái)?shù)≤1366px同時(shí)> 1024px時(shí)，所述焦點(diǎn)圖尺寸設(shè)置為:1280 pxX470 px ;當(dāng)所述屏幕水平像素?cái)?shù)> 1366px時(shí)，所述焦點(diǎn)圖尺寸設(shè)置為:1440 pxX530 px。所述網(wǎng)頁(yè)布局自適應(yīng)，是根據(jù)所述分類(lèi)列表文件內(nèi)容，自動(dòng)調(diào)整網(wǎng)頁(yè)子模塊數(shù)量的多少。例如，當(dāng)所述屏幕水平像素?cái)?shù)(1024px時(shí)，則顯示5列子模塊內(nèi)容；當(dāng)所述屏幕水平像素?cái)?shù)≤1366px同時(shí)> 1024px時(shí)，顯示6列子模塊內(nèi)容；當(dāng)所述屏幕水平像素?cái)?shù)> 1366px時(shí)，顯示7列子模塊內(nèi)容。
[0030]所述網(wǎng) 頁(yè)樣式配置文件生成模塊，實(shí)現(xiàn)存儲(chǔ)所述網(wǎng)頁(yè)設(shè)計(jì)模塊中焦點(diǎn)圖大小和網(wǎng)頁(yè)子模塊多少信息的功能，并將配置信息存儲(chǔ)于樣式表文件中。[0031]所述樣式表文件，用于保存所述配置信息，采用CSS文件格式。
[0032]所述網(wǎng)頁(yè)樣式生成模塊，讀取當(dāng)前屏幕分辨率，并根據(jù)所述分類(lèi)列表文件和所述樣式表文件，自動(dòng)匹配，實(shí)現(xiàn)網(wǎng)頁(yè)樣式滿足所述當(dāng)屏幕分辨率的顯示功能。
[0033]按照本發(fā)明的調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法及系統(tǒng)，首先按照屏幕水平分辨率進(jìn)行分類(lèi)，然后根據(jù)分類(lèi)結(jié)果對(duì)網(wǎng)頁(yè)樣式進(jìn)行設(shè)計(jì)，包含對(duì)焦點(diǎn)圖和網(wǎng)頁(yè)子模塊布局的智能調(diào)整，并將最終結(jié)果存儲(chǔ)在樣式文件中，當(dāng)打開(kāi)網(wǎng)頁(yè)時(shí)，系統(tǒng)會(huì)自動(dòng)識(shí)別屏幕分辨率，根據(jù)分類(lèi)結(jié)果，從樣式文件中選擇合適的網(wǎng)頁(yè)樣式配置信息進(jìn)行網(wǎng)頁(yè)的顯示，從而實(shí)現(xiàn)了 “一次設(shè)計(jì)，普遍適用”，讓同一張網(wǎng)頁(yè)能自動(dòng)適應(yīng)不同大小的屏幕的功能。
[0034]本領(lǐng)域技術(shù)人員同樣不難看出，本發(fā)明是對(duì)現(xiàn)有技術(shù)的改進(jìn)，是為解決現(xiàn)有技術(shù)中存在的技術(shù)問(wèn)題而將這些現(xiàn)有技術(shù)中的要素進(jìn)行的結(jié)合，這種結(jié)合凝結(jié)了大量的創(chuàng)造性勞動(dòng)，是發(fā)明人大量理論研究和科學(xué)實(shí)驗(yàn)的結(jié)晶。在沒(méi)有閱讀本發(fā)明之前，本領(lǐng)域技術(shù)人員顯然是不容易想到本發(fā)明的各個(gè)方案的，而在閱讀了本說(shuō)明書(shū)后，本領(lǐng)域技術(shù)人員不必再付出創(chuàng)造性勞動(dòng)即可實(shí)現(xiàn)本發(fā)明的基本技術(shù)方案。
【權(quán)利要求】
1.一種調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法，包括如下步驟， A :將屏幕進(jìn)行分類(lèi)得到屏幕分類(lèi)結(jié)果； B :根據(jù)所述屏幕分類(lèi)結(jié)果確立相應(yīng)的網(wǎng)頁(yè)樣式方案； C :將所述網(wǎng)頁(yè)樣式方案寫(xiě)入同一樣式表中或者寫(xiě)入不同樣式表中； D :匹配屏幕寬度，從所述樣式表中加載相應(yīng)的樣式方案應(yīng)用于網(wǎng)頁(yè)。
2.如權(quán)利要求I所述的調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法，其特征在于：所述步驟A中，將屏幕按水平像素?cái)?shù)進(jìn)行分類(lèi)。
3.如權(quán)利要求I所述的調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法，其特征在于：所述步驟B中，所述網(wǎng)頁(yè)樣式方案包括， bl、使焦點(diǎn)圖根據(jù)屏幕水平像素?cái)?shù)情況改變大小； b2、使網(wǎng)頁(yè)布局寬度根據(jù)屏幕水平像素?cái)?shù)情況變化。
4.如權(quán)利要求3所述的調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法，其特征在于：所述網(wǎng)頁(yè)樣式方案bl即焦點(diǎn)圖大小隨屏幕水平像素?cái)?shù)變化而變化。
5.如權(quán)利要求3所述的調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法，其特征在于：所述網(wǎng)頁(yè)樣式方案b2，若網(wǎng)頁(yè)布局中包含多子模塊，則根據(jù)屏幕水平像素?cái)?shù)情況顯示部分子模塊內(nèi)容。
6.如權(quán)利要求I所述的調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法，其特征在于：所述步驟C中，所述樣式表為CSS文件。
7.如權(quán)利要求I所述的調(diào)節(jié)網(wǎng)頁(yè)展示效果的方法，其特征在于：所述步驟D為利用CSS的Media Query模塊匹配屏幕寬度并選擇合適的樣式文件應(yīng)用在網(wǎng)頁(yè)。
8.一種調(diào)節(jié)網(wǎng)頁(yè)展示效果的系統(tǒng)，所述系統(tǒng)包括屏幕分類(lèi)模塊、網(wǎng)頁(yè)樣式設(shè)計(jì)模塊、網(wǎng)頁(yè)樣式配置文件生成模塊、網(wǎng)頁(yè)樣式生成模塊；其特征在于： 所述屏幕分類(lèi)模塊將屏幕按水平像素?cái)?shù)進(jìn)行分類(lèi)，得到分類(lèi)列表文件； 所述網(wǎng)頁(yè)樣式設(shè)計(jì)模塊根據(jù)所述分類(lèi)列表文件內(nèi)容，自動(dòng)調(diào)整焦點(diǎn)圖的大小，以及自動(dòng)調(diào)整網(wǎng)頁(yè)子模塊數(shù)量的多少； 所述網(wǎng)頁(yè)樣式配置文件生成模塊，存儲(chǔ)所述網(wǎng)頁(yè)設(shè)計(jì)模塊中焦點(diǎn)圖大小和網(wǎng)頁(yè)子模塊多少信息，并將配置信息存儲(chǔ)于樣式表文件中。
9.如權(quán)利要求8所述的調(diào)節(jié)網(wǎng)頁(yè)展示效果的系統(tǒng)，其特征在于：所述分類(lèi)列表文件，用于存儲(chǔ)所述屏幕按水平像素?cái)?shù)進(jìn)行分類(lèi)的結(jié)果；所述樣式表文件，用于保存所述配置信息。
10.如權(quán)利要求8所述的調(diào)節(jié)網(wǎng)頁(yè)展示效果的系統(tǒng)，其特征在于：所述網(wǎng)頁(yè)樣式生成模塊，讀取當(dāng)前屏幕分辨率，并根據(jù)所述分類(lèi)列表文件和所述樣式表文件，自動(dòng)匹配，實(shí)現(xiàn)網(wǎng)頁(yè)樣式滿足所述當(dāng)屏幕分辨率的顯示功能。
【文檔編號(hào)】G06F17/30GK103488777SQ201310457052
【公開(kāi)日】2014年1月1日 申請(qǐng)日期:2013年9月30日 優(yōu)先權(quán)日:2013年9月30日
【發(fā)明者】朱立雄, 謝飛 申請(qǐng)人:樂(lè)視網(wǎng)信息技術(shù)（北京）股份有限公司