自適應網站設計中的關鍵要點

時間: 2016-11-28 11:59:11 點擊數: 33730 來源: 耐思智慧

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

網站模版

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

一、允許網頁自動調整寬度

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

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

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

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。

二、不能使用絕對寬度

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

三、流動布局

"流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。

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

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

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

四、相對大小的字體

字體也不能使用絕對大小（px），而只能使用相對大小（em）。

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

上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。h1 {font-size: 1.5em;}然后，h1的大小是默認大小的1.5倍，即24（24/16=1.5）。small {font-size: 0.875em;}small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。

五、自適應網頁設計的核心

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

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

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

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

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

建站寶盒的優點：

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

采用HTML5自適應（Adaptive Web Design）屏幕寬度設計方式及技術，自動識別屏幕高寬，在不同大小終端設備上自動縮放到合適尺寸，適應不同的屏幕分辨率。

自適應網站

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

應用HTML5+智能媒體查詢響應式布局技術(Responsive Web design)，使網站隨著設備的改變而改變展示樣式，不同的設備呈現不同的視覺效果，適合所有設備。實現“一次設計，隨“機”應變”。在不同分辨率下，導航，產品，新聞等所有模塊都智能支持響應式效果，如圖中在不同的屏幕分辨率下，產品列表通過H5智能調整布局從一排五個變成一排兩個，讓網站更適合在不同終端展現，達到最優效果。

自適應網站