如何使我的png图像和文本容器响应不同尺寸的屏幕？
我对Web开发作为一种爱好是全新的。
我为我的投资组合网站创建了一个登录页面，用于将来的项目。不幸的是，它在我的笔记本电脑和手机上看起来与在我的台式机上看起来不同。https://frscott.github.io
看起来浅蓝色容器是响应式的，但不是我的白色文本或png图像。
代码如下：
body {
margin: 0;
}
.background {
background-color: white;
}
.center {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.curved {
position: relatve;
background: #62b1ff;
height: 42vh;
border-bottom-left-radius: 50% 0%;
border-bottom-right-radius: 50% 0%;
}
.heading {
position: relative;
margin-top: 2px;
margin-bottom: 0;
font-family: 'Open Sans', sans-serif;
font-size: 50px;
font-weight: 600;
color: white;
text-align: center;
}
.buttonContainer {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
}
button {
background-color: gray;
border: 2px solid gray;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size: large;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: white;
color: rgb(53, 53, 53);
}
.a {
color: rgb(53, 53, 53);
}
.a:hover {
background-color: lawngreen;
}
.b {
color: rgb(53, 53, 53);
}
.b:hover {
background-color: rgb(253, 123, 188);
}
.c {
color: rgb(53, 53, 53);
}
.c:hover {
background-color: yellow;
}
.text {
margin-top: 5px;
}
.paragraph {
font-family: 'DM Mono', monospace;
font-size: x-large;
font-weight: 600;
color: rgb(53, 53, 53);
text-align: center;
line-height: 3;
}
.footer {
margin-top: 50px;
font-family: 'DM Mono', monospace;
font-size: x-large;
font-weight: 600;
color: rgb(53, 53, 53);
text-align: center;
}
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300&family=Open+Sans:wght@600&family=Squada+One&display=swap" rel="stylesheet">
</head>
慕姐42086261回答
-
慕仙森
我建议你不要使用固定的元素和固定的比例，将它们替换为CSS。height.curvedimg添加到CSS，固定高度和替换比例，请看。#avatar.curvedimgbody { margin:0;}.background { background-color: white;}.center { display: block; margin-left: auto; margin-right: auto;}.curved { position: relative; background: #62b1ff; border-bottom-left-radius: 50% 0%; border-bottom-right-radius: 50% 0%;}#avatar { max-width: 300px; width: 30vw; /* will add a little responsivness to an image */}.heading { margin-top: 2px; margin-bottom: 0; font-family: 'Open Sans', sans-serif; font-size: 5vw; /* now the h1 will be more flexible */ font-weight: 600; color: white; text-align: center;}.buttonContainer { margin-top: 30px; display: flex; align-items: center; justify-content: center;}button { background-color: gray; border: 2px solid gray; color: white; padding: 16px 32px; text-align: center; text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: large; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; border-radius: 4px;}button:hover { background-color: white; color: rgb(53, 53, 53);}.a { color: rgb(53, 53, 53);}.a:hover { background-color: lawngreen;}.b { color: rgb(53, 53, 53);}.b:hover { background-color: rgb(253, 123, 188);}.c { color: rgb(53, 53, 53);}.c:hover { background-color: yellow;}.text { margin-top: 5px;}.paragraph { font-family: 'DM Mono', monospace; font-size: x-large; font-weight: 600; color: rgb(53, 53, 53); text-align: center; line-height: 3;}.footer { margin-top: 50px; font-family: 'DM Mono', monospace; font-size: x-large; font-weight: 600; color: rgb(53, 53, 53); text-align: center;}<!DOCTYPE html><html dir="ltr"> <head> <meta charset="utf-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300&family=Open+Sans:wght@600&family=Squada+One&display=swap" rel="stylesheet"> </head> <body class="background"> <section class="curved"> <img id="avatar" class="center" src="https://frscott.github.io/avataaars.png" alt="Avatar Head"> <h1 class="center heading">Hello, I am Scott Franz.</h1> </section> <div class="buttonContainer"> <button onclick="document.getElementById('avatar').src='https://frscott.github.io/beard.png'">Current Facial Hair Status</button> </div> <section class= "text"> <div class="paragraph"> <p>I manage, <u><a class="a" href="https://www.google.com">visualize</a></u>, and <u><a class="b" href="https://www.google.com">analyze</a></u> data.<br> I create <u><a class="c" href="https://www.google.com">websites</a></u> and <u><a class="a" href="https://www.google.com">applications</a></u> for fun. <br> I write <u><a class="b" href="https://www.google.com">visual-essays</a></u> that explore interesting <u><a class="c" href="https://www.google.com">topics</a></u>. <br> I am keen on <u><a class="a" href="https://www.google.com">collaboration</a></u> and/or <u><a class="b" href="https://www.google.com">freelance work</a></u>. </p> </div> <div class="footer"> <p> <strong><u><a class="a" href="https://www.google.com">email</a></u> | <u><a class="b" href="https://www.google.com">github</a></u> | <u><a class="c" href="https://www.google.com">observable</a></u></strong> </p> </div> </section> </body></html>
随时随地看视频慕课网APP
相关分类
JavaScript