设计移动端网页的版式主要有哪几种？

移动端设备的屏幕较小，分辨率各异，为了能更好地显示网页的内容，移动端网页必须能够自适应各种不同的分辨率。昆明网络推广小编认为移动端网页的版式与PC端网页有很大区别，主要体现在栅格系统、功能减去、修饰减去和流式布局4个方面。

栅格系统

栅格系统通过一系列的行与列的组合来管理页面布局。栅格系统不仅可以让网页的信息呈现更美观易读、更具可用性，而且还可以使网页更灵活与规范。PC端网页和移动端网页的栅格系统是不同的，如图所示为PC、i Pad和手机三者的栅格模式。

从图中可以看出，手机端的栅格系统中，有5个列宽为68的列、4个宽度为24的列间距，再加上2个宽度为22的页边距，整个页面宽度为480。采用这种模式设计出来的页面更符合移动端网页的页面显示效果，用户的观感会更好。

功能减去

由于移动设备的屏幕较小，一般会减去PC端网页的一些不太重要的功能，并设置相应的链接，使其在其他页面中进行显示。随着屏幕尺寸的不断减小，页面中展现的功能就会相应地减少，浏览页面的方式也由PC端的S型转变为手机端从上往下的浏览方式，这样可以优先展示重要的内容，吸引用户并提升用户的浏览体验。

修饰减去

面对小屏幕，在功能减少的情况下，修饰也必须减少。在PC端中可以显示的加强视觉效果的一些设计，在移动端则要去掉。

一般情况下，PC端的设计除了要满足功能的要求外，还要考虑版面的设计，通过合理的图片和文字版面布局来加强用户的观感。其版面的功能和视图安排一般各占50%左右。但是在手机等移动端，功能和视图的安排要变成功能占80%，视图占20%。

流式布局

PC端页面的布局方式通常是固定的，这种固定式布局在转向移动端时，因为屏幕的变化就会出现每个板块虽然上面很整齐，但是下面出现了镂空的现象，这样会使视觉效果不美观。

转换为流式布局后，则会根据屏幕的大小自动调整布局结构，因为流式布局是以百分比进行设置的，非常灵活，且出现空余的部分会自动填充，这就使得网页布局更加紧凑，浏览效果也更好。

更多关于网站建设的经验和技巧，欢迎与昆明网络推广小编交流，竭诚服务！