我剛開始使用 HTML 和 CSS。我需要幫助。
我想在我的標題中使用影像和文本（標題）。所以我使用了導航欄。
如果我讓我的視窗更小，我希望文本與影像一起移動，但它根本不會移動。我認為這是因為left: 480px;在代碼中，但如果我不使用left: 480px;，它不會出現在影像上。
當我把視窗變小時，有什么辦法可以隨影像一起移動？
窗戶的全尺寸
當我把視窗尺寸變小時它看起來像什么
文本在中間，帶有left:480px;。我希望文本保持在左側。我需要更改或添加代碼中的哪一部分？
.navbar {
display: block;
align-items: flex-start;
padding: 0;
}
.navbar img {
width: 100%;
height: 100px;
display: block;
position: relative;
}
.navbar span {
position: absolute;
z-index: 1;
color: #fff;
width: 200px;
height: 28px;
font-family: NanumGothic;
font-size: 24px;
text-align: left;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 12.8px;
letter-spacing: normal;
top: 50px;
left: 480px;
}<!DOCTYPE html>
<html>
<head>
<title> Change Member Info</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no">
</head>
<body>
<form id="frm" name="frm">
<div class="header">
</div>
<div class="container">
<nav class="navbar">
<div class="navbar__logo">
<img src="/assets/images/[email protected]">
<span>My Website</span>
</div>
</nav>
</div>
</form>
</body>
</html>uj5u.com熱心網友回復：
您可以嘗試兩種方法來使其具有回應性
1. 以百分比形式提供margin-left
.navbar span{
left: 30%
}
就螢屏大小而言，這需要左間距百分比。所以它自動采用
2. 使用媒體查詢
通過使用它，您可以專門為不同的螢屏尺寸設定 CSS
/* Set CSS for Full screen size */
.navbar span{
left: 480px
}
/* On screens that are 992px or less */
@media screen and (max-width: 992px) {
.navbar span{
left: 380px
}
}
/* On screens that are 600px or less */
@media screen and (max-width: 600px) {
.navbar span{
left: 300px
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/479241.html