简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Di manakah saya harus mula menjadikan halaman ini responsif?
P粉477369269
P粉477369269 2024-04-04 21:21:25
0
1
526

rreeee 

<!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>

Saya ingin menjadikan halaman ini lebih responsif. Saya tahu saya boleh menggunakan alat @media tetapi saya tertanya-tanya sama ada terdapat cara yang lebih baik untuk menukar jenis unit. Seperti cara menskala fon apabila saiz halaman bertambah, atau cara membuat elemen tertentu (seperti elemen ucapan video) tidak bergerak tetapi kekal di satu tempat. Terima kasih

P粉477369269
P粉477369269

membalas semua(1)
P粉401527045
P粉4015270452024-04-05 13:43:09 Tingkat 1

Kod ini adalah untuk peranti yang lebih kecil. Gunakan ia sebagai titik permulaan 

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

Pada asasnya gaya akan digunakan pada lebar ini atau kurang

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！