随着智能手机、平板电脑等移动终端的发展和普及，普通大众对手机网站的认知度得到了明显的提升。H5移动网页设计也越来越火热，本文将简单介绍一下H5移动网页设计注意什么。
一、H5移动网页设计与PC网页设计的区别
安卓，IOS手机系统的逐步发展也带动了手机页面的发展，跟PC网页相比，手机网站和普通网站有两大不同点：
1.访问入口不同。与传统的电脑上网相比，手机上网具有便捷、随时随地的特点。
2.浏览方式不同。由于电脑上的屏幕比手机大很多，普通网站比手机网站拥有更强的展示能力，能在一个网页上占时大量的图片、视频、语音等全方位的信息，但是手机网站由于屏幕尺寸的限制，更多地仅仅是用文字和图片来表现。
H5移动网页设计
二、H5移动网页设计应该注意哪些问题
介于H5移动网页与普通网站的区别，分享一些H5移动端网页设计经验与心得。
⒈分辨率
这应该是移动端网页最关心的问题了，因为移动设备五花八门，各种分辨率都有。要想在这些设备上都能有良好的浏览体验，得花一番功夫。使用viewport：这已经是移动端网页的必备了，它可以设定页面的宽度，是否允许缩放等等。
一般设置width=device-width，就是设置为设备的屏幕宽度，当然也可以是具体数值。百分比与max(min)-width使用：移动端网页不仅分辨率不一，而且随时可以横竖屏切换，所以百分比宽度设定非常必要，再配合max(min)-width限制最大(小)宽度，能有效的适应各种分辨率。
这里的意思就是在大于640px的屏幕宽度下，使用style1样式，也可以写在样式内部，如：
@media screen and (min-width: 640px){.d1{background:#ccc;}}
2.不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。 具体说，CSS代码不能指定像素宽度： width:xxx px;
只能指定百分比宽度： width: xx%或者 width:auto。
3.相对大小的字体
字体也不能使用绝对大小(px)，而只能使用相对大小(em)。
body {font: normal 100% Helvetica, Arial, sans-serif; }
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {font-size: 1.5em;}
然后，h1的大小是默认大小的1.5倍，即24像素(24/16=1.5)。
small { font-size: 0.875em; }
small元素的大小是默认大小的0.875倍，即14像素(14/16=0.875)。
4.流动布局(fluid grid)
"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main { float: right; width: 70%; }
.leftBar { float: left; width: 25%; }
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。
另外，绝对定位(position: absolute)的使用，也要非常小心。
5.图片的自适应
除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码：
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
三、简化H5移动网页设计的步骤
1.从富于变化的界面开始
不要停止在已有的设计上，要有不断变化的交互，这样整个设计的感觉都会不一样。总之，移动设备的使用正在疯长，要意识到移动端已经不是桌面电脑的辅助了。因此需要完全不同的设计思路，不是简单的缩小尺寸而已。
2.微互动
移动体验其实是各种微互动的整合，而且用户需要在很分心的状态下快速的完成各项任务。所以好的.移动设计都要简单而明显，让用户的操作尽量的直觉化
3.突出品牌形象
用户的每次使用都应该能够反映品牌的故事，并加强认同感和忠诚度，所以确定哪些元素能够凸显品牌形象就非常重要了。移动设计师需要充分利用有限的屏幕空间，不断增加品牌的形象。
4.关注内容
用户会在各种环境下使用移动设备，所以任何影响用户交互的因素都非常重要。最好能够知道你的用户是在什么环境中使用移动设备的，不可能对各种环境进行同样的设计，比如添加语音辅助和亮暗变化非常有必要。
5.带感情的设计
因为移动设备更多起网络入口作用，所以使用非常方便，同时对它产生了一种情感，我们很多人甚至睡觉的时候都把手机放在身边。所以使用它是个有情感的过程，好的设计会体现这一点。
以上就是“H5移动网页设计”的全文了，匠人匠心的主营业务包括网站建设，软件开发，小程序开发，SEO优化等，我们会定期更新关于这些内容的文章，如果您对我们的网站感兴趣，欢迎您常来我们的网站。
