今天写页面遇到一个缩放布局失效问题,没当回事,刚才写页面又出现这个问题,今天必须解决冲!!!

首先,这是我完成的的简单导航栏界面:

在这里插入图片描述

当我缩放后,问题出现了:

在这里插入图片描述 看了超多大神的解释,但是好复杂,所以就采取了最简单的一种方法:设置版心
版心:版心就是页面最主要部分,简单来说就是从上往下一竖列,看界面板块主要集中位置,从头到尾就是版心。

问题解决方法: 就是在页面开始前在css最前列设置一个固定的宽度,如:

.w{
      width:1200px;
      margin:0 auto;//如果有版心位于中间位置的,可以设置margin
    }

<div class="header clearfix w"> //在父元素中提及,以防忘记设置版心,最好在放在css首行。
</div> 

解决后如图:
在这里插入图片描述可以自由缩放啦,这个方法有没有弊端还没发现,踩过坑的帮忙解答一下啊,求求大佬了。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