使網頁響應所有決議

我有一個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; 
}

來源

2015-06-13 TonalDev

添加meta標籤的設備，你應該在百分比，而不是像素使用bootrap或改變寬度 – vel

您將需要包括各種媒體QUERIES /斷點特定的屏幕尺寸。

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始終是最佳做法和最推薦的選項。

來源

2015-06-13 14:26:20

您可以使用類似這樣

@media (max-width: 1920px) and (min-width: 1080px) { 
    @viewport { 
    //here you can edit your layout for that resolution 
    } 
}

每個分辨率使用內部CSS不同max-width和min-width和不同的設置。

來源

2015-06-13 14:30:15

您可以試試developers.google tutorial，它可以真正瞭解網頁的響應能力。

OR，您可能會爲我們bootstrap這是一個非常好的響應式網頁框架。

來源

2015-06-13 14:47:59

對於使用此設計製作完美的響應頁面，需要對圖像進行更多的切片。

現在，在當前的html頁面中，請嘗試下面的內容。

#content { 
    position: absolute; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    top: 50%; 
}

而且在<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2015-06-13 17:09:03

使網頁響應所有決議

回答

相關問題