Sihirli Fasulyeler
Yükleniyor...
Tüm Cihazlara Uyumlu Website İçeriği
 Web-Tasarım   870   09.01.18   09.01.18   0
webmenu.jpg

Tüm cihazlara uyumlu website tasarımı serisinin bu son makalesinde, websitemizde yer alan içerikler için uyumluluk işlemleri yapacağız. Böylece serimizi tamamlayarak tüm cihazlarda düzgün görüntülenen menü, şablon ve içerik için uyumluluk işlemlerini öğrenmiş olacağız. İçeriklerin uyumlu hale getirilmesinde yapacağımız işlemler resimler ve videolar için olacak.

 

Serimizin ilk bölümüne buraya tıklayarak,

 

Serimizin ikinci bölümüne buraya tıklayarak ulaşabilirsiniz.

 

Tasarımımızı test etmek için buraya, bilgisayarınıza indirmek için buraya tıklayabilirsiniz.

 

Resimler için uyumluluk işlemleri oldukça basittir. Tek yapmamız gereken şey CSS komutları ile resimlerimizi bulundukları katmana göre boyutlandırmaktır.

 
img{
    width: 100%;
    height: auto;
}
 

Videolar için ise (youtube videoları) farklı bir yol izlememiz gerekiyor. Öncelikle videoyu kapsayan bir katmana ihtiyacımız var. Bu katmanın boyutlarını ideal video oranı olan 16:9 oranında boyutlandırmamız gerekiyor. Örneğin videomuzu kapsayan katmanımıza "video" ismi vermişsek,

 
.video{
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
}
 

şeklinde kodlamamız gerekiyor. Böylece her genişlikte 16:9 oranına sahip bir katman oluşturmuş oluyoruz. Katmanımızın içerisine ise iframe özelliğine sahip videomuzu ekliyoruz. Ayrıca iframe için de küçük CSS işlemleri yapmamız gerekiyor.

 
iframe{
    position: absolute;
    width: 100%;
    height: 100%;
}
 

Böylece resim ve videolarımızı da uyumlu hale getirmiş oluyoruz. İşlemleri yaptığımız videoyu aşağıdan izleyebilirsiniz.

 

 

 Bu konuyu paylaş

 

 Konuyu geliştirmemize yardımcı ol, konuyu değerlendir.
 İlk Sen Değerlendir

 

 Yorum yaz, soru sor, geliştirme öner
E-Posta adresiniz yayınlanmayacak.

 

 İlk Yorumu Sen Yap