Sıfır blokta bir sayfa nasıl uyarlanır

Bu makalede, evrensel bir blokta oluşturulan bir sayfanın nasıl ve neden uyarlanacağını anlatacağız.

Eğer evrensel blokta oluşturulan sayfa bir bilgisayarda iyi görünüyorsa, ancak bu cihazların boyutu farklı olduğu için site bir cep telefonu veya tablet ekranında doğru görüntülenmeyecektir.

Temel bilgiler

Evrensel blokta, tablet ve telefon için yatay ve dikey konumlarda uyarlamalar yapmanız gerekir.

• Bir bilgisayar için blok boyutu 1200 pikseldir.

• Yatay konumdaki tablet 960 pikseldir

• Dikey konumdaki tablet 640 pikseldir

• Yatay konumdaki telefon 480 pikseldir

• Dikey konumdaki telefon 320 pikseldir

Bunun için blokta bir araç vardır; bu araç açıldığında, siteye ait oluşturulan tüm öğelerin sığması gereken sayfa boyutunu otomatik olarak gösterir: metin, şekiller, düğmeler, videolar vb.

İlk olarak, ekranın büyük sürümü (bilgisayar) için bir tasarım oluştururuz

Bundan sonra oluşturulan sayfayı uyarlamaya başlarız; önce yatay konumdaki tablet için ve böyle devam ederiz. Bunun için bloktaki araç çubuğunu kullanır, metinlerin ve öğelerin boyutlarını blok dışına çıkmayacak şekilde ayarlarız; aksi takdirde site kullanıcılarının cihazlarında görünmezler.

Sayfanın her boyut için nasıl görünmesi gerektiğine dair bazı örnekler aşağıdadır.:

Yatay konumdaki tablet 960px

Dikey konumdaki tablet 640px

Yatay konumdaki telefon 480px

Dikey konumdaki telefon 320px

Web sitesi oluşturucudaki tüm temel bloklar, istenen ekran boyutuna otomatik olarak uyum sağlar. Temel bloklar hakkında sonraki makalelerde bilgi edinin.