2

我一直在编写我现在正在处理的布局，只使用百分比 (%) 和 edm。即使我不使用像素进行编码，我的布局在我的 1920x1080 计算机上看起来也很混乱。在我的 1280x800 电脑上看起来不错。我还能做些什么来使我的布局在不同的屏幕分辨率下更加用户友好？

1920x1080： http ://a.pictureupload.us/18160038325106dbaecbca8.png

1280x800： http ://a.pictureupload.us/15860427595106dba43723e.png

索引.html：

<div id="blog">
        <h2>Lorem Ipsum</h2>

</div>
<div id="blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tortor
    nec turpis rutrum suscipit eget ut ligula. Curabitur sit amet velit odio,
    id commodo nisl. Morbi non metus risus. Pellentesque vulputate, nisi id
    interdum imperdiet, lectus erat scelerisque risus, sed viverra mi lorem
    a neque. Sed et erat tristique arcu laoreet eleifend. Fusce libero ipsum,
    rhoncus at porta eu, consectetur quis...</div>
<div class="readmore"> <a href="./blog/" title="Read more...">
    <img src="http://a.pictureupload.us/14850301725106d9f0cc927.jpg" /><div class="readtext">
    <p>Read more...</p></a>

</div>
</div>
<img src="http://a.pictureupload.us/4249066075106d9f3bfe03.jpg" class="blogimg" />

样式.css：

 #blog {
    position: relative;
    left: 15%;
    top: 8.000em;
    width: 15.000em;
}
#blog-description {
    position: relative;
    top: 8.300em;
    width: 25.000em;
    left: 16%;
    font-family: District Pro Thin;
    font-size: 1.100em;
}
.blogimg {
    position: relative;
    float: right;
    top: -15px;
    right: 16%;
    width: auto;
    height: auto;
    border: #000 thin solid;
    -moz-box-shadow: 0em 0em 0.375em #000;
    -webkit-box-shadow: 0em 0em 0.375em #000;
    box-shadow: 0em 0em 0.375em #000;
    /* For IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
}
.readmore {
    position: relative;
    float: left;
    top: 140px;
    left: 44.5%;
    width: auto;
    height: auto;
}
.readmore .readtext a {
    font-size: 14px;
    font-family: District Pro Thin;
    text-decoration: none;
    color: #000;
    position:absolute;
    top:10px;
    /* in conjunction with left property, decides the text position */
    left:10px;
}
4

2 回答 2

0

您可以做的一件事是将所有内容放在包装器 div 中，并将其设置为屏幕宽度的某个百分比。这不是一个完美的解决方案，但它确实缩小了您必须填充的屏幕空间 - 对于像您的示例这样的低内容页面特别有用。

<div id="wrap"> ... </div>

#wrap{
  width:80%;
  display:block;
  margin:auto;
}

OOCSS有一些基本的布局和基于百分比的列也可以提供帮助。

于 2013-01-28T20:43:34.327 回答
-1

看看http://goldengridsystem.com/

它是一个简单的网格系统，可让您为所有类型的屏幕和设备构建响应式设计。

于 2013-01-28T20:33:04.227 回答