Zeki Can - WordPress

  CSS

Siteyi Mobil Uyumlu Responsive Yapma

  CSS    11 Mayıs 2016
Yorum Yok

Merhaba arkadaşlar, günümüzün web sitelerinde öne çıkan özelliklerden biride mobil uyumlu yani diğer adıyla responsive özellikli web siteleridir. Artık gelişen dünyada buzdolapları dahi internete bağlanabiliyorken web sitenize ya da blogunuza gelen mobil kullanıcılara masaüstü temanızla  karşılamanız hoş bir durum olmayacaktır. Hem kullanıcı performansı açısından hem de ileriye dönük site kaliteniz açısından bu konu çok önemlidir. Yeni temalarda bu özellik ilk aranan özelliklerden biri olduğunun farkına varan tema yapımcıları, temalarının özelliklerini sayarken bu özellik ilk olarak bahsettikleri özelliklerden biridir. Bu da bize gösteriyor ki Responsive tasarımın küçümsenemeyecek bir kalite standardı halini almış bir yere sahip özellik olduğunu.

Temamı Seviyorum Ama Responsive Değil

Size responsive mantığını anlatmaya çalışacağım bu makalemde. Öncelikle sevdiğiniz temadan vazgeçmek tabi ki zorunlu değilsiniz. Css ile aranız iyi ise küçük dokunuşlarla sitenizi mobil uyumlu hale getirmemeniz elde bile değil. Öncelikle kodlar vereceğim size ve neyi nerede kullanmanız gerektiğinden bahsedeceğim. Teknolojik Blog com olarak sitenizi mobil hale getireceğiz. Kodlar da geçenleri açıklamakla başlayayım.

Sayfamızı Mobil Duyarlı Hale Getirelim

Html etiketlerimizin arasına alttaki kodumuzu ekleyelim ve sayfamızı mobil duyarlı hale getirelim. <head> </head> etiketlerimizin arasına alttaki meta etiket kodumuzu çağıralım.

<meta name="viewport" content="" />

Bu meta etiketimiz sayfanın mobil uyumlu olması için mutlaka gerekli. Content kısmımız gördüğünüz gibi boş buraya gelebileceklere bakalım ve kendimize göre burayı dolduralım.

width Sayfanın ekran genişliğine göre duyarlı hale gelmesini sağlayan koddur. Ayrıca diğer kullanımı da width=device-width şeklindedir.

height Sayfanın ekran yüksekliğine göre duyarlı hale gelmesini sağlayan kodumuzdur. Çok kullanılan bir kod değildir. Bazı projelerde kullanılabilir.

initial-scale Sayfa gösterileceği zaman ölçeklendirmeye yarar. initial-scale=1.0 şeklinde bir kullanımı vardır. 1.0 değeri ölçeklendirme yapılmamasını sağlar. 0 ve 10.0 arasında bir değer verebilirsiniz.

user-scalable Ziyaretçi sayfayı görüntülediğinde zoom (çimdikleme) veya ölçekleme yapıp yapamayacağını belirleyebileceğiniz özelliktir. yes veya no değerlerini alır. user-scalable=no şeklinde kullanılmalıdır.

maximum-scale Ziyaretçi sayfayı görüntülediğinde yapabileceği maksimum zoom’un yani yakınlaştırma-büyültme oranını belirlemenizi sağlar. maximum-scale=1.0 şeklinde kullanılabilir.

minimum-scale Aynı maximumun gibi ama bu sefer tersi şeklinde ziyaretçi sayfayı görüntülediğinde yapabileceği maksimum zoom out yani uzaklaştırma-küçültme oranını belirlemenizi sağlar. minimum-scale=1.0 şeklinde bir kullanım uygundur.

Şimdiye kadar yazıklarımız mobil uyumlu hale getirmek için bir başlangıç aşamasıydı. Devamı konumuz da çözünürlüğe göre CSS kodları belirleyebileceğim @media özelliğimizden bahsedeceğim. Daha detaylı bir konu olduğundan ayrı bölümde yazmak istedim. İkinci konuya ” Siteyi CSS ile Mobil Uyumlu Responsive Yapma ” tıklayarak gidebilirsiniz.

 

154 okunma

Etiketler : , , , , , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

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

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.

  Arama Yap

  Arşivler