我有webpage，其形式和背景图片都很简单。
页面对不同的屏幕分辨率反应不佳，即无响应。
以下是查看问题的页面的Screenfly
如何让这个网页响应并适合所有屏幕？
HTML：
<!DOCTYPE html>
<html>
<head>
<title>
yes Landing Page
</title>
<link href="styles.css" type="text/css" rel="stylesheet"/>
<link href="form/stylesform.css" type="text/css" rel="stylesheet"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<div id="content">
<img id="shadow" src="images/shadow.png"/>
<div id="bg"><img id="bg2" src="images/bgBig.png"/></div>
<div id="ul1">
<img src="images/join.png"/>
<!--<img id="shadow" src="shadow.png"/>-->
<form name="contactform" class="contact_form" method="post" name="contact_form" action="contactengine.php">
<ul>
<li>
<label for="name"></label>
<input type="text" name="Name" placeholder="name" required />
</li>
</ul>
<ul class="telephone">
<li class="telephone">
<label class="telephone" for="telephone"></label>
<input type="text" name="Tel" class="telephone" placeholder="phone" required />
</li>
</ul>
<button id="send "type="submit" name="submit1"><img src="images/submit.png"></button>
</form>
</div>
</div>
</body>
</html>
CSS：
body {
margin: 0;
width: 100%;
overflow: hidden;
}
#content{
}
#shadow {
float: left;
position: relative;
width: 1920px;
height: 397px;
margin-top: 803px;
margin-left: 0;
z-index: 11;
}
#bg {
float: left;
position: relative;
width: 1920px;
height: 841px;
margin-top: 0;
margin-left: -1920px;
z-index: 1;
background-color: #2f3a42;
background-image: -moz-linear-gradient(top, rgba(28,40,46,1) 0%, rgba(113,127,141,1) 100%),-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(28,40,46,1)), color-stop(100%,rgba(113,127,141,1))),-webkit-linear-gradient(top, rgba(28,40,46,1) 0%,rgba(113,127,141,1) 100%),-ms-linear-gradient(top, rgba(28,40,46,1) 0%,rgba(113,127,141,1) 100%),linear-gradient(to bottom, rgba(28,40,46,1) 0%,rgba(113,127,141,1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF1C282E',endColorstr='#FF717F8D',GradientType=0)";
}
#form {
float: left;
position: relative;
width: 591px;
height: 323px;
margin-top: 473px;
margin-left: -1562px;
z-index: 41;
}
#ul1 {
float: left;
position: relative;
width: 238px;
margin-top: 487px;
margin-left: -1342px;
z-index: 45;
min-height: 50px;
}
答案 0 :(得分：1)
您需要为特定的屏幕尺寸添加各种MEDIA QUERIES / BREAK-POINTS 。
E.g。 -
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
您可以根据需要添加任意数量的屏幕尺寸。有关详细信息，请参阅 - http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
虽然您可以在没有它的情况下管理网页的响应性，但使用Media Queries or Break-Points始终是最佳做法和最推荐的选项。
答案 1 :(得分：0)
你可以使用这样的东西
@media (max-width: 1920px) and (min-width: 1080px) {
@viewport {
//here you can edit your layout for that resolution
}
}
使用不同的max-width和min-width以及css内的不同设置。
答案 2 :(得分：0)
您可以尝试developers.google tutorial，它可以很好地了解网页响应。
OR， 您可以bootstrap这是一个非常好的框架，用于制作响应式网页。
答案 3 :(得分：0)
为了使用这种设计制作完美的响应页面，需要对图像进行更多切片。
目前，使用当前的html页面，请尝试以下内容。
#content {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
还为<head>
<meta name="viewport" content="width=device-width, initial-scale=1">