HTML5怎么制作響應式網頁

1.調整視口

創新互聯建站專業為企業提供尼河口網站建設、尼河口做網站、尼河口網站設計、尼河口網站制作等企業網站建設、網頁設計與制作、尼河口企業網站模板建站服務，10余年尼河口做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

代碼實例：

!DOCTYPE?html

head

meta?charset="UTF-8"?/

title布局之路-移動端開發實例/title

meta?name="viewport"?content="width=device-width,user-scalable?=?no"?/

link?rel="stylesheet"?type="text/css"?href="css/reset.css"?/

/head

body

div?class="wrap"/div

/body

/html

代碼解析：由于使用不同設備打開網頁時，寬度均有所不同，所以不能講視口設置為固定值，應當為width=device-width,即將視口設置為當前設備的寬度。

2.確定設計圖的最小字體

瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那么在1080px的設計圖中，最小字體應當為42px。

代碼實例：

style?type="text/css"

html?{

font-size:?42px;

}

/style

3.浮動布局

各個區塊都是浮動的，不是固定不變的。為了能自適應各個窗口。

代碼實例：

.main?{

float:?left;

width:?70%;

}

.box?{

float:?left;

width:?60.93%;

font-size:?1.71rem;

text-align:?center;

line-height:?4.64rem;

}

float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。

4.通過媒介查詢，為不同設備加載相應樣式

有條件應用樣式：

style

@media?all?and(min-width:500px){?...?}

@media?(orientation){?...?}

/style

代碼解析：

第一行媒體查詢代碼指的是：為寬度大于等于500px的設備設置樣式。

第二行媒體查詢代碼指的是：為縱屏狀態（可見區域大于或等于寬度）下的移動端設備設置樣式。

有條件的加載樣式表：

head

link?rel="stylesheet"?href="wide.css"?media="screen?and(min-width:1024)"?/

link?rel="stylesheet"?href="mobile.css"?media="screen?and(max-width:320)"?/

/head

代碼解析：

第一行媒體查詢代碼指的是：為寬度大于等于1024px的設備，加載wide.css文件。

第二行媒體查詢代碼指的是：為寬度小于等于320px的設備，加載mobile.css文件。

5.使用百分比和rem替換px

除了布局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。

代碼效果對比：

/*使用固定像素*/

.box?{

float:?left;

width:?658px;

font-size:?72px;

text-align:?center;

line-height:?195px;

}

/*使用百分比和rem*/

.box?{

float:?left;

width:?60.93%;

font-size:?1.71rem;

text-align:?center;

line-height:?4.64rem;

}

代碼解析：

水平方向的值，將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。

例如，父級寬度為1080px， 子級元素為197px，那么子元素轉換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據父級計算，當標簽結構級別不同時，計算公式中的“分母”也有所不同，在開發時這個地方很容易出現問題，請務必注意。

垂直方向的值，將具體像素調整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉換為rem單位，即195/42= 4. 64rem。

html5 css3網站實例教程

html5 和css3 技術是目前整個網頁的基礎。本書共分3 部分，集中討論了html5 和css3 規范及其技術的使用方法。這一版全面講解了最新的html5 和css3 技術，所有實例均使用最新特性實現，針對的是最新版本的瀏覽器。

《html5與css3實例教程》適合所有使用html 和css 的web 開發人員學習參考。

html5學習網站有那些

1. W3Schools（需自備梯子）

W3School是學習HTML5最好的資源之一，它擁有的教程都帶有例子，幾乎可以解決你所需要的所有知識點。如果你想從基礎開始學習HTML5的話，那么這個網站會是一個很好的選擇。你可以學習到HTML5的所有元素，比如標簽、圖像、圖形，以及無需多做其他操作，只需跟隨教程的教書步驟走即可，用簡單的語言解釋和交互讓學習變得簡單。

2. Html Goodies

如果想要觀看HTML5的速成課程，以及獲取學習HTML5的所有性能，那么htmlgoodies會是一個不錯的開始。在網站的左邊部分，你可以看到分類細致的基礎、教程。問答等，你可以任意快速跳轉到自己想要開始學習的部分。

3. HTML5-tutorial（需自備梯子）

HTML5-tutorial可以讓你在短時間內有一個良好的開局，在這里，你可以了解HTML5的基本知識和要點，如何構建一個網站、編輯和調試代碼進行開發學習，很適合初學者入門學習。

4. HTML5 Doctor

HTML5 Doctor網站提供了許多內容不錯的文章，這些文章將會幫你更好的學習和實現HTML5開發。而且，除了這一特色，網站還有一個“Ask the Doctor”部分，在這里，可以向專家提問，通過他們的專業講解解決你遇到的所有問題。

5. Html5 Rocks（需自備梯子）

如果開發人員想要在網站中實現HTML5，并開展HTML5編碼相關的研發，那么要關注Html5 Rocks網站。在這個網站中能夠獲取HTML5的所有功能信息，以及學習如何在網站或應用程序中實現。

6. Alison

Alison是免費學習HTML5的一個很好的在線平臺，上面提供的HTML5課程，讓你逐步去學習設計、構建和推出Web上的頁面。你將獲得高品質的視頻和持續的學習時間，當然也可以按照自己的節奏去安排HTML5的學習。

7. Udacity

這是另一個很好的在線學習平臺，無論你是初學者還是具有中級水平的開發人員，它都為你準備了相應的HTML5畫布（canvas）和游戲開發的課程。有興趣的，不妨一試。

8. thenewboston

在thenewboston你可以找到HTML5免費的視頻課程，這個網站擁有很好的編程視頻課程的合集，比如Adobe、Java和C++。在計算機科學部分你可以找到HTML5編程，可以得到一些HTML5、畫布、視頻播放器的教程，并且還都是免費的。

在線學習HTML5編程的高級教程

通過免費的教程、博客、視頻，我們已經獲得了基礎和全面的HTML5編程知識，那么是時候通過高級的HTML5視頻教程來深入的了解HTML5編程技巧。大量的實踐之后，我發現了這些網站，你可以在HTML5上使用高端編程進行項目、小測驗、應用來學習先進的HTML5。

9. Eduonix

如果不提及學習HTML5這一話題的話，我們真的會錯過Eduonix。這是一個優秀的在線平臺，你可以找到所有Web技術和移動開發技術。Eduonix的HTML5編程項目課程，是開發人員通過10個項目和測試，來提升他們HTML技能的一大資源。

10. Udemy

在這個平臺上，無論你是什么類型的程序員都可以進來學習HTML5及其他一些的編程語言。這里通過互動視頻來學習HTML5，當然學完還有相關認證。在Udemy上你可以找到基于HTML5的項目課程去提高你在Web設計中的技能。你只需在Udemy上注冊并參加注冊課程，就可以享受視頻講座。

11. Webucator

Webucator網站提供現場培訓課程、私人培訓、集體培訓和自學課程，來對你的HTML5技能進行高級訓練。不過你需要去支付一筆較高的費用，但有付出總會有回報的。