HTML Responsive (Duyarlı) Web Tasarımı!

#HTML

HTML Responsive (Duyarlı) Web Tasarımı sayesinde her türlü ekran boyutuna göre web sitenizin tasarımını koruyabilirsiniz.

HTML Responsive (Duyarlı) Web Tasarımı!
HTML Responsive (Duyarlı) Web Tasarımı!
HTML Responsive (Duyarlı) Web Tasarımı!
HTML Responsive (Duyarlı) Web Tasarımı!

Duyarlı Web Tasarımı Nedir?

Responsive Web Tasarımı, bir web sitesini otomatik olarak yeniden boyutlandırmak, gizlemek, daraltmak veya büyütmek için bir web sitesini tüm cihazlarda (masaüstleri, tabletler ve telefonlar) iyi görünmesi için kullanmak üzeredir:

Not: Bir web sayfası herhangi bir cihazda iyi görünmelidir !

Görünüm Çerçevesini Ayarlama

Yanıt veren web sayfaları yaparken <meta>, tüm web sayfalarınıza aşağıdaki öğeyi ekleyin :

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

Bu, tarayıcınıza sayfanın boyutlarını ve ölçeklendirmesini nasıl kontrol edeceğinizle ilgili talimatlar verecek şekilde sayfanızın görünüm alanını ayarlayacaktır.

İşte bir web sayfası örneğidir görünüm meta etiketi olmadan  ve aynı web sayfasından görünüm meta etiketi ile :

Duyarlı Görüntüler

Duyarlı görüntüler, herhangi bir tarayıcı boyutuna uyacak şekilde güzelce ölçeklenen resimlerdir.

Width özelliğini kullan

CSS widthözelliği% 100 olarak ayarlanırsa, görüntü duyarlı olacaktır ve ölçek yukarı ve aşağı ölçeklenir:

<img src="img_girl.jpg" style="width:100%;">

Yukarıdaki örnekte, görüntünün orijinal boyutundan daha büyük olacak şekilde ölçeklendirilebileceğine dikkat edin. Daha iyi bir çözüm, çoğu durumda, bunun yerine  max-width kullanmak en iyi çözüm olacaktır.

Max-width özelliğini kullanma

Eğer max-width% 100’e ayarlanırsa, görüntü ekran boyutundan büyükse küçülür değilse kendi boyutunu koruru, ancak orijinal boyutundan daha büyük olacak şekilde bir hal almaz.

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Tarayıcı Genişliğine Göre Farklı Görüntüler Gösterme

HTML <picture>öğesi, farklı tarayıcı penceresi boyutları için farklı görüntüler tanımlamanıza olanak sağlar.

Aşağıdaki görüntünün genişliğe bağlı olarak nasıl değiştiğini görmek için tarayıcı penceresini yeniden boyutlandırın:

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

Çıktısı;

See the Pen tml picture by ArmyYazılım (@armyyazilim) on CodePen.

Duyarlı Metin Boyutu

Metin boyutu ” viewport width” anlamına gelen “vw” birimiyle ayarlanabilir.

Bu şekilde, metin boyutu tarayıcı penceresinin boyutunu izleyecektir:

<h1 style="font-size:10vw">Hello World</h1>

Çıktısı;

See the Pen html viewport by ArmyYazılım (@armyyazilim) on CodePen.

Viewport, tarayıcı penceresinin boyutudur. 1vw = görünüm genişliğinin% 1’i. Vitrin 50 cm genişliğinde ise, 1vw 0,5 cm’dir.

Medya sorguları

Metin ve görüntüleri yeniden boyutlandırmanın yanı sıra, yanıt veren web sayfalarında medya sorguları kullanmak da yaygındır.

Medya sorguları ile farklı tarayıcı boyutları için tamamen farklı stiller tanımlayabilirsiniz.

Örnek: Aşağıdaki üç div öğesinin yatay olarak büyük ekranlarda görüntüleneceğini ve küçük ekranlarda dikey olarak istifleneceğini görmek için tarayıcı penceresini yeniden boyutlandırın:

<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>

Çıktısı;

See the Pen html responsive div by ArmyYazılım (@armyyazilim) on CodePen.

Responsive Web Sayfası – Tam Örnek

Yanıt veren bir web sayfası, büyük masaüstü ekranlarında ve küçük cep telefonlarında iyi görünmelidir.

Çıktısı;

See the Pen html responsive tam örnek by ArmyYazılım (@armyyazilim) on CodePen.

Duyarlı Web Tasarımı – Altyapılar

Duyarlı Tasarım sunan birçok CSS Çerçevesi vardır.

Onlar ücretsiz ve kullanımı kolaydır.

W3.CSS’yi kullanma

Duyarlı bir tasarım oluşturmanın harika bir yolu, Bootstrap gibi duyarlı bir stil sayfası kullanmaktır.

Bootstrap, her boyutta güzel görünen siteler geliştirmeyi kolaylaştırır.

Örnek;

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>

Çıktısı;

See the Pen html bootstrap by ArmyYazılım (@armyyazilim) on CodePen.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İçerik Metası
İbrahim Bozkurt //