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怎么制作手机网页设计相关的知识