網站建設說難不難，說容易也不簡單。但是對于一個剛入門的新手來說，要做一個網站，做好一個網站是有難度的。做網站入門確實是很簡單，但是想要做的厲害就難了！你要學的東西很多，而且要學的很精。或許你會經常聽到一些程序員會說：“其實沒想象中那么難”。對做網站是不難，首先選擇好網站模版，像現在只要懂一下做網站的軟件，直接去找開源的代碼套進去就好了。然后做下修改，一個簡單的網站就出來了。但是做一個精致完美的網站，是要通過不斷完善與修改才能做得好。

      如今的互聯網時代，在網站建設這一方面，或多或少處在許多差異，網站建設過程中也會出現許多新的問題。在現如今的互聯網時代中，自適應網站與響應(ying)式(shi)網站成為了熱潮！對(dui)于自適(shi)應(ying)網站(zhan)設計中的關(guan)鍵(jian)要(yao)點，小編(bian)通過搜集與整理給大家粗略講(jiang)解一下：

一(yi)、     允許網頁自動(dong)調(diao)整寬度

首先(xian)，在網頁(ye)代(dai)碼的頭部，加入一行viewport元標簽。

———————————————————————————————————————————————————————————————————————————————

< meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width" />

———————————————————————————————————————————————————————————————————————————————

viewport是網(wang)頁(ye)默(mo)認的寬(kuan)(kuan)度和(he)高度，上面(mian)這行(xing)代碼的意思是，網(wang)頁(ye)寬(kuan)(kuan)度默(mo)認等于屏幕(mu)寬(kuan)(kuan)度（width=device-width），原始(shi)縮放比(bi)例（initial-scale=1）為(wei)1.0，即網(wang)頁(ye)初始(shi)大小(xiao)占屏幕(mu)面(mian)積(ji)的100%。

二、不能使用絕對寬度

由于網頁(ye)會根據屏幕寬(kuan)(kuan)(kuan)(kuan)度(du)調整布局，所以(yi)不(bu)能(neng)(neng)使(shi)用絕對寬(kuan)(kuan)(kuan)(kuan)度(du)的(de)布局，也不(bu)能(neng)(neng)使(shi)用具有絕對寬(kuan)(kuan)(kuan)(kuan)度(du)的(de)元(yuan)素。這一(yi)條非常重要。具體說，CSS代(dai)碼不(bu)能(neng)(neng)指定(ding)(ding)像素寬(kuan)(kuan)(kuan)(kuan)度(du)：width:xxx px;只能(neng)(neng)指定(ding)(ding)百分比來定(ding)(ding)義列寬(kuan)(kuan)(kuan)(kuan)度(du)：width: xx%;或(huo)者(zhe)：width:auto;或(huo)者(zhe)：使(shi)用最大(da)寬(kuan)(kuan)(kuan)(kuan)度(du)和最大(da)高度(du)max-width,max-height;

三、流動布局

 "流(liu)動(dong)布局(ju)"的(de)含義(yi)是(shi)，各個區塊的(de)位置都是(shi)浮動(dong)的(de)，不(bu)是(shi)固定(ding)不(bu)變的(de)。

———————————————————————————————————————————————————————————————————————————————

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

———————————————————————————————————————————————————————————————————————————————

float的(de)好處是，如(ru)果(guo)寬度太小，放不(bu)下兩個元素(su)，后面的(de)元素(su)會自動滾動到前面元素(su)的(de)下方(fang)，不(bu)會在(zai)水平方(fang)向overflow（溢出），避免了水平滾動條的(de)出現(xian)。

四(si)、相對(dui)大(da)小的字體(ti)

字(zi)體(ti)也不能使(shi)用絕對(dui)大小（px），而只(zhi)能使(shi)用相對(dui)大小（em）。

———————————————————————————————————————————————————————————————————————————————

body {font: normal 100% Helvetica, Arial, sans-serif;}

———————————————————————————————————————————————————————————————————————————————

上面的(de)(de)代碼指(zhi)定，字體(ti)大(da)(da)小(xiao)是頁(ye)面默(mo)認(ren)大(da)(da)小(xiao)的(de)(de)100%，即(ji)16像素(su)。h1 {font-size: 1.5em;}然后，h1的(de)(de)大(da)(da)小(xiao)是默(mo)認(ren)大(da)(da)小(xiao)的(de)(de)1.5倍(bei)，即(ji)24（24/16=1.5）。small {font-size: 0.875em;}small元素(su)的(de)(de)大(da)(da)小(xiao)是默(mo)認(ren)大(da)(da)小(xiao)的(de)(de)0.875倍(bei)，即(ji)14像素(su)（14/16=0.875）。

五、 自(zi)適應(ying)網頁設(she)計的核心

"自適應(ying)網頁設計"的(de)核心，就是(shi)CSS3引入的(de)MediaQuery模塊。

它的意思就是，自動(dong)探測(ce)屏幕寬度，然后加載相應的CSS文件。

