0

私はウェブサイト（psdからHTML / CSSまで）に取り組んでいます。

私のウェブサイトを見ている人の解像度にウェブサイトを自動で一致させるにはどうすればよいですか?

PSD テンプレートの幅は 1600px で、HTML にも同じ幅を設定しました。

私の個人的な画面解像度は 1920 x 1080 px で、私のウェブサイトは正しく表示されません。（ブラウザはウェブサイトを私の解像度に引き伸ばしません）

私のHTMLコード:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Szablon HTML5</title>
</head>

<body>
<div id="wrapper">
    <div id="header">
        <div id="logo"></div>
    </div>

    <div id="slider">
        <div id="stripe">pasek</div>
        <div id="mainpic">obrazek
            <div id="podpis">podpis obrazka</div>
        </div>
    </div>

    <div id="content">
        <div id="boxes">
            <div class="box">
                <h2>Perfect Logic</h2>
                <h3>All you want your website to do.</h3>
                <img src="pictures/minibox.png" class="boxPicture">
                <p>Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe</p>
                <img src="pictures/przycisk.png" class="przycisk">
            </div>
            <div class="box">b</div>
            <div id="box_c">c</div>
        </div>
    </div>
    <div id="przerywnik"></div>
    <footer></footer>


</div>

</body>

</html>

私のCSSファイル：

* {
  margin: 0;
  padding: 0;
  background: #ffffff;
  width: 1600px;
  height: auto;
}

#wrapper{
width: 1600px;
height: auto;
}

#header{
height: 137px;
width: 1600px;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}

#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}

#slider{
height: 426px;
z-index: 2;
}

#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}

#mainpic{
position: absolute;
z-index: 3;
width: 940px;
height: 343px;
margin-top:22px;
margin-left: 330px;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}

/* Część z boxami */

#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}

.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}

.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}

.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}

.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;

}

.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}

.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}

#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}

/* Footer */
#przerywnik{
height: 10px;
width: 1600px;
background: #4c4c4c;
}

footer{
height: 173px;
width: 1600px;
background: #333333;

}

どうすればこれを修正できますか?

4

3 に答える 3

2

すべて編集

width:1600px;

あなたのCSSコードで

width:100%;
于 2013-07-05T16:12:59.197 に答える
0

コードでこれを編集します。

* {
  margin: 0;
  padding: 0;
  background: #ffffff;
  width: 1600px;
  height: auto;
}

    #wrapper{
    width: 1600px;
    height: auto;
    }

に：

* {
  margin: 0;
  padding: 0;
  background: #ffffff;
  width: 100%;
  height: auto;
}

#wrapper{
    width: 100%;
    height: auto;
    }

編集：

コードは次のとおりです。

    * {
  margin: 0;
  padding: 0;
  background: #ffffff;
  width: 100%;
  height: auto;
}

#wrapper{
width: 100%;
height: auto;
}

#header{
height: 137px;
width: 100%;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}

#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}

#slider{
height: 426px;
z-index: 2;
}

#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}

#mainpic{
position: absolute;
z-index: 3;
width: 60%;
  min-width:940px;
height: 343px;
margin-top:22px;
  margin-left:-30%;
  left:50%;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}

/* Część z boxami */

#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}

.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}

.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}

.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}

.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;

}

.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}

.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}

#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}

/* Footer */
#przerywnik{
height: 10px;
width: 100%;
background: #4c4c4c;
}

footer{
height: 173px;
width: 100%;
background: #333333;

}
于 2013-07-05T15:30:02.417 に答える
0

あなたの問題に対する説明とともに、ここでの回答に最も適していると思います。すべてまたは少なくともほとんどの画面解像度にWebサイトを合わせる方法は?

于 2013-09-27T15:40:53.563 に答える