Ücretsiz bir şekilde siteni mobil uyumlu hale getir.
KODYAZAR HTML CSS PHP C#

RESPONSİVE DESİGN

Hoşgeldin kodyazar. Bu derste responsive design'dan bahsedeceğim. Responsive design farklı cihazlarda aynı oranda çözünürlükler ile çalışmasını sağlar. Ne demek istiyorum. Bilgisayar ile mobil cihazların çözünürlükleri bir mi? Her cihazın çözünürlüğü farklı. Tabletler, telefonlar, bilgisayarlar. Css ile her cihazda uyumlu çalışması için bu yazımı okuyabilirsiniz.

Bir tane index.html dosyası açın.

Aşağıdaki kodları yazın.

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsive Web Design</title>
        <link rel="stylesheet" href="style.css">
        </head>
        <body>
        <div id="responsive">
        <h1>Responsive Web Design</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates in enim, sit adipisci autem quod consectetur excepturi nam tempore officiis quam nisi? Ratione provident maiores a. Sapiente, eos doloremque!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates in enim, sit adipisci autem quod consectetur excepturi nam tempore officiis quam nisi? Ratione provident maiores a. Sapiente, eos doloremque!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates in enim, sit adipisci autem quod consectetur excepturi nam tempore officiis quam nisi? Ratione provident maiores a. Sapiente, eos doloremque!</p>
        </div>
        <footer>©2020 All rights reserved by Eray ÇAKMAK</footer>
        </body>
        </html>
        

Bir tane style.css dosyası açın.

Aşağıdaki kodları yazın.

      body{
          margin: 0;
          padding: 0;
          background-color: #1f3; /*sayfanın arka plan rengi.*/
      }
      #responsive{
          margin: auto;
          margin-top: 5%; /*sayfanın div yapısı üst boşluk.*/
          height: 400px; /*div yapısının uzunluğu.*/ 
          width: 400px; /*div yapısının genişliği.*/
          background-color: #abc;
      }
      #responsive h1{
          text-align: center; /*div yapısındaki başlık etiketinin yazısını ortalama.*/
      }
      #responsive p{
          color: #fff; /* div yapısındaki paragraf etiketinin yazısının rengini değiştirme.*/
      }
      @media screen and (max-width: 768px){ /* Responsive tasarımda ayar yapılan kısım. Burada denmek istenen cihazn maximum genişliği 768px olana kadar aşağıda yazan kodları çalıştır. */
          #responsive{ /* divimizi çağırdık. */
              margin-top: 0px; /*üst boşluğu 0 yaptık.*/
              float: left; /* div yapısını sola yapıştırdık.*/
              width: 100%;
          }
          #responsive h1{
             color: #f01;
             float: left; /* Başlık etiketini sola yapıştırdık.*/
          }
          #responsive p{
              color: #1f3;
              float: left; /* Paragraf etiketini sola yapıştırdık.*/
          }
      }
      /* Footer */
      footer{
          background-color: #000;
          color: #fff;
          text-align: center;
          width: 400px;
          margin: auto;
      }
      @media screen and (max-width: 768px){
          footer{
              float: left;
              width: 100%;
          }
      }
       

@media screen and (max-width:768px){ } satırında cihazın en fazla 768px olduğunda çalışacağı durumları kod halinde yazdık. Önemli olan satırları /* */ satırı içinde yazdım.

Yukarıda yazdığım index.html ve style.css dosyasını editörünüze kaydedip tarayıcınızda çalıştırabilirsiniz.