1. 首頁
  2. 問答
  3. 優化移動景觀視圖網站

優化移動景觀視圖網站

2017-05-11 65 views
0

我正在優化我的移動使用網站。在大多數設備上，縱向視圖是完美的，但是當我選擇橫向視圖時，造型會混亂。優化移動景觀視圖網站

HTML

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="css/style.css" type="text/css"> 
    <title>Get My Look - Home</title> 
</head> 
<body> 
<div id="header"> 
    <ul> 
     <li class="selected"> 
      <a href="index.html">Home</a> 
     </li> 
     <li> 
      <a href="about.html">About</a> 
     </li> 
     <li> 
      <a href="download.html">Download</a> 
     </li> 
     <li> 
      <a href="contact.html">Contact</a> 
     </li> 
    </ul> 
</div> 
<div id="content"> 
<img src="images/logo.png" alt=""> 
</div> 
<div id="footer"> 
    <p> 
     &copy; 2017 - Get My Look 
    </p> 
<div id="links"> 
    <ul> 
     <li> 
     <a href="https://www.facebook.com/getmylookapp/" target="_blank"> 
      <img src="images/facebook.png" alt="" width="64" height="64"> 
      </a> 
     </li> 
     <li> 
     <a href="https://twitter.com/getmylookapp" target="_blank"> 
      <img src="images/twitter.png" alt="" width="64" height="64"> 
      </a> 
     </li> 
     <li> 
     <a href="https://www.instagram.com/getmylookapp/" target="_blank"> 
      <img src="images/instagram.png" alt="" width="64" height="64"> 
      </a> 
     </li> 
     <li> 
     <a href="https://www.snapchat.com/add/getmylookapp" target="_blank"> 
      <img src="images/snapchat.png" alt="" width="64" height="64"> 
      </a> 
     </li> 
    </ul> 
</div> 
</div> 
</body> 
</html>

CSS

body{ 
    background-color: #00B2EE; 
    margin: 0; 
    font-family: "Verdana"; 
} 

#header{ 
    position:absolute; 
    height: 50px; 
    width: 100%; 
    background-color: white; 
} 

#links{ 
    position:absolute; 
    top: -150px; 
    height: 150px; 
    width: 100%; 
    background-color: white; 
} 

#footer{ 
    position:absolute; 
    bottom:0; 
    height: 50px; 
    width: 100%; 
    background-color: black; 
} 

p{ 
    text-align: right; 
    color: white; 
    margin-right: 1%; 
} 

#social{ 
    text-align: center; 
    color: black; 
} 

#header ul li { 
    list-style: none; 
    float: left; 
} 

#header ul li a { 
    color: black; 
    margin: 25px; 
    text-decoration: none; 
} 

#header ul li.selected a { 
    border-bottom: solid 2px #000000; 
    display: inline; 
    padding-bottom: 3px; 
} 

#links ul{ 
    display: flex; 
    justify-content: center; 
    padding-left: 5px; 
} 

#links ul li { 
    list-style: none; 
    float: left; 
    margin: 30px; 
} 

#content{ 
    width: 100%; 
    height: 600px; 
    text-align: center; 
    padding-top: 50px; 
} 

h1{ 
    padding-top: 50px; 
} 

* { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-font-smoothing: antialiased; 
    -moz-font-smoothing: antialiased; 
    -o-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
} 

.container { 
    max-width: 400px; 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    padding-top: 50px; 
} 

#contact input[type="text"], 
#contact input[type="email"], 
#contact textarea, 
#contact button[type="submit"] { 
    font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif; 
} 

#contact { 
    background: #FFF; 
    padding: 25px; 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
} 

#contact h3 { 
    display: block; 
    font-size: 30px; 
    font-weight: 300; 
} 

#contact h4 { 
    margin: 5px 0 15px; 
    display: block; 
    font-size: 13px; 
    font-weight: 400; 
} 

fieldset { 
    border: medium none !important; 
    margin: 0 0 10px; 
    min-width: 100%; 
    padding: 0; 
    width: 100%; 
} 

#contact input[type="text"], 
#contact input[type="email"], 
#contact textarea { 
    width: 100%; 
    border: 1px solid #ccc; 
    background: #FFF; 
    margin: 0 0 5px; 
    padding: 10px; 
} 

