Question

我正在尝试创建一个最适合最常见屏幕分辨率的网站。我想有一个基本的例子来解决。现在，我正在创建一个导航栏。这是html和css：

 <div   id="menuBar">
    <a href="/"> <img id="lmlogo" src="/img/lmlogo.jpg" /></a>
    <div id="labels">
        <a id="about" href="/about.html">about</a>
        <a id="tour" href="/tour.html">tour</a> 
        <a id="recent_jobs" href="/recent.html">recent jobs</a> 
        <a id="success_stories" href="/stories.html">success stories</a> 
        <a id="contact" href="/contact.html">contact us</a>  
        <a id="blog" href="blog.html">blog</a>      
    </div>
    <img id="linkedinlogo" src="/img/linkedinlogo.jpg" style="" />
 </div>

*------------Menu Bar---------------*/

#lmlogo{
    top:.5em; 
    left:.5em;
    position:relative; 
}
#linkedinlogo{
    top:15px; 
    right:5px;
    position:absolute; 
}
#about{
    position:relative; 

    top:0%;
    text-decoration:none;
    font-weight:600;
    font-size:2em;
    font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
    letter-spacing: -1px;   
    padding-left:.9em;
}

#tour{  
    position:relative;  
    top:0%;
    text-decoration:none;
    font-weight:600;
    font-size:2em;
    font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
    letter-spacing: -1px;   
    padding-left:.9em;
}

#recent_jobs{
    position:relative;  
    top:0%;
    text-decoration:none;
    font-weight:600;
    font-size:2em;
    font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
    letter-spacing: -1px;   
    padding-left:.9em;
}

#success_stories{
    position:relative;  
    top:0%;
    text-decoration:none;
    font-weight:600;
    font-size:2em;
    font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
    letter-spacing: -1px;   
    padding-left:.9em;
}

#contact{
    position:relative;  
    top:0%;
    text-decoration:none;
    font-weight:600;
    font-size:2em;
    font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
    letter-spacing: -1px;   
    padding-left:.9em;
}
#blog{
    position:relative;  
    top:0%;
    text-decoration:none;
    font-weight:600;
    font-size:2em;
    font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
    letter-spacing: -1px;   
    padding-left:.9em;
}

这在我的笔记本电脑上看起来很好（1600X900）但是当我降低分辨率时它看起来不那么好（字体大小不好，间距问题等）如何保持类似的外观，无论分辨率和屏幕尺寸如何？

感谢杰森

Answer 1

使用流体网格作为布局的基础。

http://www.alistapart.com/articles/fluidgrids/

Answer 2

最好的办法是创建一个1024 x 768 resloution的网站然后将div中的所有内容包装在一个显示块的div中：

div#parent{ display: block; }

然后在父母身上添加另一个div winin：

div#child { margin: auto; }

这应该让一切都适合你。

了解更多信息，请参阅此Link

正确调整网站大小

2 个答案: