网站不适合给定的屏幕宽度

Question

I'm developing my first web application using Google App Engine. 我正在使用Google App Engine开发我的第一个Web应用程序。 Now, while the core backend program is working and ready, I'm having some trouble working with the UI of the website. 现在，虽然核心后端程序正在运行并准备就绪，但我在使用网站的UI时遇到了一些麻烦。 Now, the width of my website is extending beyond the given screen, which I do not want. 现在，我的网站的宽度超出了我不想要的给定屏幕。

You can see the live version of the site here: 您可以在此处查看该网站的实时版本：

http://deploymentapp.appspot.com/ http://deploymentapp.appspot.com/

Now, the site is still under development, please pardon my terrible try at web designing for now. 现在，该网站仍在开发中，请原谅我对网页设计的可怕尝试。

As can be seen from the site, the width of the whole site is extending beyond the screen width. 从站点可以看出，整个站点的宽度超出了屏幕宽度。

Here's the HTML code: 这是HTML代码：

<html>
<head>
<title>Live Quora Feed</title>
<style type = "text/css">
*
{
    margin:0px;
    padding:0px;
}

body
{
    width:100%;
    background-image: url("http://www.bluelinerny.com/wp-content/uploads/2011/03/quora_illustration_1.jpg");
    background-position: top center;
    background-repeat:no-repeat;
}

input.button {
width:40px;
position:absolute;
right:20px;
bottom:20px;
background:#09C;
color:#fff;
font-family: Tahoma, Geneva, sans-serif;
height:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background:#fff;
color:#09C;
}
orm has no structure, no color, and no personality. We can change that with a little bit of code. First, we are going to style the form tag itself.


form    {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin:auto;
position:relative;
width:550px;
height:450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

input    {
width:375px;
display:block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0.1, 0.3);
}

#form
{
position:relative;
left:730px;
top:300px;
}
</style>

</head>
<body bgcolor = "black">
<div id = "form">
<form method = "post">
<div>

<label>
<span>Enter your query</span><input id="name" type="text" name="rssquery" />
</label>
<input type="submit" value="Submit Form" />
</div>
<div class="text">
    <p>This is some demonstration text</p>
    <p>This is some more wonderful text</p>
  </div>
</div>
</form>    
</body>
</html>

Also, I have copied most of the CSS from another source. 另外，我从其他来源复制了大部分CSS。

How can resolve this problem? 怎么解决这个问题？

Answer 1

You need to turn your css to be responsive . 您需要将您的CSS转为响应。
Instead of using px in #form , just use % like this: 而不是在#form中使用px ，只需像这样使用％：

#form {
  margin-top:300px;

  margin-left:55%;
}

There is a nicer way to have the same result. 有一种更好的方法可以获得相同的结果。 It's to float the form to the right and set a margin-right. 将表单浮动到右侧并设置右边距。

#form {
  float:right;
  margin-right:15%

  margin-top:300px;
}

Behind responsive there is much more then this, if you want to read more start from this link: http://learn.shayhowe.com/advanced-html-css/responsive-web-design 如果你想从这个链接开始阅读更多内容，那么在响应的背后还有更多内容： http ： //learn.shayhowe.com/advanced-html-css/responsive-web-design

Answer 2

Your problem lies in #form . 你的问题在于#form 。

Your left won't always be the right amount. 你的left并不总是合适的数量。

You need to use % instead of px. 您需要使用％而不是px。

This is called responsive web design. 这称为响应式网页设计。

If you want it non-obstructing the quora logo, I seem to have fixed it by changing left to 50% 如果你想要它不妨碍quora标志，我似乎通过改变左边50％来修复它

网站不适合给定的屏幕宽度

问题描述

2 个解决方案

解决方案1
1 2014-01-05 18:15:59

解决方案2
1 已采纳 2014-01-05 18:20:50

网站不适合给定的屏幕宽度

问题描述

2 个解决方案

解决方案1 1 2014-01-05 18:15:59

解决方案2 1 已采纳 2014-01-05 18:20:50

解决方案1
1 2014-01-05 18:15:59

解决方案2
1 已采纳 2014-01-05 18:20:50