h5怎麼製作手機網頁設計_怎麼製作html5網站頁面讓它適應電腦和手機的尺寸

1、h5可以製作網站頁面尺寸怎麼定

因為要考慮到現在的大部分手機屏幕，更偏向於是全面屏或者是曲面屏幕，或者像iphonex這樣的大屏手機，所以H5面的製作。必須要有一個規范，現在推薦的尺寸是844X1496PX這個尺寸，在意派Epub360中，是有一個規范的，可以去看一下.

2、如何用ppt思維，做一個手機h5動效頁面

HTML5頁面製作工具，大體分為兩類：基於HTML5的網站工具和手機APP工具（當然還有一些其他的，例如基於微信公眾號的等，下面也會介紹）。

先總的說一下個人感受

1.基於HTML5的工具網站：功能較強大，單頁面的操作性較強，可完成各種頁面交互效果；但是某些時候會有操作「失靈」的現象，如上傳圖片失敗，點擊保存失敗，生成失敗等。原因你懂得~
2.手機工具APP：相比起工具網站來講，顯得比較順手，有大量模板套用，製作簡單快捷；但是拘泥於現有的模板，使得單頁面不會有較大的可操作空間，從而無法實現DIY交互效果。

下面展開說下每個使用過的工具吧

基於HTML5的工具網站：

【兔展】
優點：頁面DIY程度較高，動效實現起來也簡易方便，可製作比較任性的H5頁面。
缺點：屏幕界面大小不可調節，上傳的圖會比例失調；生成後到各尺寸屏上頁面會存在拉伸現象。
（此圖意在說明上傳的圖片的尺寸都是網站自己默認的一個尺寸，不是圖片本身的尺寸，不利於使用者調整）

【MAKA.im】可以具體編輯，單頁操作性較高，有新手（有模板）和高階（無模板）兩種編輯模式；翻頁效果比兔展多，模板也更強大一些。

【居高互動刊】
優點：最簡單易上手的工具之一，根據提示一步一步的添加，共4步，最後生成微雜志。相比其他在線工具，較穩定。
缺點：目前沒試通製作單頁上的交互效果，沒找到開啟pro功能的入口。

【ANIMATRON】
優點：像flash的在線版，功能強大，可以創建HTML5動畫。適合有動畫基礎的人做演示製作。
缺點：需要動畫製作基礎；工作界面響應時間長；貌似只能分享到twitter、Facebook、google+、tumblr？

【iSpring 7】
噱頭是PPT轉HTML5工具，完美與PPT兼容，可製作Html5移動課件。
不過，目前我只能連著VPN再用Safari才能打開網站鏈接。

【秀製作】
優點：版式輕松，製作快捷，寬頻穩定。
缺點：對圖片和文字在各種屏幕上的顯示沒有做很好的適配；不能對模板中文字的編輯調整位置。

手機工具APP：

【初頁】
優點：模板質量高，套用模板編輯時效率高，操作簡單快捷，效果和體驗在製作H5頁面的APP工具裡面算是出類拔萃。
缺點：單頁面可操作性較低，僅支持套用模板。

【快邀約】快速製作邀請函
優點：易上手，省時高效，便於統計。
缺點：頁面簡陋，只能選擇固有模板創建文字和添加圖片。

【易企秀】中小微企業的移動場景營銷管家
優點：套用模板，創建快捷，用來做企業介紹、產品推薦。擁有強大的推廣統計、客戶管理功能。嗯，這里應該贊一個。
缺點：只能用模板，DIY程度低；統計數據是否准確需要進一步確認，目前看來可能有遺漏數據的現象（在小范圍測試中，統計到的數量小於應有的數量）。

【微貼】：通過微信公眾號創建H5頁面
優點：手機公眾號內直接創建簡單頁面，根據提示創建即可，無腦方便快捷。
缺點：只是單頁面展示，承載不了交互效果等特效和更多內容。

總結

工具網站做的H5頁面，多注重單獨頁面的自定義交互方案，DIY程度高，相對來說用時較長，又受制於帶寬因素，故影響操作；
工具APP做的H5頁面，多注重效率，目前都是套用模板，因而對單頁面的DIY程度較低，交互效果受限。

3、怎麼製作html5網站頁面讓它適應電腦和手機的尺寸

媒體查詢語法：
@media screen and (max-width:960px){...}
@media screen and (max-width:768px){...}
@media screen and (max-width:320px){...}
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px),projection" href="800wide-portrait-screen.css" />
注意：1，媒體查詢之間使用逗號隔開；2，在projection之後，沒有and，也沒有任何特性/值的組合。沒有後續表達式，意味著只要是projection就滿足條件。
@media screen and (max-device-width:400px){......}
@import url("~~.css") screen and (max-width:360px);
（@import方法會增加http請求，影響載入速度。）
媒體查詢能檢測的特性（最長用過的是設備的視口寬度(width)和屏幕寬度(device-width)）：
widht：視口寬度
height：視口高度
device-width：渲染表面的寬度（設備屏幕的寬度）
device-height：渲染表面的高度（設備屏幕的高度）
orientation：檢查設備處於橫向還是縱向。
aspect-ratio：基於視口寬度和高度的寬高比。(16:9的顯示屏可以定義為aspect-ratio:16/9)
device-aspect-ratio:和aspect-ratio類似，基於設備渲染平面寬度和高度的寬高比。
color：每種顏色的位數。例：min-color：16會檢測設備是否擁有16位顏色。
color-index：色板的顏色索引表中的顏色數。值必須是非負數。
monochrom：檢測單色幀緩沖區中每像素所使用的位數。值必須是非負整數。
resolution：用來檢測屏幕或列印機的解析度，如min-resolution：300dpi。還可以接受每厘米像素點數的度量值，如min-resolution：118dpcm。
scan：電視機的掃描方式，值可設為progressive（逐行掃描）或interlace（隔行掃描）。如720p p表示逐行掃描。
grid：用來檢測輸出設備是網格設備還是點陣圖設備。
在上述所有特性中，除scan和grid之外，都可以使用min和max前綴來創建一個查詢范圍。例如：
@import url("~~.css") screen and (min-width:200px) and (max-width:360px);這樣~~.css只會引入視口寬度介於200px至360px的顯示屏設備。
在樣式表的開頭位置設置樣式，以便適應所有涉及，然後使用媒體查詢來進一步重寫響應的部分。例如，先針對大視口設計(用戶大多數情況下使用滑鼠)，將導航鏈接設計成簡單的文字鏈接；然後再針對較小的視口，使用媒體查詢重寫這部分樣式，為拇指一族提供更大點擊區域。
使用多個獨立的文件會增加http請求數量，建議在已有的樣式表中追加媒體查詢樣式。（https://github.com/scottjehl/Respond）是為IE8及更低版本增加媒體查詢支持的最快的js工具。
阻止移動瀏覽器自動調整頁面大小：
在html的<head>中插入一個<meta>標簽。<meta>標簽中可以設置具體的寬度(如px)或者縮放比例(如2.0 設備實際尺寸的兩倍)。例如：<meta name="viewport" content="initial-scale=2.0,width=device-width">
<meta>標簽還可以控制頁面可縮放的范圍，下面的代碼允許用戶將頁面最多放大至設備寬度的3倍，最小壓縮至設備寬度的一半。<meta name="viewport" content="width=device-width,maximum-scale=3,minimum-scale=0.5">
還可以禁止用戶縮放，不過縮放是一個重要的輔助功能，所以很少禁用。<meta name="viewport" content="initial-scale=1.0,user-scalable=no"> user-scalable=no即禁止縮放。
w3c正嘗試使用@viewport聲明，不用在<head>中添加<meta>，不過要使用私有前綴，如@-o-viewport{width:320px}
針對不同視口寬度修正設計：
首先在css中為平板設備增加媒體查詢，數值ipad的視口寬度為768px（橫向1024px）
@media screen and (max-width:768px){
#wrapper{
widht:768px;
}
#header,#footer,#nav {
width:748px;
}
}
=============================這只是一部分筆記===========
推薦一本書響應式Web設計：HTML5和CSS3實戰.pdf

4、怎樣做出H5響應式網頁設計

15響應式網頁設計是需要js的支撐了。首先你要熟練使用js,才能學會作出響應式的網頁。如果不會的話，建議你先去使用響應式的網站模板，先去下載幾個響應式網頁模板，根據這個模板查看他的源碼。慢慢的自己就可以設計出這個響應式網頁模板。像這類模板下載的網站有很多。比如開創著素材、單張素材。

5、dreamweaver能製作手機網頁嗎，就是製作wap網頁

dreamweaver能夠製作手機網頁的。

其實和pc端的網頁差不多，只是不支持js代碼。然後網頁大小控制在400px左右。太大了不能完全展現。也可以設置為100%,按比例來做。這樣能手機整屏顯示。

添加一下這個代碼吧，表示你的網頁不能放大，只能按1：1顯示

不會因為放大顯示而，導致你的網頁錯位

注意字體大小要稍微大一點。多用色塊來展現。

這個是一個案例，只是一部分截圖。

你可以多參考別人的設計

6、怎麼製作一個H5響應式網站

網路建設公司很多，沒有具體的衡量標準的。但是可以從幾方面去選擇：
1、有做了很多精明案例的
2、案例都是可以驗證方法的
3、只做網路建設的，沒有做其他的
4、做的比較久的。

7、html5做手機app和做手機網頁一樣嗎

不一樣，需增加自適應標簽來保持一樣。

代碼如下：

解釋：Viewport指用戶網頁的可視區域，content中的「width」指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。

(7)h5怎麼製作手機網頁設計擴展資料：

HTML5的事件屬性和異常處理

事件屬性

HTML 5 元素可擁有事件屬性，這些屬性在瀏覽器中觸發行為，比如當用戶單擊一個HTML 5元素時啟動一段 JavaScript。下面列出的事件屬性，可以把它們插入 HTML 標簽來定義事件行為。

HTML 5 中的新事件屬性：

onabort， onbeforeunload， oncontextmenu， ondrag， ondragend， ondragenter， ondragleave， ondragover， ondragstart， ondrop， onerror， onmessage， onmousewheel， onresize， onscroll， onunload。

8、如何用html編寫一個簡單的網頁

HTML源碼如下：

<!DOCTYPE html>

<html>

<head>

</head>

<h5>hello word</h5>

</select>

我們愛祖國！！我們愛祖國！

</div>

</body>

</html>

效果預覽圖瀏覽器顯示：

(8)h5怎麼製作手機網頁設計擴展資料：

HTML超級文本標記語言文檔製作不是很復雜，但功能強大，支持不同數據格式的文件鑲入，這也是萬維網（WWW）盛行的原因之一，其主要特點如下：

1、簡易性：超級文本標記語言版本升級採用超集方式，從而更加靈活方便。

2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言採取子類元素的方式，為系統擴展帶來保證。

3、平台無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平台上，這也是萬維網（WWW）盛行的另一個原因。

4、通用性：另外，HTML是網路的通用語言,一種簡單、通用的全置標記語言。它允許網頁製作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什麼類型的電腦或瀏覽器。

導航:首頁 > 萬維百科 > h5怎麼製作手機網頁設計

h5怎麼製作手機網頁設計

與h5怎麼製作手機網頁設計相關的知識