网站不适合浏览器窗口

我的网站需要大量的屏幕空间才能有用。工作正常的最小宽度约为1200像素。问题是，当它在较低分辨率的屏幕（iPhone或旧电脑）上打开时，页面无法完全插入屏幕，并且会在左侧切割。网站不适合浏览器窗口

有没有人有一个想法，我可以做，而不是只能滚动？

我使用CSS层整个页面

#page { 
position:absolute; 
left:50%; 
width:1200px; 
margin-left:-600px; 
}

，然后这层我有实际的内容里面：

#content { 
width:1200px; 
text-align: left; 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-size: 14px; 
font-weight: normal; 
color: #aaaaaa; 
clear:both; 
margin-top:40px; 
}

据我了解，大概原因是保证金左： - 600像素设置，但是如何确保整个内容块居中？或者我只需要将其对齐到左侧？

任何帮助将不胜感激！

PS - 该网站是在http://textexture.com，这里是我使用的CSS：http://textexture.com/templates/styles.css

谢谢！

来源

2012-06-27 Dmitry Paranyushkin

而不是使用定义的宽度尝试去％ –

试试这个：

#page { 
    width: 1200px; 
    margin: 0 auto; 
} 

#content { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    font-weight: normal; 
    color: #aaaaaa; 
    clear:both; 
    margin-top:40px; 
}

绝对定位自带的并发症，如果它的实际需要只能一般使用。

另外，它似乎没有理由有单独的#page和#content divs。尝试删除#page和梳理他们：

#content { 
    width: 1200px; 
    margin: 0 auto; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    font-weight: normal; 
    color: #aaaaaa; 
    clear:both; 
    margin-top:40px; 
}

来源

2012-06-27 10:56:59

谢谢，它的工作！ –

不要忘记接受你的问题的正确答案:) –

我做到了）或者我错过了什么？ –

实实在在地，如果你希望用户使用较小的分辨率，能够使用你的网站，你应该做它，所以它工作在较低的分辨率。有几种技术可以做到这一点。你链接的网站看起来很简单，所以改变你的一些样式应该不会太棘手。

你可能想看看响应式网页设计和在CSS中使用媒体查询。

来源

2012-06-27 11:03:24 diggersworld

我同意，有时候网站确实需要一个大的分辨率，这对于观众来说是有意义的。考虑到问题中的链接，我不相信这是其中的一个。该网站可以很容易地设计得更窄，或响应这个答案中的建议。 – Simon

谢谢。但是，如果我想让右侧的图形窗口可伸缩（以及左侧的文本字段），是否可以设置它们可能具有的最小宽度？ –

不确定你的意思，但如果你说你不希望它小于一定的大小，你可以使用CSS规则min-width和min-height。 – diggersworld

你也可以像这样使用％。

#page { 
    width: 100%; 
    margin: 0 auto; 
} 

#content { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    font-weight: normal; 
    color: #aaaaaa; 
    clear:both; 
    margin-top:40px; 
}

来源

2012-06-27 12:58:42

网站不适合浏览器窗口

回答

相关问题