2

パーセント (%) と edm のみを使用して、現在取り組んでいるレイアウトをコーディングしています。私はピクセルを使ってコーディングしていませんが、私のレイアウトは 1920x1080 のコンピューターではめちゃくちゃに見えます。私の 1280x800 のコンピューターでは問題なく表示されます。さまざまな画面解像度でレイアウトをより使いやすくするには、他に何ができるでしょうか?

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

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

index.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

できることの 1 つは、すべてをラッパー 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 に答える