———————————————————————————————————————————————————————————————————————————————

<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />

———————————————————————————————————————————————————————————————————————————————

上面的代碼意(yi)思是，如果屏幕寬(kuan)度(du)小(xiao)于400像素（max-device-width: 400px），就加(jia)載tinyScreen.css文件(jian)。

———————————————————————————————————————————————————————————————————————————————

<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />

———————————————————————————————————————————————————————————————————————————————

如(ru)果屏幕寬度在400像(xiang)素(su)到600像(xiang)素(su)之間，則加(jia)載smallScreen.css文件。

對于剛入門的新人而言，小編可以為大家推薦使用建站寶盒。建站寶盒的全智能化網站建設，讓你感覺做網站是如此的簡單有樂趣！建站寶(bao)盒還有許多版本，自己可以進行版本對比——請點擊//szjicheng.cn/design/box_edition.php?s=hyc

建站寶(bao)盒的優點：

1、H5自適應建站(zhan)，自動縮放全適應

采用HTML5自(zi)適應（Adaptive Web Design）屏(ping)幕寬度(du)設(she)計方式及技(ji)術，自(zi)動識(shi)別屏(ping)幕高寬，在不同(tong)大(da)小終端設(she)備(bei)上自(zi)動縮放到合(he)適尺寸，適應不同(tong)的屏(ping)幕分辨(bian)率。 

2、H5響應式建站，開創跨屏時(shi)代

應(ying)(ying)用HTML5+智(zhi)能(neng)媒體(ti)查詢響應(ying)(ying)式布(bu)局(ju)技術(Responsive Web design)，使(shi)網站隨著(zhu)設備(bei)的(de)改變(bian)(bian)而改變(bian)(bian)展(zhan)示(shi)樣式，不同(tong)(tong)的(de)設備(bei)呈現(xian)不同(tong)(tong)的(de)視覺效(xiao)果(guo)，適(shi)合所有設備(bei)。實(shi)現(xian)“一次(ci)設計，隨“機”應(ying)(ying)變(bian)(bian)”。在(zai)不同(tong)(tong)分辨率(lv)(lv)下(xia)，導航，產品，新聞等(deng)所有模塊都(dou)智(zhi)能(neng)支持(chi)響應(ying)(ying)式效(xiao)果(guo)，如圖中(zhong)在(zai)不同(tong)(tong)的(de)屏幕分辨率(lv)(lv)下(xia)，產品列表通過H5智(zhi)能(neng)調(diao)整布(bu)局(ju)從一排五個(ge)變(bian)(bian)成一排兩個(ge)，讓網站更適(shi)合在(zai)不同(tong)(tong)終端展(zhan)現(xian)，達(da)到(dao)最優效(xiao)果(guo)。

3、多站統(tong)一管理，一次(ci)修(xiu)改全站適應

電腦、平板、手機(ji)、微信、各(ge)種(zhong)語言版本網站能在(zai)一(yi)(yi)個后臺統(tong)一(yi)(yi)修改、管理(li)，各(ge)站之間數據協同，內容實時同步，無(wu)需另外建立多個網站，只(zhi)需一(yi)(yi)站就可以滿足(zu)，節省管理(li)維護成(cheng)本。無(wu)論是訂單，還是產(chan)品，或者是新聞或營(ying)銷(xiao)活動等，都可在(zai)一(yi)(yi)個后臺進行管理(li)添加，添加一(yi)(yi)次，所有終(zhong)端受用，簡單操作，節約(yue)成(cheng)本。

4、全新自由布局，讓網站千變萬化(hua)

可(ke)逐(zhu)個調(diao)整各(ge)模(mo)塊的位置(zhi)及大小，各(ge)模(mo)塊之間(jian)可(ke)以互相重疊，自(zi)由擺放(fang)各(ge)種個性化布局(ju)，像(xiang)(xiang)裝扮QQ空(kong)間(jian)一樣簡單，像(xiang)(xiang)制作PPT一樣靈(ling)活(huo)。在自(zi)由布局(ju)中可(ke)隨意擺放(fang)模(mo)塊，設置(zhi)模(mo)塊大小，位子，內容等，如圖中添(tian)(tian)加(jia)了(le)圖片(pian)、會員、按鈕、文字等多個模(mo)塊。添(tian)(tian)加(jia)了(le)多種模(mo)塊還能自(zi)適(shi)應哦！

5、組合(he)布局新模式(shi)，響應式(shi)建(jian)站(zhan)原來如此簡單(dan)

應(ying)用組(zu)合布局模(mo)式(shi)，實現(xian)傻(sha)瓜(gua)式(shi)編輯，只(zhi)需要替換/添(tian)加模(mo)塊拖入到(dao)組(zu)合布局中，組(zu)合布局中的(de)模(mo)塊將自動(dong)兼容所有終端設備。

 點擊免費注冊體驗建站寶盒的更多優點：//szjicheng.cn/design/free-site.php?s=hyc