✅ Duyarlı Düzen nasıl oluşturulur

İçindekiler

Gereksinimler
özellikler minimum genişlik ve maksimum genişlik
Kullanmak Göreceli Dolgu

A duyarlı düzen web tasarımında norm haline geldi, bu tür sayfa düzeni, onu içeren pencerenin boyutu aniden değişirse, yani çok büyükten çok küçüğe doğru değişirse ve bunun tersi, öğelerimizin yeniden düzenlenebilir olması gerektiği anlamına gelir. iyi ve işlevsel kullanıcı deneyimi.

Bu her zaman kuralları ile mevcut olmuştur CSSBununla birlikte, aynı uygulamanın son uygulamasında, kısmen tasarımın en büyük tüketicilerinden biri olan modern mobil dünyanın zaten var olması nedeniyle daha iyi önlemler alındı. duyarlı.

Gibi birkaç çerçeve olmasına rağmen Önyükleme veya temel bize varsayılan olarak duyarlı bir düzen veren, onlara her zaman bağlı olamayız, bu nedenle bu özelliklerin bir düzenini kendi araçlarımızla nasıl oluşturabileceğimizi bilmek çok yararlıdır.

Gereksinimler

1- Bu öğreticiyi tamamlamak için temel bilgilere sahip olmamız gerekir. HTML Y CSS, çünkü öğreticide yapılan örnekleri anlamak için hayati önem taşırlar.

2- Teknik açıdan, en azından aşağıdaki gibi modern bir tarayıcıya ihtiyacımız var: Google Chrome, kodumuzu yazmak için bir metin editörü kullanabiliriz Yüce metin o NotePad ++ veya hatta Windows not defteri veya Gedit maceracı hissediyorsak Linux'ta.

3- Son olarak, gösterilen örneklerden birinde göreceğimiz gibi kodumuza yerleştirmek istiyorsak bir veya iki resmi indirmek için bir İnternet bağlantısına ihtiyacımız var.

özellikler minimum genişlik ve maksimum genişlik

Bu belki de ortamlarla çalışırken karşılaştığımız ilk özelliktir. duyarlı, çoğu zaman sayfanın ne zaman küçüldüğüne odaklanıyoruz, peki ya yeni ekranlar? 4K? Bu nedenle, web sitemizin iyi göründüğü maksimum çözünürlüğü ihmal etmemeliyiz.

minimum genişlik ve maksimum genişlikÖzellikler veya nitelikler minimum genişlik Y maksimum genişlik CSS, tasarımımızın altında olmasını istediğimiz maksimum marjları belirlememize izin verdiği için bu soruna karşı savaşmamıza yardımcı olur. duyarlı, çünkü değilse, boyutlardaki aşırılıklar, özellikle çözünürlüklerin artmaya devam ettiği, ancak henüz büyük olmadığı bu anlarda bize bir oyun oynayabilir.

Aşağıdaki örnekte hayatımızı nasıl düzenleyebileceğimizi göstereceğiz. Yerleşim bahsedilen özellikler sayesinde bunun için bir belge oluşturacağız HTML aşağıdaki içerikle:

Duyarlı düzen örneği 1

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris sem ut sadece convallis maximus et vitae orci'de. Nulla ultrices alkolsüz içecek. Acı içinde Phasellus varius ipsum ligula olmayan aliquet ultricies. Aliquam ac nisl araç.

Yaptığımız şey, bir tür sütun gibi çalışan üç div öğesi oluşturmaktı, bu durumda onun container öğesine diyoruz. makale maksimum genişliği olacak 1200 pikselYani ekran ne kadar büyük olursa olsun, tasarım oradan asla daha fazla büyümeyecek, o zaman her div için bir tane olmak üzere üç sınıf oluşturuyoruz ve ekran ne kadar küçülürse küçülsün bu şekilde minimum genişlik atayacağız. bu minimum oranları korumak için, bu, örneğin ekran görüntüsünde göreceğimiz gibi görüntüler için ve son olarak sınıf için mükemmeldir. batmadan yüzmek ayrıca ona bir minimum genişlik atarız. Büyük bir çözünürlüğe sahip olduğumuzda örneğimizin tarayıcıda nasıl göründüğüne bakalım:

