摘要：隨著網(wǎng)絡(luò)速度越來(lái)越快，互聯(lián)網(wǎng)應(yīng)用的不斷深入和普及，互聯(lián)網(wǎng)終端設(shè)備從PC機(jī)到平板電腦、手機(jī)，品種越來(lái)越多，瀏覽器的屏幕尺寸千差萬(wàn)別。這種應(yīng)用情況給網(wǎng)頁(yè)設(shè)計(jì)提出了更高的要求，如何用最有效的方法設(shè)計(jì)網(wǎng)頁(yè)，能夠在不同的屏幕都能美觀合理地顯示網(wǎng)頁(yè)內(nèi)容，本文提出一種通過(guò)CSS設(shè)置的方法，使網(wǎng)頁(yè)能夠自動(dòng)適應(yīng)不同規(guī)格瀏覽器，以期拋磚引玉。

關(guān)鍵詞：自適應(yīng)調(diào)節(jié)網(wǎng)頁(yè)設(shè)計(jì)；CSS

中圖分類號(hào)：TP311.52 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9599 （2013） 03-0000-02

1 前言

根據(jù)網(wǎng)上調(diào)查顯示，未來(lái)的發(fā)展趨勢(shì)將是大多數(shù)網(wǎng)站的流量都來(lái)自移動(dòng)終端的訪問(wèn)。為適應(yīng)各種不同移動(dòng)終端顯示的需要，未來(lái)網(wǎng)頁(yè)設(shè)計(jì)中，網(wǎng)頁(yè)的自適應(yīng)調(diào)整功能將不可缺少，將是決定網(wǎng)頁(yè)設(shè)計(jì)質(zhì)量的重要標(biāo)準(zhǔn)。為了給移動(dòng)用戶提供更好瀏覽體驗(yàn)，許多網(wǎng)站為自己定做了專用的APP（移動(dòng)終端的第三方應(yīng)用程序），但這種方式成本高，且推廣不易，因?yàn)榇蠖嘤脩舨粫?huì)瀏覽一個(gè)網(wǎng)站就下載一個(gè)APP。本文提出一種通過(guò)CSS設(shè)置的方法，使網(wǎng)頁(yè)能夠自動(dòng)適應(yīng)不同規(guī)格瀏覽器，

2 自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)

不同的終端設(shè)備對(duì)于網(wǎng)頁(yè)而言區(qū)別主要是屏幕分辯率的差異，比如：1024*768、400*800等，對(duì)于瀏覽網(wǎng)頁(yè)而言，最重要的是屏幕的寬度不同，從桌面終端的兩千多像素到手持設(shè)備的幾百像素不等。當(dāng)前網(wǎng)頁(yè)布局和樣式設(shè)計(jì)的主流是采用層疊樣式表（Cascading Style Sheet）簡(jiǎn)稱“CSS”，被絕大多數(shù)瀏覽器支持。下面從幾個(gè)方面適當(dāng)?shù)卦O(shè)置的CSS，使網(wǎng)頁(yè)能夠根據(jù)不同分辯率的屏幕，自動(dòng)調(diào)整布局和顯示風(fēng)格，具備自適應(yīng)能力。為此，主要考慮以下三個(gè)方面的問(wèn)題。

代碼功能：如果屏幕寬度小于800像素，則sidebar塊不顯示（display：none），寬度自動(dòng)調(diào)節(jié)（width：auto）、column塊取消窗口浮動(dòng)（float：none）。

2.2 根據(jù)不同的寬度調(diào)整布局

（1）允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整

3 結(jié)束語(yǔ)

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)是以后網(wǎng)站建設(shè)中不可缺少的組成部分，在移動(dòng)辦公、電子商務(wù)、掌上學(xué)習(xí)等方面都有重要的應(yīng)用，本文從通常必須考慮的三個(gè)自適應(yīng)功能進(jìn)行總結(jié)，以便為具體的自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)提供參考和幫助。

參考文獻(xiàn)：

[1]楊宏偉.華艷輝.單弘江關(guān)于網(wǎng)頁(yè)對(duì)客戶端分辨率自適應(yīng)策略的研究[J].商場(chǎng)現(xiàn)代化，2007（4）.

[2]樊東燕.基于Web頁(yè)面的瀏覽器分辨率自適應(yīng)策略的探討[J].電腦開發(fā)與應(yīng)用，2009（5）.

[3]于慧凝.淺析網(wǎng)頁(yè)對(duì)客戶端分辨率的適應(yīng)問(wèn)題[J].科技信息，2009（28）.

[4]趙亮，張維.基于Android技術(shù)的界面設(shè)計(jì)與研究[J].電腦知識(shí)與技術(shù)，2009（29）.

[5]陳享振.初探網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)中的審美意識(shí)培養(yǎng)[J].美與時(shí)代（上），2010（5）.

[6]嚴(yán)晨，楊智坤.網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)中的5條基本原則[J].科技與出版，2011（2）.

[7]張躍鵬.自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)初探[J].商業(yè)文化（上），2012（5）.

[8]田彥.浮動(dòng)框架在網(wǎng)頁(yè)制作中的使用技巧[J].計(jì)算機(jī)光盤軟件與應(yīng)用，2012（9）.

[作者簡(jiǎn)介]

冉兆春（1970.4-），男，漢族，陜西西安人，海南工商職業(yè)學(xué)院，碩士，講師，從事信息系統(tǒng)分析、計(jì)算機(jī)算法設(shè)計(jì)。