mobilna strona internetowa

pytanie zadane 10 października 2022 w HTML i CSS przez kolmipilot Obywatel (1,570 p.)

Jak zrobić osobną wersję strony na urządzenia mobilne i od razu przekierowywać urządzenia mobilne na nią?

Strona którą robię w wersji pc nie może się przeskalować. Taki jest jej szablon w wersji na pc.

tekst to lorem

<!DOCTYPE html>
<html lang="pl">
<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">
    <title>info</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>

    <h1>temporibus quo optio</h1>

    <h2> <p>quam hic est </p>

   Sunt rerum alias eos quidem vitae tempora non aut rerum.
Ut odio dolorem veniam.
Voluptatem doloremque et fugiat minus rerum aperiam.
Quia et sint optio delectus reiciendis natus fuga tempora. Et occaecati corporis nesciunt. Ratione nihil cum minima nesciunt. A voluptates fugiat rerum voluptas animi repudiandae nisi sint. Voluptatem qui suscipit consequuntur enim unde. Aut sint saepe rerum ducimus consequuntur sint voluptate sint cum. Consequatur voluptatem facere.
 
Rerum excepturi accusamus accusantium. Expedita consequatur qui dolor nobis deserunt vel. Quidem qui quidem commodi eius autem quaerat rem. Corrupti voluptate deleniti occaecati rerum recusandae. Quis fugit libero beatae. Incidunt enim qui molestiae debitis debitis.
 
Eum quis quis repudiandae dolorum. Quo modi quisquam autem nemo quis voluptatibus inventore. Est laudantium vitae dignissimos. Delectus id laborum consequatur repellendus rerum laudantium a.</h2>

<div id="links">sapiente vero et:<br>

   <a href="https://www.youtube.com/channel/UCxUau8fh4u-orsarEstY3PA">mój kanł yt</a><br>
   <a href="https://www.facebook.com/kolmipilot/">facebook</a><br>
   <a href="https://github.com/kolmipilot">github</a>
</div>
   
</body>
</html>


body {
    display: grid;
    grid-template-columns: 0.2fr 1fr;
    grid-template-rows: 0,5fr 1fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 20px;
    background-image: url(image/prism.png);
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-right: auto;

 
    }

    h1{
        grid-column: 2;
        grid-row: 1;
        text-align: center;
        color: rgb(224, 231, 127);
    }

    h2{
        grid-column: 2;
        grid-row: 2/4;
        padding: 10px;
        text-align: center;
        border: 1px solid black; border-radius: 5px 10px 5px 10px; 
        color: rgb(201, 200, 200);
        
    }

   

    #links{
        grid-column: 1;
        grid-row: 2/5;
        padding: 10px;
        text-align: center;
        border: 2px solid black; border-radius: 5px 10px 5px 10px; 
        font-size: 20px;
        color: rgb(201, 200, 200);
        
        
    }

    a{
        color:blue;
        font-size: 110%;
        
        
    }
    a:hover{
        color:aqua;
        font-size: 105%;
    }

komentarz 10 października 2022 przez ScriptyChris Mędrzec (190,190 p.)

Strona którą robię w wersji pc nie może się przeskalować.

Dlaczego?

komentarz 10 października 2022 przez kolmipilot Obywatel (1,570 p.)

nie wiem jak to zrobić, wyskakuje mi coś takiego

3	komentarz 10 października 2022 przez ScriptyChris Mędrzec (190,190 p.) A jakbyś chciał, żeby to wyglądało na mobilkach? Ułóż layout na mniejsze urządzenia i włączaj go przez media query, albo wykonaj od początku z nastawieniem mobile first i na wyższych rozdziałkach odpowiednio go rozszerzaj.

1	komentarz 11 października 2022 przez kolmipilot Obywatel (1,570 p.) Dziękuję dokładnie, twoja propozycja a szczególnie mobilefrist bardzo mi pomogła.