我听说你应该使用em而不是像素来定义样式表中的大小和距离.所以问题是为什么在css中定义样式时我应该使用em而不是px?有一个很好的例子可以说明这一点吗?
如何调整大小,以便在调整图像大小时,文本在调整大小时相对于图像保持在相同位置。这是当前正在发生的事情:
全萤幕检视:
调整大小:
缩小图像后,文本不会停留在同一位置。调整图像大小时,如何使文本停留在相同的位置(在指向它的线下)?
相关代码:HTML:
<div id="BG1">
<div id="BG2">
<div id="slide1">
<p1>Choose<br>
your<br>
Route</p1>
<p2 id="Tongariro">Tongariro</p2>
<img src="img/NZ6.png" id="NZi2" >
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
* {
margin:0;
padding: 0;
}
slide1, #slide2{ width: 100%; }
#slide1{
height: 600px;
margin: 0;
padding: 200px 0 260px 0;
}
#BG1{
background: url("../img/IMG_3708.jpg");
background-size: cover;
}
#BG2{
background-color: rgba(103, 128, 159,0.79);
}
#Tongariro{
position: relative;
top:27%;
left:34%;
font-size:40px;
}
#NZi{
width:35%;
display:block;
clear:both;
margin: 0;
position: absolute;
z-index: 0;
top: 55%;
left: 60%;
transform: …Run Code Online (Sandbox Code Playgroud)