时间戳

首页 > 解决方案 > 我的网站在其他分辨率下看起来不同

html - 我的网站在其他分辨率下看起来不同

问题描述

所以，我使用 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>

这是 1366x768 上的样子

标签： htmlcss

解决方案

您需要使用诸如使用网格的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>

推荐阅读