2023-01-22

​移动端网站设计的普遍布局类型

移动端的网站设计是从移动互联网的爆发发展而来的。而说到移动端的网站建设大部分人都会想起弹性盒,不过确实弹性盒在宽度的适配上的确十分出色,但其缺点就是它不能够兼容所有的移动设备,那么如果我们不使用弹性盒,还有哪些布局技巧可以使用呢?


fangan60.png


1、 上下均固定的与中间弹性的网页布局设计

这种布局设计是移动端使用最广泛的网站设计形式,而在生活中我们也经常会看到上下都有导航栏的网页布局设计。

在设计中我们可以把网页的头部与尾部固定在内容区域的上下边缘上,这时候网站的整体内容也是铺满整个屏幕的。而头部与尾部的宽度一定要给出固定值。

2、 左边固定,右边弹性设计

这也是移动端网站设计比较常用的布局方式。

①浮动:网页的左边只需要固定好宽度,然后右边的宽度进行弹性设置,最后把溢出隐藏化设计;

②定位:我们可以通过定位的方式把左边的菜单定位到右侧内容的边框上。

3、 左边与右边均固定,而中间弹性化显示

在移动端的网站设计中,左右固定而中间弹性化设计的方式一般会用到网页的头部菜单显示上。

①浮动:这里就需要注意HTML结构的书写顺序了,需要从左向右书写,最后写中间的内容。

②定位:如果使用定位法来实现这种格局,那么就把左右两边分别固定在内边距上就可以,但一定要记住添加坐标。