所以我在Photoshop中设计了我的网站，现在尝试对其进行编码。我无法尝试制作“最新游戏”和“最受欢迎游戏”以及下面的图像，在不同的屏幕尺寸上能够看起来相同。我试过学习一点响应式设计，但我遇到了麻烦。任何人都可以帮助甚至只是建议一些事情。 这是我的Photoshop设计：https://gyazo.com/82446b1cb2abc56fd5c08cd8e8df75fb
这是我的代码：
HTML
<html>
<head>
<meta charset="utf-8">
<!-- Set the title -->
<title>Home</title>
<link href="css/main.css" type="text/css" rel="stylesheet">
<img class="top" src="images/Top.png" alt="Home"/>
<div class="header">
<!--style="width: 110px; height: 25;"-->
<!--<h1 align="center">Welcome To</h1> -->
<img id="logo" src="images/Home.png" alt="Logo" />
</div>
<div class="newgame">
<h1>NEWEST GAME</h1>
<img src="images/GameHere.png" alt="Game" />
</div>
<div class="most">
<h1>MOST PLAYED</h1>
<img src="images/GameHere.png" alt="Game" />
</div>
</head>
<body>
<!-- The navigation bar is created here -->
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<!-- The news update feed -->
<div class="blogs">
<!-- The title of the post -->
<h1>Welcome To My</h1>
<h3><b>TITLE HEADING</b></h3>
<h5>Title description, <span class="w3-opacity">April 7, 2014</span></h5>
</div>
<!-- The post itself -->
<div class="post">
<p>This is just some random text about random stuff how this works. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<span>© Test</span>
</footer>
</body>
</html>
我的CSS
body {
/*background-image: url(../images/home.jpg);*/
/*background-repeat: no-repeat;*/
/*background-size: cover;*/
padding: 0px;
margin: 0px;
text-align: center;
background-color: lightgrey;
font-size: 16px;
}
img {
max-width: 100%;
}
.header {
color: orange;
font-size: 1.87em;
font-weight: 100;
line-height: 0.625em;
margin: 0px;
background-size: cover;
margin-top: inherit;
}
.top {
width: 800px;
height: 240px;
margin: 0px;
}
/* Centering the logo */
.header img {
display: block;
margin:auto;
width: 400px;
height: 90px;
padding: 0;
position: absolute;
left: 550px;
top: 100px;
}
/* Newst Game */
.newgame h1 {
font: bold 100px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #ffffff;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
position: absolute;
left: 10px;
top: 0px;
font-size: 2.813em;
margin: 0px;
}
.newgame img {
position: absolute;
left: 2%;
top: 70px;
width: 300px;
height: 200px;
}
/* Most Played */
.most h1{
font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
position: absolute;
left: 1500px;
left: 78%;
top: 0px;
font-size: 2.8em;
margin: 0px;
}
.most img {
position: absolute;
left: 78%;
top: 70px;
width: 300px;
height: 200px;
}
/* Navigation bar */
.nav {
/*width: 510px;*/
margin: auto;
list-style: none;
display: table;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: : 1px solid blue;*/
/* This is the color of the nav bar */
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
margin: 0px;
float: left;
}
.nav a {
display: block;
/* The text color */
color: black;
/* Sets the text to be centered in the box*/
text-align: center;
/* The width of each element */
width: 150px;
/* How the text is positioned in the columns*/
padding: 20px 10px 20px 10px;
/* The font size*/
font-size: 1.5em;
/* This removes the underline remove the text */
text-decoration: none;
}
/* Change the color of links on hover */
.nav li a:hover:not(.active) {
background-color: orange;
}
/* Change the color of the link that is active */
.active {
background-color: darkorange;
}
/*The News Feed*/
.blogs {
margin: 20px auto;
border: 2px solid #000000;
background-color: #00B3FF;
padding: 0px 5px 5px 10px;
width: 70%;
width: 800px;
}
.blogs h1 {
font-family: 'Handlee', cursive;
font-size: 1.8em;
color: black;
text-align: center;
padding: 0px;
margin: 0px;
}
.info ul {
/* Removes the dots form the list */
list-style-type: none;
padding-left: 0.1em;
}
/*
.info li {
Put the text on one line
float: left;
text-align: center;
display: block;
}
*/
/* Info is that date */
.info p {
display: inline;
font-size: 0.93em;
text-align: justify;
font-style: normal;
font-weight: 200;
line-height: 1.1em;
margin: 0px;
}
.post p {
padding: 0;
margin: 0;
margin-bottom: 10px;
border-radius: 10px;
text-align: left;
}
.blogs {
padding: 5px;
margin-bottom: 10px;
border-radius: 10px;
}
答案 0 :(得分：1)
将此添加到您的css：
img {
display: block;
max-width: 100%;
height: auto;
}
这基本上是Bootstrap的.img-responsive类，如果您使用Bootstrap，请在图片中添加.img-responsive类。
答案 1 :(得分：0)
您可以进行媒体查询。有了它，您可以在某些屏幕宽度和高度处发射某些css-sytles。
例如：
@media(max-width: 768px){
.newgame img {
width: 150px;
height: 100px;
}
}
此外，您应该以百分比编码大多数属性，而不是使用像素（例如宽度：50％;而不是宽度：300px;）。但我认为开发响应网站的最佳方法是使用Bootstrap。