HTML siteyi her çözünürlüğe göre ayarlamak

Sungurbloppp

Femtopat
Katılım
28 Ağustos 2020
Mesajlar
4
Arkadaşlar şimdi ben bir giriş yap ekranı tasarladım fakat bu sayfanın farklı çözünürlüklerde de aynı gözükmesini nasıl sağlayacağımı bilmiyorum. Örneğin telefon, tablet ve PC'de sitenin aynı görünmesini istiyorum. Sitenin kodu bu şekilde:

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

    <title>Document</title>

</head>

<body>

    <div style="opacity: 0.1;">

        <center>

    <audio src="unforgiven.mp3" controls autoplay></audio>           

        </center>

    <main>

<style>

        body{

          

            background-color: rgb(32, 31, 31);

            background-image: url(https://wallpapercave.com/wp/wp2661567.jpg);

          

        }

        input{

            position: relative;

            border: 3px solid #3498db;

          

left: 10px;;

bottom: 470;

width: 230px;

height: 50px;

border-radius: 24px;

outline: none;

background-color: rgb(32, 31, 31);

opacity: 0.7;



        }

        button{

            position: relative;

          



            left: 10px;;

bottom: 425;

width: 100px;

height: 45px;

background-color: rgb(17, 16, 16);

border-radius: 15px;

opacity: 0.7;

font-family: monospace;

        }

        .locater{

            position: relative;

left: 10px;

bottom: 640;

width: 230px;

height: 50px;

border-radius: 24px;

outline: none;

        }

        .duz-cerceve{

    border: 1px  solid white;

    width:350px;

    height:400px;

    margin: 250px 780px;

  

    background-color: none;

    box-shadow: 15px 15px 15px #000;

  

  

  

        }b

      

        h1{

            color: whitesmoke;

          

        }

        :placeholder{

            color: white;

            text-align: center;

        }

        audio{

            width: 100px;

        }

    </style>

    <div>

<div class="WebContainer articles"></div>

    <div class="duz-cerceve"><center><h1 style="  color: rgb(255, 255, 255); font-family: fantasy; font-weight: 50;">Giriş Yap</h1></center></div>

    <div class="normal-cerceve"></div>

    <form action="">

        <center>

        <input type="password" placeholder="Şifre" required style="color: white; text-align: center;">

        <br>

        <button type="submit"> <div style="color: rgb(209, 181, 181);">Giriş Yap</div> </button>

        <br>

        <input class="locater" type="text" placeholder="Kullanıcı Adı" required style="color: white; text-align: center;">

        </center>

    </div>

    </form>

    </main>

</body>

</html>
 
Son düzenleyen: Moderatör:
Yukarı