隨著互聯網技術的高速發展，HTML5+CSS3已成為目前比較主流的Web前端開發技術，其與以往的HTML+CSS相比，HTML5的新元素、語義化標簽以及屬性，再加上CSS3的豐富的渲染效果，能夠使開發者極為方便、快速、靈活地實現web頁面的前端開發，響應式網站建設有幾個地方需要注意：

開發響應式網站有幾個地方需要注意

第一點：在網頁代碼的頭部，加入一行viewport元標簽.

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

第二點：（注意）不使用絕對寬度，字體大小

width:auto; / width:XX%;
第三點：（注意）字體大小
字體大小是頁面默認大小的100%，即16像素
字體不要使用絕對大小"PX"，要使用相對大小“REM”
html{font-size:62.5%;}
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

下面我們介紹一下html5和css3。

一、 HTML5

HTML5是下一代的HTML。HTML5是開放的Web網絡平臺的奠基石，HTML5的設計目的是為了在移動設備上支持多媒體，其新的語法特征被引進以支持這一點，比如canvas、video和audio標簽。HTML5還引進了最新的功能，能夠改變用戶與文檔的交互方式。HTML5的優點包括：

1. 具有強大的可移植性；

2. 提高了用戶體驗和可用性；

3. HTML5將被大量的應用在游戲和移動應用程序；

4. 對SEO比較友好；

5. 增加的新標簽有助于定義重要內容；

6. 能很好的替代FLASH和Silverlight；

7. 能給站點帶來更多的音頻和視頻等多媒體元素。

二、 CSS3

CSS3是CSS（層疊樣式表）技術的升級版本，CSS演進的一個主要變化就是W3C決定將CSS3分成一系列模塊。CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@FontFace實現定制字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄布局、媒體查詢等。

三、 頁面適應性問題

移動終端與電腦端比較，分辨率和屏幕尺寸都不相同，如果在移動端還是把大屏幕尺寸設計成和電腦端大屏幕尺寸一樣的比如1024像素，字體大小還設計成電腦端的12像素或者14像素，那么就會出錯，因此，在設計移動終端網頁時，最好讓網頁的寬度自適應于屏幕，萬維網聯盟在設計html的時候充分考慮到了這點，我們只需要加上標簽就可以。

四、 圖片適應性問題

圖片分為背景圖片和通過標簽引入的圖片，前者可以通過media query自動的切換不同分辨率的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級地調整大小（也就是在media query切換css的點上可以換一張不同分辨率的圖，但是沒法獲得兩張分辨率中間大小的版本），而且在很多情況下（比如cms中）并不適合用背景圖片。

通過標簽引入的圖片，我們要使用延遲加載圖片的方法來加載圖片，也就是說在實際加載圖片之前，首先要用js檢查當前屏幕的寬度，然后頁面加載不同分辨率的圖片，如屏幕寬度小于等于480，那么就加載80像素寬度的圖片，如屏幕寬度大于480小于等于768，那么就加載120像素的圖片，如果屏幕寬度大于768則加載160像素的圖片，如果屏幕寬度是600像素，那么就需要通過百分比來縮放120像素的圖片來達到合適的效果。這種處理方式對于移動設備來說加載的圖片變小了，網頁瀏覽速度也減小了，但是在豎屏和橫屏的轉換，或者瀏覽器擴大時圖片會由于放大而產生模糊問題，這個問題如果解決呢？我們認為對于圖片的考慮應該從網頁布局設計的開始就應避免圖片在各窗口寬度下的尺寸相差不要太大，要排列更多的內容，而不能通過擴大圖片尺寸來填充由于瀏覽器窗口的擴大而帶來的空間。

例如：移動設備圖片自適應的css代碼：

img{maxwidth：100%；height：auto；width：auto；}

五、 導航適應性問題

導航如何能夠適應屏幕的大小，怎樣適應能夠更簡單是我們研究的一個難點，通過多種方法的對比，我們發現采用jQuery自適應窗口大小設置導航菜單的方式比較簡單。

例如：

.nav{lineheight：50px；background： #0099cc；position： relative；} 
.nav li{float：left；} 
.nav li a{display：block；padding：0 20px；color： #00C；} 
.navspan.navon{display：none；width：20px；position： absolute；top：12px；right：12px；cursor： pointer；} 
@media screen and （maxwidth：768px） 
{
.nav ul{display：none；width：100%；
}

當前標題：基于HTML5+Css3的響應式網站建設開發
文章鏈接：http://m.js-pz168.com/news37/75287.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設、響應式網站等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