Je conçois mon site Web personnel en utilisant HTML/CSS. Mais le texte ne s'adapte pas au téléphone. Veuillez vous référer à l'image ci-dessous.
Les sites Web sont superbes sur ordinateur, mais ne s'affichent pas bien sur les appareils mobiles.
Affichage mobile
Mon intégration Google Drive ne tient même pas sur l'écran de mon téléphone. Affichage du téléphone portable GGD PDF intégré
Que dois-je faire pour résoudre ce problème ? Merci beaucoup.
Voici mon 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 front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
La raison pour laquelle votre site Web ne s'affiche pas comme prévu sur les appareils mobiles est que vous avez besoin de davantage de requêtes multimédias pour spécifier la mise en page et le design en fonction des dimensions. Vous avez une requête médiatique. Utilisez la requête multimédia suivante pour modifier la taille du navigateur et utilisez le code pour qu'il ressemble au résultat attendu :
/* 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 */ }De plus, je recommande de s'en tenir à rem ou em au lieu de vh. Il est plus largement utilisé et plus évolutif.