在另一臺計算機上打開網站時，網頁佈局會扭曲嗎？

-1

基本上，當我打開我的網頁在不同的計算機上，我的佈局變得扭曲，有些東西從屏幕上消失，你看不到它。在另一臺計算機上打開網站時，網頁佈局會扭曲嗎？

個人電腦我設計的網站有一個比我的筆記本電腦屏幕更大的屏幕。

但是，當我縮小使用我的筆記本電腦上的網頁瀏覽器縮放功能時，所有東西然後又回到了原地......這是爲什麼？我怎樣才能解決這個問題？

如果是解決方案，我將如何使用媒體查詢？

下面

是代碼：謝謝

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>The Sun</title> 
     <style type="text/css"> 

      * { 
       margin: 0; 
       padding: 0; 
      } 
      body { 
       background-color: #91928C; 
       font-family: 'Titillium Web', Calibri, sans-serif; 
       background-image:url(starfield.jpg); 
       background-size:cover; 


      } 
      .nav-section { 
       width: 100%; 
       padding: 20% 0; 


      } 

      nav ul { 
       position: relative; 
       left: 550px; 
       bottom: 350px; 

       width: 700px; 

       background-color: rgba(255, 255, 255, 0.5); 
       text-align: center; 
       border-radius: 63px; 
      } 
      nav ul li { 
       list-style: none; 
       display: inline-block; 
      } 
      nav ul li a { 
       display: block; 
       text-decoration: none; 
       padding: 40px 60px; 
       font-size: 20px; 
       text-transform: uppercase; 
       font-weight: 300; 
       color: #323642; 
       transition: background-color 0.5s ease; 
      } 
      nav ul li a:hover { 
       background-color: rgba(255, 255, 255, 0.3); 


      } 

      .container { 


       margin-left:auto; 
       margin-right:auto; 



      } 

      .info { 
       position:relative; 
       top: -1800px; 
       left:550px; 
       opacity:1; 
       width:700px; 
       color: #ffffff; 
       } 

      .content { 
       position: relative; 
       bottom: 690px; 
       left: 500px; 
       background-color:#000000; 
       height:1200px; 

       width: 800px; 
       border: 3px solid white; 
       opacity:0.8; 



      } 




      h1 { 
      color:#FFFFFF 
      } 




     </style> 
    </head> 
    <body> 

     <div class="nav-section"> 
      <nav> 
       <ul> 

        <li><a href="EarthProfile.html">Earth Profile</a></li> 
        <li><a href="EarthInfo.html">Info</a></li> 
        <li><a href="EarthVideo.html">video</a></li> 

       </ul> 
      </nav> 
     </div> 



     <div class="container"> 
     <div class="content"> 

     </div> 
     </div> 


     <div class="info"> 




      <center><img src = "earth.gif" height="800" width="700"></center> 
      <br> 
      <br> 

      <hr> </hr> 



      <br> 
      <br> 

      <p></p> 
     </div> 



     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script type="text/javascript"></script> 

    </body> 
</html>

來源

2017-06-09 Azzie

你可以更具體一些，可能包括屏幕截圖或詳細描述什麼「變形」意味着什麼？另外，歡迎<3 –

基本上由變形我的意思是一切都被錯位，所有的divs被放錯地方，它只有縮小後，你可以再次看到他們 – Azzie

OKAYSO，解決你的問題，規定，你要跨平臺不同外觀的，因爲不同的方式，瀏覽器中顯示的各種元素。要建立堅實的基線，請使用CSS Reset。

看看我改變了什麼，這應該足以讓你走向正確的道路。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>The Sun</title> 
     <style type="text/css"> 
      html, body, div, span, applet, object, iframe, 
      h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
      a, abbr, acronym, address, big, cite, code, 
      del, dfn, em, img, ins, kbd, q, s, samp, 
      small, strike, strong, sub, sup, tt, var, 
      b, u, i, center, 
      dl, dt, dd, ol, ul, li, 
      fieldset, form, label, legend, 
      table, caption, tbody, tfoot, thead, tr, th, td, 
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary, 
      time, mark, audio, video { 
       margin: 0; 
       padding: 0; 
       border: 0; 
       font-size: 100%; 
       font: inherit; 
       vertical-align: baseline; 
      } 
      /* HTML5 display-role reset for older browsers */ 
      article, aside, details, figcaption, figure, 
      footer, header, hgroup, menu, nav, section { 
       display: block; 
      } 
      body { 
       line-height: 1; 
      } 
      ol, ul { 
       list-style: none; 
      } 
      blockquote, q { 
       quotes: none; 
      } 
      blockquote:before, blockquote:after, 
      q:before, q:after { 
       content: ''; 
       content: none; 
      } 
      table { 
       border-collapse: collapse; 
       border-spacing: 0; 
      } 

      * { 
       margin: 0; 
       padding: 0; 
      } 
      body { 
       background-color: #91928C; 
       font-family: 'Titillium Web', Calibri, sans-serif; 
       background-image: url(starfield.jpg); 
       background-size: cover; 
       background-position: center center; 
       width: 100vw; 
       height: 100vh; 


      } 
      .nav-section { 
       width: 100%; 
      } 

      nav ul { 
       width: 70%; 
       max-width: 700px; 
       background-color: rgba(255, 255, 255, 0.5); 
       text-align: center; 
       border-radius: 63px; 
       margin: auto; 
      } 
      nav ul li { 
       list-style: none; 
       display: inline-block; 
      } 
      nav ul li a { 
       display: block; 
       text-decoration: none; 
       padding: 40px 60px; 
       font-size: 20px; 
       text-transform: uppercase; 
       font-weight: 300; 
       color: #323642; 
       transition: background-color 0.5s ease; 
      } 
      nav ul li a:hover { 
       background-color: rgba(255, 255, 255, 0.3); 


      } 

      .container { 
       margin-left:auto; 
       margin-right:auto; 
      } 

      .info { 
       opacity: 1; 
       width: 90%; 
       margin: auto; 
       color: #ffffff; 
      } 

      .content { 
       background-color: #000000; 
       height: 1200px; 
       width: 80%; 
       margin: auto; 
       max-width: 1000px; 
       border: 3px solid white; 
       opacity: 0.8; 
      } 

      h1 { 
       color:#FFFFFF 
      } 
     </style> 
    </head> 
    <body> 

     <div class="nav-section"> 
      <nav> 
       <ul> 

        <li><a href="EarthProfile.html">Earth Profile</a></li> 
        <li><a href="EarthInfo.html">Info</a></li> 
        <li><a href="EarthVideo.html">video</a></li> 

       </ul> 
      </nav> 
     </div> 



     <div class="container"> 
      <div class="content"> 
       <div class="info"> 
        <img src = "earth.gif" /> 
        <hr> </hr> 
        <p></p> 
       </div> 
      </div> 
     </div> 



     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script type="text/javascript"></script> 

    </body> 
</html>

你最大的問題是使用「位置」（閱讀它！）和固定尺寸。使用相對於前進的視口或父元素的尺寸。

祝你好運！

來源

2017-06-09 03:15:07

嗨，非常感謝你的回覆。我粘貼了你給我的代碼，但仍然存在問題，例如CSS信息類不在適當的位置 – Azzie

在另一臺計算機上打開網站時，網頁佈局會扭曲嗎？

回答

相關問題