我一整天都在努力讓我的網站做出回應。這是它的鏈接。 https://mywebsite.techgurll.repl.co 在小螢屏上看起來不太好。當螢屏尺寸變小時，我在那里的形象不斷溢位容器。這是我的 CSS 代碼的一部分
.img {
display: flex;
flex-direction: row;
height: 50vh;
margin-top: 20vh
}
如果您想查看其他代碼，可以在單擊我的網站鏈接后按檢查。我不想把它都貼在這里，因為它有很多代碼。
uj5u.com熱心網友回復：
從技術上講，您的影像已經具有回應性，因為您使用的是vh單位。但是，vh代表視口高度，這意味著您的影像會回應視口的高度。
如果你想讓它回應寬度，你可以使用vw單位。（與 相同的概念vh，只是使用寬度而不是高度）
另一種創建回應性的簡單方法是使用 CSS 媒體查詢。
@media (max-width: 600px){
body {
background-color: blue;
}
}
當視口小于等于 600 像素時，這將使主體的背景顏色變為藍色。
您可以更改其中的任何 CSS 屬性（影像大小等），但請確保媒體查詢位于 css 檔案中的正常 css 樣式之后。
您還可以查看 CSS Grid Layout，但在這條道路上還有更多的學習曲線。
希望這有助于讓您朝著正確的方向前進。
uj5u.com熱心網友回復：
實際上，您的 css 和 HTML 中存在很多問題，因此我撰寫了您的 css 和 html 的改進版本，并通過使用 flexbox、媒體查詢和 vw 和 vh 等單元使其回應。復制粘貼以下代碼。
索引.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" />
<link rel="stylesheet" href="style.css" />
<title>Landing Page</title>
</head>
<body>
<div>
<ul>
<li><a href="#"><h3>megan's website</h3></a></li>
<li><a href="#"> About</a></li>
<li><a href="#"> Contact</a></li>
<li><a href="#"> Info</a></li>
</ul>
</div>
<div id="header">
<div class="header-content">
<h1>Hi Everyone!<br />My name is Megan. Nice to meet you!</h1>
<p>
<strong
>I am an aspiring Software Developer. I am also a student and I
study Computer Science.<br />
I will be graduating in December of 2022 with my Bachelor's
degree.<br />I hope this website impresses the right employer.<br />
I am creating this website in the hopes to be noticed and land my
dream job.<br />
I am very driven and motivated to learn.This is my passion.<br />
I do not want this job because of money.<br />
I want this job because I want to work in something I enjoy doing
everyday.<br />
That to me is happiness.<br />
I feel it is important to practice every day in order to be the best
you can be.</strong
>
</p>
<button class="button">Sign Up</button>
</div>
<div class="div-img">
<img src="x4yT5As.jpg" class="img" alt="Picture of Megan" />
</div>
</div>
<div id="title"><h2>Projects I have worked on</h2></div>
<hr />
<div class="second-container">
<div class="info">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png"
alt="Python Logo"
height="100"
/>
<div class="text">
Compounding Interest using Loops<br /><a
href="https://github.com/megankeyes/Compounding-Interest-with-Loops"
style="text-decoration: none"
>Python Project</a
>
</div>
</div>
<div class="info">
<img
src="https://www.simplilearn.com/ice9/webinar_thum_image/CPP_Tutorial.jpg"
alt="C Image"
height="100"
/>
<div class="text">
Shopping List Program<br /><a
href="https://github.com/megankeyes/Shopping-List"
style="text-decoration: none"
>C Project</a
>
</div>
</div>
<div class="info">
<img
src="https://miro.medium.com/max/840/1*RJMxLdTHqVBSijKmOO5MAg.jpeg"
alt="Python Image"
height="100"
/>
<div class="text">
BMI Calculator<br /><a
href="https://github.com/megankeyes/BMI-Calculator"
style="text-decoration: none"
>Python Project</a
>
</div>
</div>
<div class="info">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C++_Logo.svg/1200px-ISO_C++_Logo.svg.png"
alt="C Logo"
height="100"
/>
<div class="text">
Dice Game<br /><a
href="https://github.com/megankeyes/Dice-Game"
style="text-decoration: none"
>C Project</a
>
</div>
</div>
</div>
<hr />
<div class="third-container">
<div class="quote">
<p>
<i>Your Future is Created by what you do Today<br />NOT Tomorrow</i>
</p>
<br />
<strong>-Robert Kyosaki</strong>
</div>
</div>
<div class="fourth-container">
<div class="box">
<div class="text-call">
<strong>Check out my GitHub for all of my projects!</strong>
<p></p>
<p>
Head on over to my GitHub by clicking that button right over there!
</p>
<button class="github-btn">
<a
class="call-to-action-button"
href="https://github.com/megankeyes"
>Megan's GitHub</a
>
</button>
</div>
</div>
</div>
<div class="footer">Copyright @ The Odin Project 2021</div>
</body>
</html>
和 style.css：
* {
margin: 0px;
box-sizing: border-box;
}
#header {
display: flex;
align-items: center;
justify-content: space-around;
background-color: darkslategray;
width: 100%;
max-width: 100vw;
}
.img {
width: 100%;
max-width: 280px;
height: auto;
border-radius: 50%;
}
.header-content {
color: white;
padding: 10px;
font-size: 1.5vw;
font-family: Arial, Helvetica, sans-serif;
}
p {
margin-top: 30px;
}
button {
background-color: rgb(107, 192, 226);
outline: none;
border-radius: 10px;
padding: 5px;
border: none;
cursor: pointer;
margin: 10px 0px;
width: 20vw;
}
button:hover {
background-color: cornsilk;
}
h3 {
color: white;
}
ul {
display: flex;
justify-content: flex-end;
list-style: none;
font-weight: bold;
background-color: darkslategray;
color: white;
}
ul li {
padding: 10px 12px;
}
li a {
color: white;
text-decoration: none;
}
a:hover {
color: rgb(107, 192, 226);
}
#title {
text-align: center;
margin: 10px;
}
.second-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
width: 100%;
max-width: 100vw;
height: 95vh;
}
.info {
text-align: center;
}
.third-container {
background-color: rgb(219, 219, 219);
width: 100%;
max-width: 100vw;
height: 70vh;
font-size: xx-large;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.fourth-container {
width: 100%;
max-width: 100vw;
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100%;
max-width: 70vw;
height: 100%;
max-height: 60vh;
background-color: #3882f6;
border-radius: 10px;
padding: 60px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.github-btn {
margin-top: 20px;
color: rgb(107, 192, 226);
}
.github-btn a {
text-decoration: none;
color: white;
}
.github-btn a:hover {
color: rgb(107, 192, 226);
}
.footer {
display: flex;
justify-content: center;
align-items: center;
background-color: darkslategray;
color: white;
height: 10vh;
}
@media only screen and (max-width: 950px) {
.img {
width: 100%;
max-width: 200px;
height: auto;
}
}
@media only screen and (max-width: 750px) {
.img {
width: 100%;
max-width: 170px;
height: auto;
padding-right: 10px;
}
.header-content {
font-size: 1.6vw;
}
}
@media only screen and (max-width: 600px) {
.img {
width: 100%;
max-width: 150px;
height: auto;
padding-right: 20px;
}
.header-content {
font-size: 1.8vw;
}
}
@media only screen and (max-width: 460px) {
.img {
width: 100%;
max-width: 200px;
height: auto;
padding-right: 20px;
}
.header-content {
font-size: 2.2vw;
}
}
@media only screen and (max-width: 400px) {
.img {
width: 100%;
max-width: 300px;
height: auto;
}
.header-content {
font-size: 2.5vw;
}
}
@media only screen and (max-width: 320px) {
.img {
width: 100%;
max-width: 100vw;
height: auto;
}
.header-content {
font-size: 3vw;
}
}
只需閱讀并嘗試了解我所做的改進，并看看我是如何使它具有回應性的。我希望在閱讀本文后，您將了解如何添加回應能力。并根據您的口味進行調整，例如您是否想添加更多 css，如邊框等。享受 :)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386930.html
下一篇：如何在CSS中左對齊列？