Bu dersi tekrar ziyaret etmeye devam edeceğiz, özellikle önyükleme çubuğu ile çalışmaya devam edeceğiz, özellikle
vurgulamak istediğim iki ana özellik var.
Birincisi, kısaca bahsettiğim dört farklı boyuta değinmek istiyorum.
Elgie sütunuyla çalıştık bunun ne anlama geldiğinden bahsetmedi ve bununla birlikte çalışacak diğer
üç boyut daha var.
Ayrıca bu 12 üniteyi daha küçük parçalara bölmek için ızgaraları diğer ızgaralarda nasıl
yuvalayabildiğimizi göstermek istiyorlar.
yaptığımız demoda bir göz atarak başlayacağım dört boyuttan söz etmeye başlayın.
Ancak tarayıcıya geri dönüp son derste
Dolayısıyla, iki sütun var; bunlardan birinde 12 sütun var; biri de üç sütun var;
biri pencerenin boyutunu değiştirirken ne olacağını izliyor ve ardından her sütunda her şeyin
değiştiği bir kırılma noktasına ulaştık.
Şimdi karşıdan karşıya gelen tam bir 12 ünite sürüyor ve birbirlerinin üstüne yığıyorlar ve yeniden boyutlandırmaya
devam ederken değişiklikleri gerçekten farketmeyeceksiniz.
Hepsi 12 ünite almaya ve birbirlerinin üzerine yığmaya devam ediyorlar.
Ancak aslında belirtebileceğimiz dört farklı boyut vardır, böylece dört farklı düzen görebiliriz.
Şu anda bu, ekstra küçük erişim olan bir mobil düzen.
Sonra çok küçük oluyoruz, ki bu da bir tablet yerleşiyor ve buradaki orta gibi.
Bu, bir dizüstü bilgisayarda veya daha küçük bir tarayıcı penceresinde ve daha sonra burada bulunan büyük olabilir.
Dolayısıyla, büyük olmanın arasında giderken burada çok fazla fark varmış gibi
görünmüyor.
Ancak dört boyut vardır ve bu boyutların her biri için oranlar ve oranlar belirtebiliriz.
Izgara seçeneklerinin altındaki önyükleme platformunda ızgara sistemi görüyorsunuz, burada bir masa var ve bize
dört farklı ebat gösteriyor.
Yani, telefonlar gibi ekstra küçük cihazlar, tablet orta cihazlar olan küçük cihazlardan daha fazladır. Bunlar, on
iki yüz piksel genişliğinden daha büyük masaüstü büyük cihazları veya daha büyük masaüstleri ve her birinin,
sütun erişiminin aslında küçük olması için kullanabileceğimiz bir önek içermesidir.
S. M. küçük M. D. orta ve LG biz kullanıyor oldum büyük.
Diyelim ki, düzenimin büyük kesme noktasında aynı kalmasını istiyorum diyelim.
Ve sonra orta sağa geçtiğimizde, her biri tek bir birim alan bu 12 sütunu istiyorum.
Bunun yerine her birinin iki birlik almasını istiyorum.
Dolayısıyla, altı tanesine rastlıyoruz.
Ve sonra 6 daha aşağıda.
Bu yüzden ona odaklanalım ve işleri basitleştirelim.
Aslında ikinci sıradan kurtulacağım.
Elimizdeki tek şey burada.
O zaman bu orta kesme noktasına geldiğinde bunun olmasını istemiyorum.
Bunun yerine yapmak için altı sütun geçmesini istiyorum.
Sadece başka bir sınıfa ekliyorum.
Bu yüzden her biri için yapacağım ve sütun orta olacak.
Bu ızgaralar orta büyüklükte olduğunda, her birinin iki adet almasını isteriz ve biz de tasarruf edeceğiz.
Şimdi gidip yenileyelim.
Tam boy yapın.
Hiçbir şey değişmiyor çünkü büyük boydayız.
Ama şimdi ortama geçiş yaptığımda.
Dikkat edin, şimdi her biri iki ünite alıyor ve altı tane geçiyoruz.
Ve eğer onu küçültmeye devam edersek, küçük kesme noktasına gelirsek, her bir sütunun
tam 12 birime gideceği ve birbirinin üstüne yığıldığı yerde değişir.
Öyleyse geri dönelim ve okumaya devam edelim, eski yeminimize dönelim ve eski şemamızı canlandıralım.
Bu nedenle ondan kurtulacağız, çünkü aslında 12 farklı bileşene rastlamak yaygın
değildir.
Genellikle üç ya da dört bazen altı ile çalışıyorsunuz ama 12 ayrı sütun oldukça nadir.
Şimdi buna geri dönelim ve ne yapacağız Olafur Arnold'un tur çizelgesinden oynamayı deneyin
ve yeniden yapın.
Böylece dörtte başlıyor.
Sonra küçülüyoruz.
Orta derecede bir kırılma noktası var ve hala dörtte ve daha sonra küçük kırılma noktasına varıyoruz ve
karşı tarafa geçiyoruz.
Ve sonra mobil x veya küçük bir tane.
Bu yüzden, yalnızca yapıyı değil içeriği yeniden deneyeceğiz.
Bu yüzden geri döneceğiz.
Ve dörtümüzün başlamasıyla başlamak istiyoruz.
Bu da her birinin üç ünite kaldığını ve sonra metni burada değiştirebileceğimiz anlamına geliyor.
Ve sadece söyleyecek ya da çıkalım.
Dolayısıyla biz taze olsaydık, dört sütun olmalıydı ki bunu da yaptığımız şey tam
da budur, dört sütun başlıyor.
Ve tek fark gerçek içerik.
Bu yüzden her sütunun yerine bir H üç paragrafı bir düğme ve başka ne olursa olsun
biraz H eklemeliyiz. R. Görünüşe benzer ve yine de aynı aralığı elde edeceğiz.
Tamam.
Bir sonraki kırılma noktası, orta seviyeye geldiğimiz zamandır.
Dörtte kaldı.
Dolayısıyla yapmamız gereken şey, orta kesme noktasını belirtmektir; bu nedenle, bu noktaya geldiğimizde hala
her biri üç ünite almış olmalı.
Yüce geri dönüp bunları ekleyebiliriz ve tekrar orta üçümüz olarak adlandırabilir ve kaydedebiliriz ve her biri orta derecede vurduğumuz üç üniteyle başlıyoruz
ve üç ünitede kalıyoruz ve daha sonra küçük başlıyoruz ve şimdi yine 12
ünitiz.
Ve bunu izlemek için ne istiyoruz; küçük boyutlara ulaştığımızda artık her biri altı adet
alıyoruz, böylece buraya girebilir ve bunu küçük 6 sütununa ekleyebiliriz.
Bu nedenle, her biri orta büyüklükte 12 büyüklüğündeki üç ünite yüzde 25'ini kaplar.
Aynı şey.
Yüzde 25'ini, daha sonra tabletler için olan küçük boyutta, yüzde 50'sini kaplıyorlar.
Bu yüzden, her biri üç dakika, daha sonra üç üniteyi yenileyelim, o zaman küçük çarpıştık.
Ve şimdi her biri altı adet alıyor ve sonra fazladan küçük varmış.
Ardından, tam istediğimiz 12 üniteyi alıyorlar.
Ne zaman küçük çarpıştığımızın farkına varırız ve tek bir üniteyi ele almasını istiyoruz.
Tamam.
Yani buna sahip olursak, yüce geri dönersek yapabileceğimiz küçük bir değişiklik var.
Bu üç üniteyi büyük ve orta için iki kez belirlediğimizi göreceksiniz.
Aslında büyük üç sütundan kurtulabiliriz ve sadece orta kısmını koyabiliriz ve önyükleme durdurucusu, orta değeri üç
olarak ayarladığımız ve açıkça büyük ayarlamadığımız için yalnızca orta için ayarladıklarımızı
alacağımızı ve uygulayacağımızı bilecek büyük.
Yani aynı şekilde çalışır.
Hiçbir şey değişmedi.
Zaten yenilenmiş görünüyorsun, orta kesme hâlâ orada ve küçük işlerimiz aynı.
Dolayısıyla bunu iki kez belirtmek zorunda değiliz.
Ben de geleyim. Z. Bundan kurtulduk ve tam olarak aynı şekilde çalışıyor.
Aslında bir göz atarsak, Web sitesine gideriz.
Bahse girerim bunları incelersek, orada göreceksin.
Sütun küçük altı sütun orta üç.
Tam olarak şu dört farklı ebadı kapattık.
Umarım şebeke sisteminin çok yönlü ve kullanışlı olduğunu görebilirsiniz.
Hadi geri dönelim.
Ve şimdi ben yuva ızgaraları ele alacağız.
Diyelim ki burada bu ilk sütun yerine yarıya bölmek ve bunun sol tarafında bir şey varsa
ve sağ tarafta bir şey var diyelim.
Aslında gidip içeride başka bir satır ekleyebilirim.
Yani sınıf eşittir.
Ve o sıranın içinde bir sınıfı sütuna eşit bir div ekleyebilirim ve hepsi
şimdi sadece sütun büyük altı ve bir sütun büyük 6 için çok büyük ve ben sadece biraz metin burada yarım
ve diğer yarısı yazacağım.
İlk yarıya ve diğer yarısına değiştirelim ve onlara klasik bir pembe renk kazandıralım.
Şimdi yaptığımız şu ki, üçümüz arasında hala veya dörtümüz var.
Bir iki üç dört ve birincisinde başka bir satır ekleyerek 12 birime bölüyoruz ve ilk
altıyı bir şeyler söylemek için kullanıyoruz ve ikinci bir altısı kullanarak başka
bir şey kaydetmek veya yenilemektelik. .
İşte siz gidin ve daha da belirgin hale getirin.
Onlara başka bir sınıf vereceğim.
Diyelim ki turuncu diyelim.
Henüz yok.
Ve bunun turuncu renkte görüneceğini ve arka plan turuncu renginin olacağını ve bir piksel katı kırmızı renk ekleyeceğiz
ve daha sonra da tamam mı diyeceğiz.
Yenileyerek görebilirsiniz, şimdi bu dört şeyi görüyoruz.
Her biri üç ünite alır, ancak birincisini altı birime, altı birimi de o satırı
ekleyerek böldük ve satır eklemelisin.
Bir sütun yerine bir sütununuz olduğu yerde bunu yapmaya başlayamazsınız.
Bir sıra olmalı.
Ve bir tane daha yapalım.
Bu sonuncuyu buraya altı küçük parçaya koyalım.
Dolayısıyla div sınıfının satır yerine eşit bir satır eklemeliyiz.
Başka bir div'e ihtiyacımız var ve bunlardan altısına sahip olacağımız yerden sütun büyük ikisinin her biri 12
birimden ikisini alıyor.
Ve biz altı istiyoruz ve sonra her birine gidip o turuncu sınıfa sadece onları görebilmemiz
için ekleyelim.
TAMAM.
Yani yarım bölünmüş ilk dört sütun arasında dört büyük sütun var.
Sonuncusu altı parçaya bölüyoruz ve gerçekten hiçbir şey göremiyorsunuz, böylece orada herhangi bir metin koymadık.
O halde gidelim.
Ya da aslına bakarsanız, sınıfın portakalına yalnızca bir boy veya yükseklik verilir.
Her biri 50 piksel yapalım.
Yenilersem, şu an portakal rengi turuncu olan her şey 50 piksel yüksekliğinde
görünür.
Dolayısıyla, eşit olarak bölünmüş iki sütun ve daha sonra bölünmüş altı eşit bölünmüş sütun bu
dört eşit bölünmüş üst seviye sütun içimizde.
Böylece ızgara sisteminin tüm önemli parçaları bu.
Kısaca her sırada 12 adet var.
Onları istediğiniz gibi bölüştünüz.
Dört büyüklükte büyük küçük orta küçük ekstra küçük vardır ve bu dört adet kırılma noktasından herhangi birinde
bu dört üniteyi yeniden atayabilirsiniz.
Ve bu güzel tepki veren düzenlerle bu şekilde sona erdiniz ve genelde
gördüğünüz desen mobil sitelerde.
ekstra küçük boyutta birçok site içeriğini birbirinin üstüne yapıştırır.
Bu yüzden, küçültersem,
Bu, mobil cihazınızda aynı satırda birden fazla içeriğe sahip olmadığınız ortak düzen.
TAMAM.
Hadi yüce geri dönelim.
Üç ana hedeften bahsettiğimden emin olun.
Bu yüzden ızgaralı sistemin amacı, şeyleri düzenlemek için bize yardımcı olan amacı konuştuk.
Bu harika.
Dört farklı boyu anlayın.
Bunlar, büyük, orta küçük ekstra küçük ve daha sonra iç içe geçmiş ızgaralar.
İşte burada yaptığımız şey, bir sütun yerine bir satır eklediğimizde, bir sonraki
videoda bu satırı başka alt sütunlarla doldurabiliyoruz.
Izgara sistemini kullanarak basit bir resim ızgarası inşa edeceğiz.