简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Wo soll ich anfangen, diese Seite responsive zu machen?
P粉477369269
P粉477369269 2024-04-04 21:21:25
0
1
528

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css\home.css">
    <title>Welcome</title>
</head>
<body>
    <nav>
        <div class="nav-brand">
            <img  src="\images\Yummy Cookies-logos_black.png" alt="">
        </div>
        <ol>
            <li><a href="">Home</a></li>
            <li><a href="">Our Journey</a></li>
            <li><a href="">Place Your Order</a></li>
            <li><a href="">About</a></li>

        </ol>
    </nav>
    <section class="video-greeting">
        
        <video autoplay loop muted src="videos\pexels-olya-kobruseva-5264841.mp4"> </video>
        
       <a href="">Place Your Order</a>



        
       
        
    </section>

    <section class="cookie-tab">
        <img class="first-image"width=300px src="images\delish-ms-fields-cookies-024-1544735513.jpg" alt="">
        <p class="first-lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur mollitia, voluptates laudantium adipisci deserunt consequuntur sequi assumenda veritatis quaerat id asperiores saepe est. Unde magnam dolores rem, neque tempora perspiciatis.</p>
        
       
        <p class="second-lorem">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea, quibusdam est facere, alias rem perferendis animi, architecto nobis at iste aliquam quis adipisci error? Itaque porro quam odit est laboriosam obcaecati soluta sapiente earum quas rerum, tempora magni excepturi maiores saepe aperiam ipsum eaque quasi libero vero corrupti dolorum dolor! Vero magni recusandae cum nesciunt aliquam quo debitis placeat eos reprehenderit harum repellendus, dolore rerum doloribus, accusamus, aliquid corporis laborum praesentium molestias neque porro magnam. Quam corrupti delectus provident cum vitae sed earum nihil nemo. Cupiditate ab, voluptate aspernatur ullam libero dolorum animi qui nisi eaque impedit, a tempora veniam.</p>
         <img class="second-image"width=300px src="\images\soft-sugar-cookies-5.jpg" alt="">
    </section>

    
    
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');


body{
    font-family: 'Cookie', cursive;
    margin: 0px;
    box-sizing: border-box;
}

/* navbar ________________ */
nav{

    background-color: pink;
    position: fixed;
    z-index: 12;
    width: 100%;
    top: 0px;
    display: flex;
    justify-content: space-between;
    max-height: 120px;

    
    
    



}

.nav-brand{

width: 100px;
display: inline-block;
}

.nav-brand img{
    width: 100%;
    
}

nav ol{

    display: flex;
    gap: 5px;

    
   
    margin-right: 20px











}

nav li{
    display: inline-block;
    list-style: none;
    
    

    
    

    
    
}

nav li a{
    display: inline-block;
    text-decoration: none;
    color: black;
    font-size: 1em;
    padding:2px;
    padding-top: 30px;
    
    
    
    

}

nav li a:hover{
    color: white;
}


/* video greeting */


.video-greeting{
    margin-top: 90px;
    background-color: pink;
    width: 100%;
    height: 400px;
    
    


}




.video-greeting video {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;

    


    left: 50%;
    transform: translateX(-50%);
}

.video-greeting a {

    position: absolute;
    z-index: 2;
    font-size: 1em;
    background-color: pink;
    background-color: rgba(251, 231, 239, 1);

    padding: 10px;
    border-radius: 50%;

    top: 43%;
    left: 39%;
    
    text-decoration: none;
    color: black;
    
    

}


.cookie-tab{

  
    background-color: pink;
    padding: 20px 10px;
    display: grid;
    
    grid-template-columns: auto auto;
    gap: 20px;
    
    

}

.cookie-tab img{
    
    border: 2px black solid;
    width: 100%;
    
    
    display: block;

    
}

.cookie-tab p{
    width: 100%;
    display: inline-block;
    text-align: center;
   
    

}

Ich möchte diese Seite reaktionsfähiger machen. Ich weiß, dass ich das @media-Tool verwenden kann, frage mich aber, ob es eine bessere Möglichkeit gibt, den Einheitentyp zu ändern. Zum Beispiel, wie man eine Schriftart mit zunehmender Seitengröße skaliert oder wie man dafür sorgt, dass sich bestimmte Elemente (z. B. ein Video-Begrüßungselement) nicht bewegen, sondern an einer Stelle bleiben. Danke

P粉477369269
P粉477369269

Antworte allen(1)
P粉401527045
P粉4015270452024-04-05 13:43:09 1 Etage

此代码适用于较小的设备。使用它作为起点

@media only screen and (max-width: 600px) {
  .nav {
     flex-direction: column;
  }
}

基本上样式将应用在此宽度或更小的宽度

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！