Websitenizi mobil uyumlu hale getirin!

Herkese iyi günler, bu yazımda websitenizi nasıl mobil uyumlu yani responsive yapabileceğinizi göstericem. Keyifli okumalar 🙂

Responsive tasarım, sitenizin her cihazda görüntü açısından bozulmadan, resimlerin, butonların, yazıların sağa sola kaymadan düzen içinde ve göze hitap eden bir şekilde kalmasını sağlar, bu sayede sitenize daha fazla insan girer ve seo açısından responsive önemlidir. Responsive tasarıma sahip olan siteler google ve diğer arama motorlarında üst sıraya yükselir.

Peki nasıl yazdığım siteyi responsive hale getirebilirim?

<head> etiketinin içine bu kodu yapıştırıyoruz

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>Responsive - Kodfaresi.xyz</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="icon" type="image/png" href="icon.png">
</head>
<body>
	<span class="ornek">kodfaresi.xyz</span>
</body>
</html>

Html dosyamızla şuanlık başka bir işimiz yok şimdi önemli olan css kısmına gelelim. Artık css içeriğimizi sitemizin hangi ekran boyutunda nasıl görüneceğine göre ayarlıyacağız. Hemen style.css dosyamıza bakalım.

style.css

@media screen and (min-width: 1366px) {
  /*
  * ekran genişliği 1366px ve üstü olan cihazlarda bu süslü parantez arasındaki css kodlarınız çalışacak
  */
  .ornek{
    font-size: 30px;
    color: red;
  }
}
@media screen and (min-width: 960px) and (max-width: 1365px){
  /*
  * ekran genişliği 1365px ve 960px arasında olan cihazlarda bu süslü parantez arasındaki css kodlarınız çalışacak
  */
  .ornek{
    font-size: 25px;
    color: blue;
  }
}
@media screen and (min-width: 720px) and (max-width: 959px) {
  /*
  * ekran genişliği 959px ve 720px arasında olan cihazlarda bu süslü parantez arasındaki css kodlarınız çalışacak
  */
  .ornek{
    font-size: 20px;
    color: green;
  }
}
@media screen and (min-width: 480px) and (max-width: 719px) {
  /*
  * ekran genişliği 719px ve 480px arasında olan cihazlarda bu süslü parantez arasındaki css kodlarınız çalışacak
  */
  .ornek{
    font-size: 15px;
    color: yellow;
  }
}
@media screen and (min-width: 320px) and (max-width: 479px) {
  /*
  * ekran genişliği 479px ve 320px arasında olan cihazlarda bu süslü parantez arasındaki css kodlarınız çalışacak
  */
  .ornek{
    font-size: 10px;
    color: purple;
  }
}

Ekran boyutlarını ihtiyacınıza göre düzenleyebilirsiniz, bir sonraki yazımda görüşmek üzere, iyi günler.