h5移动端页面怎么根据设计稿布局

 　　在移动端上，视觉线索是重要的组成部分，因为屏幕的局限性，我们需要清晰地告诉用户应该如何操作，应该浏览，哪些控件可以操作，甚至哪些操作可能会带来在哪些结果。所以，这里一定会涉及到信息的视觉化，所以这些视觉线索的设计应当遵循一定的规则

　　在小屏幕上，千万不要试图在一个界面上承载过多类型的内容，对于用户而言是极大的负担。将每一屏都视作一个单独的容器，每个容器承载不同的内容，切换界面，呈现不同的内容。当内容足够引人入胜的时候，用户会不自觉的滑动，切换，干净整洁、组织完善的布局则确保了整体体验的一致和便捷性。同时，界面的UI元素靠的太近，或者过小了会让手指粗壮的用户非常难于操作。从某种意义上来说，巨屏手机的出现和这种体验诉求不无关系。确保每个元素周围保留足够的空间和间隙，不仅仅方便用户点击，而且能够消除误触的情况。

　　最后与所有设计一样，记得保持所有的元素看起来一致，交互和运作方式也应当统一。一致的设计让用户能够更快适应产品，统一的设计让用户对于不同的界面有了预期。也许比起我们熟悉的电脑端网站的设计，移动端会更加精细些，需要我们发挥极致的追求细节精神。

　　H5布局如何下手？

　　所谓H5布局，说简单点，就是用H5特有的新标签（语义化）来替代传统布局方式。几点注意如下：

　　1）css写法不变，比如你定义标签，那css里就要这样写header{}。另外，H5标签也是可以加class或id的，css写法没啥区别，比如，.样式名{}#样式名{}；

　　2）移动端网站H5标签（包括css3）是支持的，放心大胆去弄，不要去考虑狗屁的兼容。如果是单纯PC网站，建议传统div方式布局比较合适；

　　3）响应式网站，技术强迫症，必须要用H5来做，那html5shiv.js或modernizr.js是不错的IE兼容解决方案。（比如李勇的小拼sem博客）。注意：ie8以下是没办法的，可以页面顶部弹出提醒升级你的IE，算友好体验的一部分吧。

　　H5移动端布局需要注意的一些细节：

　　⒈分辨率

　　这应该是移动端网页最关心的问题了，因为移动设备五花八门，各种分辨率都有。要想在这些设备上都能有良好的浏览体验，得花一番功夫。使用viewport：这已经是移动端网页的必备了，它可以设定页面的宽度，是否允许缩放等等。

　　一般设置width=device-width，就是设置为设备的屏幕宽度，当然也可以是具体数值。百分比与max(min)-width使用：移动端网页不仅分辨率不一，而且随时可以横竖屏切换，所以百分比宽度设定非常必要，再配合max(min)-width限制最大(小)宽度，能有效的适应各种分辨率。

　　这里的意思就是在大于640px的屏幕宽度下，使用style1样式，也可以写在样式内部，如：

　　@mediascreenand(min-width:640px){.d1{background:#ccc;}}

　　2.不使用绝对宽度

　　由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxxpx;

　　只能指定百分比宽度：width:xx%或者width:auto。

　　3.相对大小的字体

　　字体也不能使用绝对大小(px)，而只能使用相对大小(em)。

　　body{font:normal100%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.流动布局(fluidgrid)

　　"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

　　.main{float:right;width:70%;}

　　.leftBar{float:left;width:25%;}

　　float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。

　　另外，绝对定位(position:absolute)的使用，也要非常小心。

　　4.图片的自适应

　　除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。

　　这只要一行CSS代码：

　　img{max-width:100%;}

　　这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

　　img,object{max-width:100%;}

　　老版本的IE不支持max-width，所以只好写成：

　　img{width:100%;}

　　此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

　　img{-ms-interpolation-mode:bicubic;}

　　或者，EthanMarcotte的imgSizer.js。

　　addLoadEvent(function(){

　　varimgs=document.getElementById("content").getElementsByTagName("img");

　　imgSizer.collate(imgs);

　　});