Question

事实：

我的网站以1024 x 768像素的分辨率创建。
可以以相同的屏幕分辨率查看我的网站。

我的问题：

使用屏幕以800 x 600分辨率查看我的网站是不可行的。

有没有完美或最好的方法来解决这个问题？任何帮助都会很好。

Answer 1

您的问题可能是您编码的方式。以下是一些可能的情况：

1。）您的长度和宽度位置可以是绝对的或固定的。 E.g。

#container position: absolute/*of fixed*/;

2.）用于度量的度量类型是像素而不是百分比（％）。这两者之间有很大的不同：

#container Height: 100px;

和

#container Height: 20%;

3.）您可能正在使用旧版html中不推荐使用的功能，或者您的浏览器不支持新功能。尝试添加modernizr.js。此附加组件将支持您的网站进入旧浏览器

最好使用CSS3 Media Queries将网站优化为所需尺寸。这也可用于支持您的网站进入移动浏览器。

Answer 2

如果您没有根据用户的分辨率获得不同的体验，则不应使用绝对尺寸。在组件上使用相对大小。

液体设计模仿我的建议：http://www.htmlbasictutor.ca/flexible-liquid-design.htm＆amp; http://www.maxdesign.com.au/articles/liquid/

......还有弹性设计：http://alistapart.com/article/elastic

Answer 3

您要找的是CSS media queries，您可以根据屏幕分辨率/可用宽度修改网站的布局。

Answer 4

我建议您像这样设置<body>样式，

body {
    font-size: 13px;                                   /* As per your style */
    font-weight: normal;                               /* As per your style */
    font-family: 'Droid Sans', Arial, Verdana, Tahoma; /* As per your style */
    text-align: left;
    background: #FFF;   
    overflow:auto;
    background:scroll;
    width:1007px;
    max-width:1007px;
    min-width:1007px;
    margin:0 auto;
}

这最适合所有屏幕尺寸分辨率。如果您使用800x600尺寸，它的两侧都会出现滚动条，如果尺寸为1366x768，则中间显示两个尺寸边距自动。

Demo site你检查这是最合适的网站。此页面看起来像报纸类型页面。

你可以检查 ctrl + + （增加）， ctrl + - （减少）和 ctrl + 0 （正常大小）。

调整不同浏览器的屏幕尺寸

4 个答案: