放大时css布局会失真

css layout get distorted when zoom in

本文关键字：失真 布局 css 放大      更新时间：2023-09-26

页面根据屏幕分辨率进行调整，如stackoverflow 缩放和css布局在放大时会出现失真的问题。我是css新手，我面临的第一个非常大的问题是，当我放大或缩小页面时会出现失真。我想做一些事情，比如我的页面适合每个决议。请给我这样的解决方案，我可以应用于整个页面，包括正文和页脚

HTML:

<div class="wrap">
    <div id="head">
        <div id="head_back">
        <b id="logo">LOGO</b>
        <div id="nav">
            <b>2000</b>
            <b>2001</b>
            <b>2002</b>
            <b>2004</b>
        </div>
        </div>
    </div>
</div>

CSS:

.wrapper{width:100%; background-color:red; overflow:auto; margin:0; padding:0;}
#head
{
    width:100%; height:100px; 
    color:#902df3;
    position:relative;
    top:-10px;
    left:-7.8px;
    font-family:"Arial Black", Gadget, sans-serif;
    padding-right:17px;
}
#head #head_back
{
    position:absolute;
    line-height:90px;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background:#999; background-size:cover; background-repeat:no-repeat; 
}
#head #logo
{
    font-size:46px;
    position:absolute;  
}
#head #nav
{
    font-size:26px;
    position:absolute;
    left:60%;   
}
body html
{
position: fixed;
width: 100%;
overflow:scroll;
}

首先，您应该有一个视口元标记：

<meta name="viewport" content="width=device-width, initial scale=1.0"/>

然后您可以使用媒体查询：

@media only screen and (max-width: 320px) {
  ...
}

查看此媒体查询资源：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

您可以尝试破坏css缩放功能或更改您的单位。有关的更多帮助，请参阅本文

如何使用CSS缩放整个网页？

如果你只是想让你的网站在手机、平板电脑或台式机上看起来与众不同，你最好使用CSS中的媒体查询，并根据定义的最小设备宽度对每个查询进行样式设置。

CSS定位是我最不喜欢的网页设计方面之一。不幸的是，它也恰好相当重要。

由于没有任何联系或任何东西可以让我们复制这个问题并确定问题是什么，我的答案将主要是猜测。

最有可能导致问题的原因是元素的绝对和相对定位相混合。当浏览器大小发生更改/缩放时，相对元素应发生更改。绝对定位的元素不会。

其中一个更容易遵循的指南：http://www.barelyfitz.com/screencast/html-training/css/positioning/

我还建议安装Firefox插件"Web Developer"answers"Firebug"。这些工具将允许您动态修改css设置，以测试实际可能导致问题的原因。

为您的身体或您想要的div使用CSS代码min-width。示例：

body
{
    min-width: 1366px;
}

你可以参考这个网页来更好地理解上面的代码：MDN页面

希望这能有所帮助。

相关文章：