Css ile Mobil Cihazlar – @media screen

Web sayfamızı mobil cihazlara uyumlu hale getirmek için css de @media screen özelliğini kullanmamız gerekir.

Kullanımı ve mantığı oldukça basit. Hangi ekran görüntüsünde hangi class yada id elementlerimize ne özellik vermek istiyorsak o özelliği kod bloklarının arasına yazmak yeterli.

600 px küçük telefonlar
@media only screen and (max-width: 600px) {...} 

600px üstü küçük tabletler ve telefonlar
@media only screen and (min-width: 600px) {...} 

768px büyük tabletler
@media only screen and (min-width: 768px) {...} 

992px laptop ve desktop cihazlar
@media only screen and (min-width: 992px) {...} 

1200px üzeri tüm cihazlar
@media only screen and (min-width: 1200px) {...}

Css ile mobil uyumlu site tasarlamak yukarıdaki kısa kodlar kadar kısa.

Bir cevap yazın

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

Shares