Ich gestalte meine persönliche Website mit HTML/CSS. Der Text lässt sich jedoch nicht auf das Telefon skalieren. Bitte beachten Sie das Bild unten.
Websites sehen auf dem Desktop gut aus, werden aber auf Mobilgeräten nicht gut angezeigt.
Mobile Anzeige
Meine Google Drive-Einbettung passt nicht einmal auf den Bildschirm meines Telefons. Mobiltelefonanzeige GGD PDF eingebettet
Was soll ich tun, um dieses Problem zu lösen? Vielen Dank.
Hier ist mein Code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Hoa Dang">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/projects.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<link rel="shortcut icon" type="image/x-icon" href="EXAMPLE"/>
<link rel="manifest" href="manifest.json">
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
</style>
</head>
<body>
<nav>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul id="nav-ul">
<li class="nav-li">
<a class="nav-link selected">HOME</a>
</li>
<li class="nav-li">
<a class="nav-link">ABOUT</a>
</li>
<li class="nav-li">
<a class="nav-link">CV</a>
</li>
<li class="nav-li">
<a class="nav-link">PROJECTS</a>
</li>
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</nav>
<div id="HOME">
<div class="center">
<h1 id="main-header">EXAMPLE</h1>
<h3 id="sub-header">example.com <span class="green-detail">&</span> example.com</h3>
</div>
</div>
<div id="CV">
<div class="center">
<iframe src="example.com" width="640" height="480" allow="autoplay"></iframe>
</div>
</div>
<div id="PROJECTS" class="center">
<div id="img-container"></div>
</div>
<div id="ABOUT">
<div class="center">
<h2 id="about-header">example.comE<span class="green-detail">:</span></h2>
<p id="about-text">
<br> Text
<br> <br>
</p>
</div>
</div>
<footer>
<ul id="sm-ul">
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-youtube"></i>
</a>
</li>
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</li>
</ul>
</footer>
</body>
</html>
CSS
* { padding: 0; margin: 0; }
:root {
--base-color: #d2dae2;
--secondary-color: #0be811;
}
body {
background-color: #1e272e;
font-family: 'DM Sans', sans-serif;
color: var(--base-color);
overflow: scroll;
}
body::before{
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url("example.com");
background-size: cover;
background-position: top-center;
opacity: 0.2;
filter: blur(7px);
}
nav, footer, #about-text, #contact-container {
width: 100%;
}
nav {
margin-top: -30px;
position: fixed;
top: 0;
text-align: right;
z-index: 2;
}
footer {
position: fixed;
bottom: 0;
padding: 5vh;
}
#about-text, #sub-header {
font-size: 2.3vh;
line-height: 1.6;
font-weight:400;
}
#main-header, #sub-header {
text-align: center;
}
#main-header {
font-size: 8.5vh;
}
#nav-ul {
padding-right: 5vh;
}
#sm-ul, #nav-ul {
list-style-type: none;
}
#about-header {
font-size: 4vh;
font-weight: bold;
}
.center, #contact-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}
.sm-logo {
color: var(--base-color);
font-size: 3vh;
transition: 0.2s ease-in;
}
.sm-logo:hover, .nav-link:hover, .nav-link.selected, .green-detail {
color: var(--secondary-color);
}
.sm-li {
display: inline-block;
margin-left: 5vh;
}
.nav-link {
font-size: 1.8vh;
cursor: pointer;
text-decoration: none;
transition: 0.2s ease-in;
}
.nav-li {
display: inline-block;
margin: 5vh 5vh 0 0;
}
@media screen and (max-width: 650px) {
nav, footer, #nav-top, #nav-ul, .nav-link {
padding: 0;
margin: 0;
}
#sm-ul, #nav-ul {
text-align: center;
}
.sm-li {
margin: 0 2vh 5vh 2vh;
}
.nav-li {
margin: 5vh 2vh 0 2vh;
}
} 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您的网站未按预期在移动设备上显示的原因是您需要更多媒体查询来根据尺寸指定布局和设计。您有一个媒体查询。使用以下媒体查询更改浏览器的大小，并使用代码，使其类似于您的预期结果：
/* Media Queries */ @media (min-width:320px) { /* Vertical Screen Phones */ } @media (min-width:480px) { /* Horizontal/Landscape Screen Phones */ } @media (min-width:600px) { /* Tablets and Vertical iPads */ } @media (min-width:801px) { /* Tablet, Horizontal/Landscape iPads, low-resolution Laptops */ } @media (min-width:1025px) { /* Big Tablets */ } @media (min-width:1281px) { /* Laptops and Desktops */ }此外，我建议坚持使用 rem 或 em 而不是 vh。它的使用更广泛，并且更具可扩展性。