#contact input[type="text"]:hover, 
#contact input[type="email"]:hover, 
#contact textarea:hover { 
    -webkit-transition: border-color 0.3s ease-in-out; 
    -moz-transition: border-color 0.3s ease-in-out; 
    transition: border-color 0.3s ease-in-out; 
    border: 1px solid #aaa; 
} 

#contact textarea { 
    height: 100px; 
    max-width: 100%; 
    resize: none; 
} 

#contact button[type="submit"] { 
    cursor: pointer; 
    width: 100%; 
    border: none; 
    background: #00B2EE; 
    color: #FFF; 
    margin: 0 0 5px; 
    padding: 10px; 
    font-size: 15px; 
} 

#contact button[type="submit"]:hover { 
    background: #009ACD; 
    -webkit-transition: background 0.3s ease-in-out; 
    -moz-transition: background 0.3s ease-in-out; 
    transition: background-color 0.3s ease-in-out; 
} 

#contact button[type="submit"]:active { 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); 
} 

.copyright { 
    text-align: center; 
} 

#contact input:focus, 
#contact textarea:focus { 
    outline: 0; 
    border: 1px solid #aaa; 
} 

::-webkit-input-placeholder { 
    color: #888; 
} 

:-moz-placeholder { 
    color: #888; 
} 

::-moz-placeholder { 
    color: #888; 
} 

:-ms-input-placeholder { 
    color: #888; 
} 

media screen and (max-width: 1020px) { 
#header, #content, #footer { 
    float: none; 
    width: auto; 
    }

}

因此，對於每一個訪問具有屏幕尺寸小於1020px站點設備，進行相應的調整。

肖像 enter image description here

景觀 enter image description here enter image description here

什麼CSS做我需要添加到解決此問題。

來源

2017-05-11 Martin Hoban

回答

0

的底部，然後，你可以使用jQuery提供一個動態的高度，你的身體。在景觀設備上的問題是，頁腳是在身體的盡頭，但身高比網頁高度小，這給你這個可怕的設計。

所以，你可以做到這一點

<!DOCTYPE HTML> 
<html> 

<head> 
<meta charset="UTF-8"> 
<link rel="stylesheet" href="css/style.css" type="text/css"> 
<title>Get My Look - Home</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     var h = $(window).height(); 
     $('body').css({ 
      "min-height": h 
     }) 
    }); 
</script> 
</head> 

<body> 
<div id="header"> 
    <ul> 
     <li class="selected"> 
      <a href="index.html">Home</a> 
     </li> 
     <li> 
      <a href="about.html">About</a> 
     </li> 
     <li> 
      <a href="download.html">Download</a> 
     </li> 
     <li> 
      <a href="contact.html">Contact</a> 
     </li> 
    </ul> 
</div> 
<div id="content"> 
    <img src="images/logo.png" alt=""> 
</div> 
<div id="footer"> 
    <p> 
     &copy; 2017 - Get My Look 
    </p> 
    <div id="links"> 
     <ul> 
      <li> 
       <a href="https://www.facebook.com/getmylookapp/" target="_blank"> 
        <img src="images/facebook.png" alt="" width="64" height="64"> 
       </a> 
      </li> 
      <li> 
       <a href="https://twitter.com/getmylookapp" target="_blank"> 
        <img src="images/twitter.png" alt="" width="64" height="64"> 
       </a> 
      </li> 
      <li> 
       <a href="https://www.instagram.com/getmylookapp/" target="_blank"> 
        <img src="images/instagram.png" alt="" width="64" height="64"> 
       </a> 
      </li> 
      <li> 
       <a href="https://www.snapchat.com/add/getmylookapp" target="_blank"> 
        <img src="images/snapchat.png" alt="" width="64" height="64"> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 
</body> 

</html>

來源

2017-05-11 14:43:10

0

你可以這樣做：

@media all and (orientation:landscape) { 
    body { 
     position: relative; 
    } 

    #footer { 
     position: absolute; 
     bottom: 0; 
    } 
}

這樣一來，你的頁腳將永遠留在你的頁面

來源

2017-05-11 13:43:02

+0

的問題仍然存在。這段代碼沒有調整任何東西。 –

+0

它可能會幫助，如果你給其餘的代碼，而不是隻有一行css –

+0

問題更新！ –

相關問題

 相關問題