我的网站在其他分辨率下看起来不同[重复]答案

【问题标题】：My website looks different on other resolutions [duplicate]我的网站在其他分辨率下看起来不同[重复]
【发布时间】：2020-03-16 04:43:52
【问题描述】：

所以，我使用 position:absolute 来对齐我网站上的元素，它在其他分辨率上看起来不同。我目前的分辨率是 1920x1080。我有另一个分辨率为 1366x768 的屏幕，它看起来很糟糕。这是我第一次制作合适的网站。有没有其他方法可以对齐元素来避免这种情况？

<html>
    <head>
     <style>
     body{
         background-color:gray;
         overflow:hidden;
         
         width:1366px;
    
    height:768px;
     }
     .logo{
         
     }
     .mountain{
         height:75px;
         position:absolute;
         left:15%;
         top: 2%;
         
     }
     .name{
        font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif"; font-size: 300%; font-style: normal; font-variant: normal; font-weight: 400; line-height: 26.4px;
        position:absolute;
        top: 0%;
        left: 19.5%;
     }
     .navigation{
         position:relative;
         top: 6%;
         left: 50%;
     }
     .f{
         height:30px;
         width: 30px;
         border-style:solid;
         border-radius: 70px;
         border-width: 1.5px;
         border-color: white;
         top:0px;
         position:absolute;
         left:20%;
     }
     .t{
         height:30px;
         width: 30px;
         border-style:solid;
         border-radius: 70px;
         border-width: 1.5px;
         border-color: white;
         top:0px;
         position:absolute;
         left:23%;
     }
     .g{
         height:30px;
         width: 30px;
         border-style:solid;
         border-radius: 70px;
         border-width: 1.5px;
         border-color: white;
         top:0px;
         position:absolute;
         left:26%;
     }
     .social{
         display:inline-flexbox;
         position:relative;
         top: 30px;
         left:1000px;
     }
     .content{
        font-family: monospace; font-size: 500%; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px;        
        color:white;
        position:absolute;
        top: 30%;
        left: 37%;
     }
     .content1{
        font-family: monospace; font-size: 110%; font-style: normal; font-variant: normal; font-weight: 700; line-height: 200%;        
        color:white;
        position:absolute;
        top: 43%;
        left: 24%;

     }
     .button{
         height:50px;
         width:200px;
         border-style: solid;
         border-width: 2px;
         border-radius: 70px;
         border-color:white;
         position:absolute;
         top: 50%;
        left: 42%;
     }

     </style>
    </head>

    <body>
<div class="whole">
    <div class="logo">
     <img class="mountain" src="img/mountain.png">
     <p class="name" style="color:white;">EVEREST</p>
    </div>
    <div class="navigation">
        <a href="" style="text-decoration: none; color:white; margin: 20px 20px 20px 20px">Features</a>
        <a href="" style="text-decoration: none; color:white; margin: 20px 20px 20px 20px">Services</a>
        <a href="" style="text-decoration: none; color:white; margin: 20px 20px 20px 20px">Contact us</a>
    </div>
    <div class="social">
        <div class="f">
            <a href=""><img src="img/f.png" style="height:25px;"> </a> 
        </div>
        <div class="t">
            <a href="">  <img src="img/t.jpg" style="height:25px;"> </a> 
        </div>
        <div class="g"> 
            <a href="">   <img src="img/g.png" style="height:25px;"> </a> 
        </div>
    </div>
    <div class="content">
        <p> Hello World. </p>
    </div>
    <div class="content1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
    <div class="button">
        <a  href="" style="color:white; font-size:20px; position: absolute; top: 15px; left: 30px; text-decoration: none;"> GET STARTED </a>
    </div>
</div>
    </body>
</html>

this is what is looks like on 1366x768

【问题讨论】：

类似：stackoverflow.com/q/36232292/104380
您的问题有很多答案，请检查视口、引导程序和媒体查询
你可以让它 fluid、adaptive 或 responsive，谷歌这些，你会发现知识的海洋
不要在没有relative 的情况下使用absolute :(.
我已经投票结束这个问题，因为它非常模糊 - 关于如何将布局与分辨率分离，有很多答案（真的是建议），而且这个问题假设只有具有屏幕访问权限的人网站等。这个问题没有好的答案，只有意见。事实上，我已经在看下面这些了。

标签： html css

【解决方案1】：

您需要使用Media queries 之类的框架的Bootstrap 使用网格来创建响应式网站。

这里是媒体查询的示例：

@media (min-width: 30em) and (orientation: landscape) { ... }

这里是一个网格 Bootstrap 的示例，显示 3 个与屏幕大小无关的列：

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

【讨论】：