Question

现在，我有一个来自我以前的同事的网站。我遇到了一些关于调整浏览器窗口大小的问题。换句话说，当我调整窗口大小时，我希望我的网站能够很好地调整大小，而不是让按钮，div和其他所有内容重叠并发疯。

这是我的网站。

http://50.62.140.177/foxcode/index.html

我想要做的是类似于http://antobbo.webspace.virginmedia.com/photography/home.htm这样的事情，你可以让窗户缩小，一切都可以调整好。

是否与高度/宽度/填充/边距使用百分比有关？我真的不知道从哪里开始，所以任何有关资源的提示或链接都会很棒。

Answer 1

这就像将html, body设置为auto并添加min-width 960px

一样简单

如下所示：

在你的标题中输入：

<meta name="viewport" content="width=device-width">

在你的css中你做了：

html {
   width: auto !important;
   min-width: 960px; // this depends on the width of your website, the example you provided is 960px
   /*rest of code*/
}

查看所有min-width选项here

希望就是这样。

Answer 2

我可以使用chrome来检查。在chrome中打开您的网站，然后单击F12作为调试器。知道在左下方你有眼镜点击它，然后点击你想要改变大小的位置，在右边你可以改变它，看看你的网络来源有什么附加变化..

Answer 3

添加min-width：768px;两个绿色的div。简单快捷

Answer 4

像其他人说的那样，最小高度和最小宽度。

我还建议您使用不同的技术制作全屏背景图像。调整大小时似乎搞砸了。

尝试使用此功能;

html{
  background: url(images/bg.jpg) no-repeat center center fixed;  
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover;  
}

这是全屏背景的最佳做法。 More info from CSS Tricks

大小和调整浏览器窗口大小的问题

4 个答案: