CSS Responsive Site CSS Yazımı Kodlaması

Mobil internet kullanımının artmasıyla birlikte mobil destekleyen internet siteleri ihtiyacı da arttı. Başlarda mobil için ayrı ve normal masaüstü ekranlar için ayrı tasarımlar gösterildi. Bunun yerini son yıllarda. Responsive tasarım aldı.

Responsive tasarım ile kodlanmış tasarımlar hem mobil hemde masaüstü kullanıcılarına göre internet sitenizi göstermeye yarıyor.

CSS Temele dayalı bir biçimde Responsive Kodlamayı şu şekilde yapabilirsiniz.

Farkındaysanız min veya max biçiminde belirtilen genişlikler ekran çözünürlüğüne göre ayarlanabilen özellikler içindir. @media özelliği gelişmiştir. Ekran özelliğini onunla değiştirirsiniz.
Yukarıdaki özellikler arasında farklı teknolojilerdeki eranlar için boyutlar da var. İsterseniz birini isterseniz diğerlerini kullanabilirsiniz.

Örneğin;

veya

@media kodunu sadeleştirerek sadece media ve boyut belirterek de uygulayabilirsiniz.

CSS i yazdıktan sonra yazdığnıız CSS in mobil cihazlarda doğru çalışması için HTML meta belirtmeniz gerekiyor.
Şu meta etiketini içerisine eklemeniz lazım.

Sebebini eğer ekran boyutunu render yaparken cihazın neyin boyutunu refearns alması gerektiğini söylüyorsunuz. “width=device-width” diyerek şunu kast ediyorsunuz; Benim yazdığım kodları ve CSS boyutlarını ufaltma otomatik küçültme ve olduğu gibi göster ve hesapla diyorsunuz.

Bu olmazsa ne oluyor ? Android, iOS veya diğer cihazlarda sitenizi veya uygulamanızı otomatik ekrana göre ufaltıyor ve yazdığınız CSS kodlarına göre responsive CSS kodlarınızı uygulamıyor.

Bu arada farklı çözümler için düşünülmüş metalarda bulunuyor.

Property Description
width The width of the virtual viewport of the device.
device-width The physical width of the device’s screen.
height The height of the “virtual viewport” of the device.
device-height The physical height of the device’s screen.
initial-scale The initial zoom when visiting the page. 1.0 does not zoom.
minimum-scale The minimum amount the visitor can zoom on the page. 1.0 does not zoom.
maximum-scale The maximum amount the visitor can zoom on the page. 1.0 does not zoom.
user-scalable Allows the device to zoom in and out. Values are yes or no.

.

Yorumlar