1

根据屏幕分辨率调整页面，例如缩放时的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;
}
4

4 回答 4

1

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

<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/

于 2013-08-09T20:58:28.003 回答
0

min-width为你的 body 或你想要的 div使用 CSS 代码。例子：

body
{
    min-width: 1366px;
}

您可以参考此网页以更好地理解上面的代码：MDN 页面

希望这有帮助。

于 2015-02-09T13:03:19.133 回答
0

您可以尝试使用 css 缩放功能或更改单位查看此帖子以获得更多帮助

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

如果您只是想使您的网站在移动设备、平板电脑或台式机上看起来有所不同，那么您最好使用 CSS 中的媒体查询并通过定义的最小设备宽度为每个查询设置样式。

于 2013-08-09T20:59:11.693 回答
0

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

由于没有链接或任何东西可供我们复制问题并确定问题是什么，我的回答主要是推测。

问题的最可能原因是元素的绝对位置和相对位置的混合。当浏览器大小改变/缩放时，相关元素应该改变。绝对定位的元素不会。

那里更容易遵循的指南之一： http ://www.barelyfitz.com/screencast/html-training/css/positioning/

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

于 2013-08-09T21:00:19.623 回答