html5怎么制作一個響應式網(wǎng)頁？

HTML5 制作響應式網(wǎng)頁，首先需要考慮是全平臺適配還是只是移動端適配。這里以移動端響應式網(wǎng)站為例，講述如何制作響應式網(wǎng)頁。

創(chuàng)新互聯(lián)建站長期為上千多家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為普洱企業(yè)提供專業(yè)的成都網(wǎng)站建設、成都網(wǎng)站設計，普洱網(wǎng)站改版等技術(shù)服務。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

1、選定基本設計尺寸，一般以1080為基準。確定響應式web設計的應用場景之后，和美工（或設計師）溝通，之前，一般需要美工出幾套主流移動設備屏幕分辨率的設計圖，現(xiàn)在，使用流式布局以及rem等可以使用一套設計圖，以最常用的移動設備屏幕分辨率為基準。

2、當美工完成設計圖之后，前端工程師的工作就開始了。這時你就可以使用PS或是FW進行切圖了。一般說來，F(xiàn)ireworks cs6切圖更快，但是Fireworks有時會有圖片失真的情況發(fā)生，所以，有時需要使用PS進行配合，PS有切片工具可以專門用來切圖。

具體代碼：

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

};

H5頁面怎么制作？？

可以挑選專業(yè)的h5制作工具來制作h5頁面。

不同于簡單替換圖片文字，專業(yè)的h5頁面制作工具有豐富的交互功能可供使用，制作出來的h5頁面更酷炫和豐富，使用戶印象深刻，比較知名的工具有：epub360等。

通常我們所說的H5就是H5廣告，大多是在微信上宣傳營銷使用的，而HTML5是第五代HTML的標準，可以說，H5都是基于 HTML5 實現(xiàn)的，包括目前我們看到的大部分網(wǎng)頁，基本上所有H5都遵循HTML5這個規(guī)范，不然就會出現(xiàn)問題。

它是一種基于互聯(lián)網(wǎng)的網(wǎng)頁編程語言，而手機端廣告只不過是其中的一個點。2007年W3C（萬維網(wǎng)聯(lián)盟）立項HTML5，直至2014年10月底，在經(jīng)歷了各種被實驗，被拋棄，被甩，被各家大佬當皮球踢來踢去之后，html5的規(guī)范終于正式定稿了！

如何用HTML5制作網(wǎng)頁

現(xiàn)在以HBuilder工具編寫為例：

1. 打開此工具，在項目管理器中右鍵單擊創(chuàng)建一個web 項目

2.右鍵單擊項目名稱，新建一個HTML文件----form01.html

!DOCTYPE html

!--

作者：offline

時間：2017-01-06

描述：form表單

在form標簽中，有兩個經(jīng)常使用的屬性

action：表單提交服務器地址

method: 表單提交的方法/方式----get/post

其他提交方式---put delete

提交方式----get（默認的提交方式）

1.請求的參數(shù)放到地址欄中

2.不安全

3.存在緩存

4.傳輸數(shù)據(jù)的大小收到限制

提交方式----post

1.請求的參數(shù)放到http協(xié)議中

2.相對安全---賬號密碼等信息不會放到地址欄中

3.沒有緩存

4.傳輸數(shù)據(jù)的大小限制較小

修改成post之后，可能會出現(xiàn)錯誤信息。

input標簽：定義輸入字段，用戶可在其中輸入數(shù)據(jù)。

屬性：

type 指示 input標簽的類型，默認的是text

按鈕類型： 普通按鈕 button 重置按鈕 Reset? 提交按鈕 submit

value 定義要顯示的文本。

--

html

head

meta charset="utf-8"

titleform表單1/title

/head

body

form action="" method="post"

?? ?input type="text" name="username" value="zhangsan" /

?? ?input type="submit" value="提交" /

/form

/body

/html

3.查看此網(wǎng)頁是不是HTML5，主要看表頭

4.HTML5新增了很多新內(nèi)容，具體可以查看API，例如：在網(wǎng)頁中嵌套音頻/視頻文件的格式