0

我在网站上工作（从 psd。到 HTML/CSS）。

我如何自动将网站与观看我网站的人的分辨率相匹配？

PSD 模板的宽度为 1600 像素，我为 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

我认为最适合这里的答案，并对您的问题进行给定的解释：如何使您的网站适合所有或至少大多数屏幕分辨率？

于 2013-09-27T15:40:53.563 回答
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 回答