手机网站模板如何布局?

2014-08-28 MetInfo

        进入移动互联网时代后,手机网站频频崛起,不过大部分人都不知道手机网站模板如何布局,使得一个能令人满意的手机网站难得一见,大部分手机网站都不符合访客的阅读习惯。经过一段时间收集资料,现在整理出以下手机网站模板布局的方法。

 

1. 自适应布局模式

       在编写CSS时,不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,建议前端工程师使用自适应布局模式(支付宝 采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示,无需再次考虑设备的分辨率。
 
2. 狭窄布局
       在小屏幕上显示大的web页面仍旧需要一些信息视觉处理方法。目前一些浏览器采用狭窄布局作为默认查看模式,因为整个内容的显示窄且长,并且所有内容都做了简化以符合屏幕宽度。狭窄布局的主要好处就是文本容易阅读,如果文本的宽度超过屏幕的宽度,用户的阅读就会很困难。
 
3. 原始布局
       由于狭窄布局存在很多可用性方面的问题,所以很多浏览器还提供原始布局页面模式,让用户根据内容来选择不同的视图模式,原始布局中,大图片细节和表格的效果会更好,同时如果用户知道PC上的网站的结构,那么就很容易找到自己所需要的内容。当然原始布局并非什么问题都没有。最糟糕的就是阅读宽文本内容,会很费力。用户每次都得向前向后拉动滚动条。另外由于页面很大,所以需要滚动的地方也越多。
 
4. 理想布局
       很明显,小屏幕手机上的页面浏览仍需要很多改进和革新。如果想让自己的网站在小屏幕上具有可读性,可以遵守以下三个指导建议:避免那些一眼就能看出来的大物体;避免在图片上使用小文本;页面要轻化。
 
       适当遵循以上四种手机网站布局的方法,再灵活使用自己所学的专业技巧,最后就能制作出一个完美的手机网站。