320, 768 ve 1024. Bu rakamlar size bir şey ifade ediyor mu?
Hayır, bu Da Vinci kodu değil, birçok tasarımcının mobil, tablet ve masaüstü ekran genişlikleri ile ilişkilendirdiği piksel cinsinden genişliklerdir.
Bununla ilgili sorun cep telefonumun 320 piksel genişliğinde değil, tabletim 768 piksel genişliğinde ve masaüstü ekranımın kesinlikle 1024 piksel genişliğinde olmaması. Çeşitli farklı cihazlarda yüzlerce farklı ekran boyutu var, ancak hala yanıt veren web tasarımını 320, 768 ve 1024 olarak düşünüyoruz.
Bu üç kesme noktasını tasarımları için kullanan ve en yakın genişlikte merkezlenen 3 statik düzen yaratan birçok site gördüm.
Bu, en az bir sütunu, mobil için basitleştirilmiş bir sürümü ve tablet için bir dokunuşla uyumlu sürümü olduğu için eski moda, statik, masaüstü tek siteye sahip olmaktan daha iyidir, ancak neden diğer tüm ekran boyutlarını onları içine almadığınıza neden yabancı olursunuz? göz?
Tasarımın diğer boyutlarda çalışmaya devam edeceğinden emin olun, ancak 768'den küçük bir tabletiniz olduğunda ne olur? Mobil deneyimi bir tablette alacaklar! Ve 1024'ten küçük bir dizüstü bilgisayar ekranında görüntülerken? Biz onlara tablet düzenini göndeririz ve onlara layık gördüğümüz 3 ekran boyutundan birine sahip olmamak için onlara güleceğiz.
Duyarlı düzenlerinizi oluşturduğunuzda, her zaman boyutlarınızdan mümkün olduğunca çok sayıda yüzdeyi ayarlamayı hedeflemelisiniz. Bu, içeriğinizin farklı ekran boyutları ile eşit bir şekilde büyümesini ve küçülmesini sağlamaya yardımcı olur ve görüntülendikleri cihaza orantılı olarak bunu yapar. Bu yaklaşım, içeriğinizin, içeriğin bir sonraki pikselden birkaç piksel daha küçük bir ekran boyutunda ortalamasından dolayı, ekranınızın muhtemelen% 50'si yerine, ekranın her zaman% 90'ını (ya da sizin belirlediğiniz kadar) doldurmasını sağlayacaktır. mevcut kesme noktası.
Sınır değerlerinizi seçerken, her zaman kararlarınızı, içeriğin nerede kırıldığını ve cihaz ekran genişliklerine göre yapılmamasını sağlamanız gerekir. Bir tasarım oluşturmak ve iPad ekranını rahatça sığacak şekilde değiştirmek yerine, içeriğinizin hangi genişlikte mücadele etmeye başladığını öğrenmelisiniz.
1400 genişliğindeki bir tasarımla çalışmaya başladım ve bir parça içeriğin düzeni bozana ya da bunu yapmaya yaklaşıncaya kadar tarayıcıyı yavaşça küçültüyorum. O zaman bir sonraki kırılma noktasını belirler. İçeriğin hala işe yarayıp yaramadığını 1200, 800 ya da 673'te yapması fark etmez.
477 veya 982 gibi garip sınırlarla sonuçlanacağınızı ve 2, 6 veya 10 farklı kesme noktasına sahip olabileceğinizi göreceksiniz. Asıl nokta, içeriğin, görüntülenmesini istediğiniz amaçlanan ekran boyutlarından ziyade karar vermesidir.
Her ay yayınlanan farklı cihaz ve ekran boyutları dizisiyle, yanıt veren projelerimiz için belirli bir kesme noktaları kümesini belirlemek imkansızdır. Gerçek şu ki, duyarlı düzenlerimizi belirlemek için ekran genişliği gibi bir değişken kullanırken, her farklı boyuta mükemmel bir mizanpaj sunmak için mücadele edeceğiz, ancak yukarıdaki ipuçlarından birkaçını izleyerek, en azından içeriğin her zaman mümkün olan en iyi şekilde görüntülenir.
Genellikle hangi kesme noktalarını kullanıyorsunuz? Sınır değerlerden tamamen mi kaçıyorsunuz? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, geniş yük resmi Shutterstock üzerinden.