Duyarlı tasarımlar oluşturmak için CSS kesme noktaları nasıl kullanılır?

Bir web sitesinin başarısı büyük ölçüde kullanıcı deneyimine bağlıdır. Bu günlerde, kullanıcılar bir web sitesine birçok farklı cihazdan erişiyor ve her cihazda eşit bir kullanıcı deneyimi sağlamak zor olabilir. CSS kesme noktalarının işe yarayabileceği yer burasıdır.

CSS kesme noktaları, herhangi bir cihazda harika bir kullanıcı deneyimi sağlayan duyarlı siteler oluşturmak için oldukça faydalı olabilir, ancak aynı zamanda, özellikle yeni geliştiriciler için web tasarımının daha kafa karıştırıcı yönlerinden biri olmaya devam etmektedir.

Başlayalım!

CSS kesme noktası nedir?

CSS kesme noktaları, web sitesi içeriğinin cihaz genişliğine göre yanıt verdiği noktalardır ve kullanıcıya mümkün olan en iyi düzeni göstermenize olanak tanır.

CSS kesme noktaları, medya sorgusu ile kullanıldıkları için medya sorgusu kesme noktaları olarak da adlandırılır.

Bu örnekte, yerleşimin ekran boyutuna nasıl uyum sağladığını görebilirsiniz. Büyük çözünürlükteki düzen, bir başlık ve iki sütun gövde düzenine sahiptir, ancak küçük cihazlarda tek sütun düzenine dönüşür.

CSS kesme noktaları nasıl ayarlanır

İşin zor yanı, kesme noktalarına kendilerinin karar vermesidir. Standart şablon yoktur ve farklı çerçeveler farklı kesme noktaları kullanır.

Öyleyse, kırılma noktalarınız için hangi yaklaşımı benimseymelisiniz?

İzlenecek iki olası yaklaşım vardır:

• Cihaza dayalı kesme noktaları
• İçeriğe dayalı kesme noktaları

Cihaza dayalı CSS kesme noktaları

Farklı cihazlara dayalı olarak kesme noktalarına karar vermek iyi bir fikir gibi görünebilir, ancak gerçekte bu her zaman en iyi yaklaşım değildir. Zaten endişelenecek yeterince cihazımız var ve farklı genişlikte yeni bir cihaz çıktığında, CSS'nize geri dönmek ve baştan yeni bir kesme noktası eklemek zaman alıcıdır.

Bununla birlikte, sizin için uygun olduğunu düşündüğünüz için hala geçerli bir seçenek. İşte cihaza özel kesme noktalarına bir örnek:

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

Bu yaklaşımla, büyük bir medya sorgusu listesine sahip olacaksınız.

İçeriğe dayalı CSS kesme noktaları

Kesme noktalarına karar vermek için ideal seçenek sitenizin içeriğine bağlıdır. Bu yöntem, içeriğinizin düzen ayarına ihtiyaç duyduğu yerlere kesme noktaları eklemenize olanak tanır. Bu, medya sorgunuzu çok daha basit ve yönetilebilir hale getirecektir.

Bu kesme noktası, cihaz genişliği 768 piksel ve üzerinde olduğunda CSS'nin uygulanacağı anlamına gelir.

 [css]@media only screen (min-width: 768px){ ... }[/css]

Ayrıca kesme noktaları olan bir aralık da ayarlayabilirsiniz, böylece CSS yalnızca bu sınırlar içinde uygulanır.

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

Minimum veya maksimum genişlikte CSS kesme noktaları ne zaman kullanılır?

Kesme noktalarınızı min-width , max-width kullanarak veya hatta ikisini birleştirerek farklı şekillerde ayarlayabilirsiniz. Ama soru şu ki, her birini ne zaman kullanmalısınız?

Basit bir şekilde yanıtlamak için, düzeninizi mobil öncelikli bir yaklaşımla tasarlıyorsanız, minimum genişlikte kesme noktaları kullanın ve yukarı doğru çalışın.

Küçük cihaz için varsayılan stillerinizi ayarlayın ve buna göre daha büyük cihazlar için ayarlayın.

Benzer şekilde, önce daha büyük cihazlar için tasarım yapıyorsanız, varsayılan CSS'nizi normalde yaptığınız gibi ayarlayın ve maksimum genişlik yaklaşımıyla daha küçük cihazlar için ayarlayın.

SASS ile CSS kesme noktalarını kullanma

SASS veya SCSS gibi bir önişlemci kullanıyorsanız çok daha akıllı kesme noktaları yazabilirsiniz. Mixin, şunun gibi hatırlamak için daha fazla bildirime dayalı kesme noktası oluşturmanıza olanak tanır:

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

Bir grup içinde çalışırken “tablet-up”ı hatırlamak 768px veya 48em'den çok daha kolaydır. Bu kırılma noktasını herkes anlayabilir; tablet ve üstü ekran boyutları içindir.

Hangi CSS kesme noktaları kullanılacak

Kesme noktalarının nasıl kullanılacağını ve ne zaman kullanılacağını gördük, ancak soru hala devam ediyor: hangi belirli kesme noktalarını kullanmalısınız?

İşleri biraz parçalayalım. Masaüstü, tablet ve yalnızca mobil boyutları hedeflemeniz gerekir. Hangi yaklaşımı izleyeceğiniz konusunda bir fikir edinmek için bazı popüler çerçeveleri kontrol edebilirsiniz.

Bootstrap, 576px, 768px, 992px ve 1200px'de kesme noktalarına sahiptir. Vakfın esas olarak 40em ve 64em'de kesme noktaları vardır. Bulma'da kesme noktaları 768 piksel, 769 piksel, 1024 piksel, 1216 piksel ve 1408 piksel olarak ayarlanmıştır.

Her birinin farklı kesme noktaları vardır, ancak ortak noktaları mobil öncelikli yaklaşımdır. Başlangıç ​​noktası olarak bu kesme noktalarından birini kullanabilir veya aşağıdaki gibi kendinizinkini oluşturabilirsiniz:

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

Kaptın bu işi!

toparlamak

Özetlemek gerekirse, CSS kesme noktaları, farklı cihazlarda en iyi kullanıcı deneyimini sağlamak için mizanpajınızı yeniden yapılandırmanın harika bir yoludur.

Cihazlara değil, her zaman kendi içeriğinize göre kesme noktaları oluşturmaya çalışın. Bunları rastgele bir genişlik yerine mantıksal bir genişliğe bölün ve onları yönetilebilir bir sayıda tutun, böylece değiştirme basit ve net kalır.

Düzenleriniz için hangi CSS kesme noktalarını kullanıyorsunuz? Aşağıdaki yorumlar bölümünde bize bildirin.

Sıradaki ne?

Özel Gutenberg bloklarınızı Local ile ücretsiz oluşturun ve test edin!

Burada Yerel hakkında daha fazla bilgi edinin!

Duyarlı siteler oluşturmaya ilişkin daha fazla tavsiye için bu makalelere göz atın!

• WordPress sitenizi mobil uyumlu hale getirme
• WordPress'te duyarlı bir gezinme menüsü nasıl oluşturulur
• Duyarlı web tasarımı için en iyi 7 uygulama ipucu