为什么我的 div 和 img 会随着屏幕分辨率和缩放而变化

问题描述 投票：0回答：1

所以基本上我是 css 和 html 的新手，我使用 rem 单元编写了一个代码，我被告知随着浏览器和屏幕分辨率的缩放而变化我不知道当我上次看到这个文件时发生了什么山，云和 div 背景是完美的对齐现在知道它不对劲了，div 蓝色背景甚至不会触及右边缘，文件中没有任何改变屏幕分辨率和浏览器缩放。div-a 是我在代码中谈论的蓝色背景。

CSS代码

 /*tag type*/
body {
text-align:center;
margin:0;
}
/*margin:0; needs to be declared on the <body> for elements to touch side of browser .
Another words margin:0; needs to be declared in the parent tag of <div> for elements 
to touch side of browser*/
/*---------------class div----------------*/
.div-a {background-color:#EAF6F6;
height: 35rem;
width: 68.95rem;
margin-top:0;
margin-left:0;}

/*width:68.95rem; seems to fit in the hole screen.
margin-left:0; and margin-top:0 needs to be declared in the <div> tag for div to touch the borders*/

.div-b {background-color:#66BFBF;
  height:7rem;}
 

/*---------------------images class----------------------*/
.img-mountain {position:absolute;right:16rem;bottom:1.50rem;}

.img-cloud-a {position:absolute;top:3rem;right:10rem;}

.img-cloud-b {position:absolute;left:10rem;}

.img-moto {padding-top:2rem;
  width: 10rem;
  border-radius:10rem 10rem 10rem 10rem;
  margin:0 auto 0 auto;
}



.computer-a {float:left;
width:10rem;
position:relative;left:11.50rem;
border-radius:10rem 10rem 10rem 10rem;
}

.chillies-a { clear:right;
float:right;
width: 10rem;
border-radius:10rem 10rem 10rem 10rem;
position:relative;right:21rem;}


/*--------------------class headers ------------------- */
.h1-a {color: #66BFBF;
font-family: 'Times New Roman', Times, serif;
margin:0;
padding-top:5rem;
font-size:5rem;
}

.h2-a {color: #66BFBF;

font-weight:normal;
font-family: 'Times New Roman', Times, serif
}

.h2-b {color: #66BFBF;
padding-top:1rem}

.h2-c {color:#66BFBF;
height:7rem;}

.h2-e {color:#66BFBF;}

.h3-a {color:#11999E;
position:relative;right:12rem;}

.h3-b {color:#11999E;
position:relative;right:9.50rem;}

.h3-c {color:#11999E;}

/*-----------------p------------*/
p {color:#40514E;
line-height:2;
}

.p-a {width:27rem;
margin:0 auto 0 auto;}

.p-b {width:27rem;
margin:0 auto 7rem auto;
}

.p-c {width:27rem;
margin:0 auto 0 auto;
position:relative;right:10rem;}

.p-e {color:#EAF6F6;
  position:relative;bottom:2rem;
font-size:.75rem;}
/*font-size:.75rem is perfrct to type copyright text*/


/*------------------extra---------------*/
hr {border-color:#EAF6F6;
border-width:.40rem;
border-style:none;
border-top-style:dotted;
width:3rem;
margin-top:5rem;
margin-bottom:5rem;
/*padding dosent work in <hr>*/
}

.span-a {color: blue;}

/*--------------------<a> tag--------------*/
.linkedin-a {color:#11999E;
margin:1.50rem;
display:inline-block;
text-decoration:none;}


.linkedin-a:hover {color:#eaf6f6;}

.twitter-a {color:#11999E;
  margin:1.50rem;
  display:inline-block;
text-decoration:none;}


.twitter-a:hover { color:#eaf6f6;}

.website-a {color:#11999E;
  margin:1.50rem;
  display:inline-block;
text-decoration:none;}

.website-a:hover {color:#eaf6f6;}

.btn {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    margin-top:5rem;
    margin-bottom:6rem;
    display:inline-block;
    
  }
  
  
 
  .btn:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
  }

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>project 2</title>
    <link rel="stylesheet" href=".\css project 2.css">
    <link rel="icon" href=".\favicon.ico">
</head>
<body>
    <div class="div-a">
        <div>
        <h1 class="h1-a">
        HG
        </h1>
        
        
        <h2 class="h2-a">
            learning to be a  <span class="span-a ">programmer</span>
        </h2>
    </div>
        
        <img  class="img-mountain" src="./CSS - My Site Images\mountain.png" alt="mountain-png">
        <img  class="img-cloud-a" src=".\CSS - My Site Images\cloud.png" alt="cloud-png">
        <img  class="img-cloud-b" src=".\CSS - My Site Images\cloud.png" alt="cloud-png">

    </div> 
        <img class="img-moto" src="./CSS - My Site Images\index.jpg"alt="moto">
    <br>
    
    <h2 class="h2-b">HELLOW</h2>
    
    <br>

    <p class="p-a">Hi i'm a aspiring web developer, app maker , game developer, and stock trader who 
    is looking to better his life 1 day at a time. </p>
    

    <hr>

    <h2 class="h2-c">MY SKILLS</h2>

    <img class="computer-a" src="./CSS - My Site Images\computer.png" alt="computer-png">
    
    <h3 class="h3-a">coding and stocks</h3>
    
    <p class="p-b">I'm currently working on my skills i am trying to learn 
        web developing, app making , game developing, and stocks. </p>

    <img class="chillies-a" src=".\CSS - My Site Images\chillies.png" alt="chillies.png">
        
    <h3 class="h3-b">I dont like spicy food that much</h3>   

    <p class="p-c">I really got a love hate relationship with spicy food I can only tolerated so much.</p>
    <br>

    <hr>

    <h2 class="h2-e">GET IN TOUCH</h2>
    
    <br>

    <h3 class="h3-c">If you feel the same way with spicy food as me</h3>

    <p class="">Then contact me so we can code toghether.</p>

    <a class="btn" href="mailto:[email protected]" >contact me</a>
 
    
    <div class="div-b">
        
       <a class="linkedin-a" href="C:\Users\HG\Desktop\web development udemy course sections\s5 css\section 5\section 5.html">linkedin</a>
       <a class="twitter-a" href="C:\Users\HG\Desktop\web development udemy course sections\s5 css\section 5\section 5.html">twitter</a>
       <a class="website-a" href="C:\Users\HG\Desktop\web development udemy course sections\s5 css\section 5\section 5.html">website</a>
    
       <p class="p-e">@allrights reserved</p>
    </div>

    
</body>
</html>

the div and img that are out of wack

我期望 div 和 img 位于同一位置，因为我使用 rem 单元没想到它会随着屏幕分辨率和浏览器缩放而移动。

html css image resolution zoom-sdk
1个回答
0
投票

您还应该提供您的 html 代码。 无论如何做一个简短的解释我可以建议你阅读关于

responsive designs
和
media queries
有许多网站描述这些主题，例如 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 或https://www.w3schools.com/css/css_rwd_mediaqueries.asp

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.