Question

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

如何自动匹配网站以及解析观看我网站的用户？

PSD模板的宽度为1600px，我为HTML设置了相同的宽度。

我个人对屏幕的重新解析是1920 x 1080像素，所以我的网站没有正确显示。（浏览器不会将网站拉伸到我的分辨率）

我的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;

}

我如何解决这个问题？

Answer 1

全部修改

width:1600px;

在你的css代码中

width:100%;

Answer 2

在您的代码上对此进行修改：

* {
  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;

}

Answer 3

我认为最适合这里的答案，并对您的问题给出解释：How to fit your website for all or at lest most screen resolutions?

如何将网站拉伸到分辨率屏幕

3 个答案: