界面缩小后，全屏下设置的排版出现偏移

最新推荐文章于 2025-04-17 15:37:04 发布

原创最新推荐文章于 2025-04-17 15:37:04 发布 · 932 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

页面布局专栏收录该内容

5 篇文章

订阅专栏

本文探讨了网页在缩放时布局出现偏移的问题，主要表现为全屏模式下布局正常，但缩小窗口时排版混乱。作者通过设置body样式，尝试使用min-width和overflow-x属性来解决这个问题，期望在界面缩小到一定程度时出现滚动条，保持原有布局不变。然而，实际效果并不理想，布局仍然会受到影响。文章中提出了对于网页响应式设计的思考，并分享了个人的理解和解决方案。

盒子布局在全屏模式下排版完好，但是当界面缩小时，就会出现偏移，导致最初的排版都出现问题

我的最初界面放大情况下：在这里插入图片描述
我的最初界面缩小情况下：

排版会随着缩小界面的大小进行移动，但实际状态下是不应该出现这样的状况，实际状态应该是底部添加了滚动条，然后看不见的排版与原先全屏时的布局相同，例如：
如图，头部与导航栏右边部分应该是看不见的；
有这个效果我是在我的网页body中添加了样式

    min-width: 1200px;

body{
    width: 95%;
    position: absolute;
    left: auto ;
    top: 0px;
    /*缩小界面不变，变滚动条*/
    min-width: 1200px;
    overflow-x: auto;
    margin: auto;
    /*max-width:100%;*/
}