İlginizi Çekebilir

HTML Responsive

HTML Responsive

Duyarlı web tasarımı (Responsive), tüm cihazlarda uygun bir formda görünen web sayfaları oluşturmakla ilgilidir. Web sitelerimizi tasarlarken, tema dahil siteye dahil olan unsurların her cihaza uyumlu olmasına önem göstermeliyiz. Bu yazımızda sizlere html responsive hakkında bilmeniz gerekenleri anlatacağım.

Duyarlı bir web sitesi oluşturmak için aşağıdaki <meta> etiketini tüm web sayfalarınıza eklemelisiniz:

Ekleyeceğiniz bu kod, sayfanızın görüntü alanını ayarlayacak ve tarayıcıya sayfanın boyutlarını ve ölçeklendirmesini nasıl kontrol edeceği konusunda talimatlar verecektir.

META Etiketi VAR ✓
HTML Responsive
META Etiketi YOK X
HTML Responsive

 
Meta etiketinin desteklediği öznitelikler bulunmaktadır:

widthCihazın sanal görüntü genişliğini ayarlar.
device-widthCihazın fiziksel görüntü genişliğini ayarlar.
heightCihazın sanal görüntü yüksekliğini ayarlar.
device-heightCihazın fiziksel görüntü yüksekliğini ayarlar.
initial-scaleSayfaya ilk kez girerken oluşacak yakınlaşma değeri.
minimum-scaleZiyaretçinin sayfada yakınlaştırabileceği minimum miktar. 1.0 yakınlaştırmaz.
maximum-scaleZiyaretçinin sayfada yakınlaştırabileceği maksimum miktar. 1.0 yakınlaştırmaz.
user-scalableCihazın yakınlaştırıp uzaklaştırmasına izin verir. Değerler: evet veya hayır.

 
Tarayıcı genişliğine bağlı olarak farklı görüntüler göstermek istersek, picture etiketiyle bunu yapabiliriz. Şuan tam ekran bir şekilde okuyorsanız başka bir resim göreceksiniz. Tarayıcı pencerenizi küçültürseniz başka bir resim göreceksiniz.
HTML Responsive

 
Metin boyutu, “görüntü alanı genişliği” anlamına gelen “viewport width” “vw” birimi ile ayarlanabilir.

HTML Responsive

Yorum Yap

Yorum Yap