我对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>
1 回答
慕仙森
TA贡献1827条经验 获得超7个赞
我建议你不要使用固定的元素和固定的比例，将它们替换为CSS。height.curvedimg
添加到CSS，固定高度和替换比例，请看。#avatar.curvedimg
body {
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>
添加回答
举报
0/150
提交
取消