简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Mon site Web s'affiche correctement sur un ordinateur de bureau mais pas sur un écran mobile
P粉827121558
P粉827121558 2024-03-30 15:09:41
0
1
359

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;
    }
}

P粉827121558
P粉827121558

répondre à tous(1)
P粉647504283
P粉6475042832024-03-31 00:51:36 1 plancher

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.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！