淺析對不同分辨率屏幕自動(dòng)調(diào)節(jié)的網(wǎng)頁設(shè)計(jì)方法

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

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

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

1 前言

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

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

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

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

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

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

3 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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

[作者簡介]

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