BÜYÜT

Şimdi tarayıcı penceresini biraz küçülttüğümüzde nasıl ölçeklendiğini görelim:

BÜYÜT

Son olarak, pencereyi bir cep telefonuna benzer bir boyuta getirdiğimizde sonucu görelim:

Minimum ve maksimum olarak belirlenen oranların nasıl korunduğunu görebiliyorduk ama en önemlisi tasarımımızın görselleştirdiğimiz farklı çözünürlüklere uyarlanması ve bu sayede kullanıcının kaybetmemesini sağlayabildik. sitemizle olan deneyimlerinde kullanılabilirlik.

Tabii bu üretimde gösterilecek bir şey olmaktan çok uzak ama uygulamalarımız ve sayfalarımız için gerçek tasarımlar üzerinde çalışırken bazı emekleri nereye odaklamamız gerektiği konusunda bize fikir veriyor, ilginç olan şu ki, 3 sütunlu bir düzenden tek sütunlu bir düzene nasıl geçtiğimizi görebildik.

Kullanmak Göreceli Dolgu

NS dolgu malzemesi İçeriğin ne kadar uzağa gideceğine dair bir sınır belirlememiz için içeriğin bir boşluğunu kabın kenarlarına karşı korumamıza izin veren bir ölçüdür, bu başka bir kavram olduğu için kenar boşluğu ile karıştırılmamalıdır.

Mesele şu ki, dolgu malzemesi yaparken neredeyse hiç dikkate alınmaz. Yerleşim olmak duyarlı daha sonra tasarımın görüntülendiği çözünürlük değiştirilirken estetik olmayan metinler ve içerikle sonuçlanır.

Aşağıdaki kodda yapacağımız şey bir dolgu malzemesi nispeten çalışan, yani pencerenin boyutu ayarlandığında, dolgu malzemesi Oranları korumak için değişecek ve bu sayede çözünürlük değişikliği nedeniyle daha az yer kalmasına rağmen içeriğin her zaman düzenlediğimiz gibi kalmasını sağlayacak. Kod örneğimizi görelim:

Göreceli DolguGöreceli bir dolgu ile oranları koruyun

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris sem ut sadece convallis maximus et vitae orci'de. Nulla ultrices alkolsüz içecek.

Gördüğümüz gibi özellikleri tanımlıyoruz dolgu malzemesi piksel cinsinden ölçümler ile sabit değerler yerine yüzde değerleri ile her sınıfın, bu şekilde tarayıcının stil yorumlayıcısı, örneğimizi gördüğümüzde sonunda yerleştirdiğimiz değere göre giden bir ölçüm verecektir. tarayıcıda aşağıdakileri alıyoruz:

BÜYÜT

Şimdi pencerenin boyutunu küçültürsek, metinden kenarlara orantılı bir mesafeyi koruyarak bir ayarlamanın nasıl yapıldığını göreceğiz:

Daha sonra tasarımımızın nasıl korunduğunu fark ederiz ve onu içeren kişinin çözünürlüğünü azaltarak deformasyonu önler, böylece kullanıcımız için tutarlı bir deneyim sağlarız.

Diğer derslerde değineceğimiz daha gelişmiş kavramlar olsa da, bu birkaç püf noktası veya ipucu ile eski sitelerimize yeni bir hayat vermeyi başarabiliriz ve şimdi Google Sonuçlarda bize tercih yapabilmemiz için bir mobil versiyon istiyorlar. Harika sonuçlar elde etmek için en önemli şey, bu çözümlerin doğal olarak zihnimizden çıkması ve her zaman rehberlere başvurmak zorunda kalmaması için çok denemek ve çok pratik yapmaktır.

Bununla bu öğreticiyi bitiriyoruz, gördüğümüz gibi sonuçlara ulaşmak için herhangi bir çerçeveye ihtiyacımız yok duyarlı, ve ayrıca kombinasyonu bırakmamıza gerek yok HTML + CSSTek şey şu ki, kendi araçlarımızı oluşturmamız gerekiyorsa, tasarımımızı geliştirmenin memnuniyeti büyük bir ödül.