1
00:00:00,390 --> 00:00:05,640
Bu dersi tekrar ziyaret etmeye devam edeceğiz, özellikle önyükleme çubuğu ile çalışmaya devam edeceğiz, özellikle

2
00:00:05,640 --> 00:00:07,550
vurgulamak istediğim iki ana özellik var.

3
00:00:07,590 --> 00:00:12,070
Birincisi, kısaca bahsettiğim dört farklı boyuta değinmek istiyorum.

4
00:00:12,150 --> 00:00:16,950
Elgie sütunuyla çalıştık bunun ne anlama geldiğinden bahsetmedi ve bununla birlikte çalışacak diğer

5
00:00:16,950 --> 00:00:18,530
üç boyut daha var.

6
00:00:18,600 --> 00:00:24,270
Ayrıca bu 12 üniteyi daha küçük parçalara bölmek için ızgaraları diğer ızgaralarda nasıl

7
00:00:24,270 --> 00:00:25,820
yuvalayabildiğimizi göstermek istiyorlar.

8
00:00:26,250 --> 00:00:31,200
yaptığımız demoda bir göz atarak başlayacağım dört boyuttan söz etmeye başlayın.

9
00:00:31,200 --> 00:00:34,100
Ancak tarayıcıya geri dönüp son derste

10
00:00:34,290 --> 00:00:41,700
Dolayısıyla, iki sütun var; bunlardan birinde 12 sütun var; biri de üç sütun var;

11
00:00:41,700 --> 00:00:48,660
biri pencerenin boyutunu değiştirirken ne olacağını izliyor ve ardından her sütunda her şeyin

12
00:00:48,660 --> 00:00:50,810
değiştiği bir kırılma noktasına ulaştık.

13
00:00:50,850 --> 00:00:57,420
Şimdi karşıdan karşıya gelen tam bir 12 ünite sürüyor ve birbirlerinin üstüne yığıyorlar ve yeniden boyutlandırmaya

14
00:00:57,420 --> 00:00:59,400
devam ederken değişiklikleri gerçekten farketmeyeceksiniz.

15
00:00:59,460 --> 00:01:03,140
Hepsi 12 ünite almaya ve birbirlerinin üzerine yığmaya devam ediyorlar.

16
00:01:03,330 --> 00:01:08,620
Ancak aslında belirtebileceğimiz dört farklı boyut vardır, böylece dört farklı düzen görebiliriz.

17
00:01:09,030 --> 00:01:13,850
Şu anda bu, ekstra küçük erişim olan bir mobil düzen.

18
00:01:14,040 --> 00:01:20,730
Sonra çok küçük oluyoruz, ki bu da bir tablet yerleşiyor ve buradaki orta gibi.

19
00:01:20,730 --> 00:01:26,590
Bu, bir dizüstü bilgisayarda veya daha küçük bir tarayıcı penceresinde ve daha sonra burada bulunan büyük olabilir.

20
00:01:26,940 --> 00:01:31,340
Dolayısıyla, büyük olmanın arasında giderken burada çok fazla fark varmış gibi

21
00:01:31,350 --> 00:01:31,870
görünmüyor.

22
00:01:31,980 --> 00:01:38,330
Ancak dört boyut vardır ve bu boyutların her biri için oranlar ve oranlar belirtebiliriz.

23
00:01:38,460 --> 00:01:44,850
Izgara seçeneklerinin altındaki önyükleme platformunda ızgara sistemi görüyorsunuz, burada bir masa var ve bize

24
00:01:44,850 --> 00:01:46,900
dört farklı ebat gösteriyor.

25
00:01:47,130 --> 00:01:53,220
Yani, telefonlar gibi ekstra küçük cihazlar, tablet orta cihazlar olan küçük cihazlardan daha fazladır. Bunlar, on

26
00:01:53,400 --> 00:01:59,190
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,

27
00:01:59,190 --> 00:02:02,940
sütun erişiminin aslında küçük olması için kullanabileceğimiz bir önek içermesidir.

28
00:02:03,000 --> 00:02:08,630
S. M. küçük M. D. orta ve LG biz kullanıyor oldum büyük.

29
00:02:09,030 --> 00:02:14,170
Diyelim ki, düzenimin büyük kesme noktasında aynı kalmasını istiyorum diyelim.

30
00:02:14,340 --> 00:02:22,020
Ve sonra orta sağa geçtiğimizde, her biri tek bir birim alan bu 12 sütunu istiyorum.

31
00:02:22,800 --> 00:02:25,320
Bunun yerine her birinin iki birlik almasını istiyorum.

32
00:02:25,320 --> 00:02:27,670
Dolayısıyla, altı tanesine rastlıyoruz.

33
00:02:27,690 --> 00:02:29,510
Ve sonra 6 daha aşağıda.

34
00:02:29,820 --> 00:02:32,880
Bu yüzden ona odaklanalım ve işleri basitleştirelim.

35
00:02:33,100 --> 00:02:36,360
Aslında ikinci sıradan kurtulacağım.

36
00:02:36,600 --> 00:02:39,170
Elimizdeki tek şey burada.

37
00:02:39,210 --> 00:02:43,730
O zaman bu orta kesme noktasına geldiğinde bunun olmasını istemiyorum.

38
00:02:43,740 --> 00:02:48,510
Bunun yerine yapmak için altı sütun geçmesini istiyorum.

39
00:02:48,510 --> 00:02:50,740
Sadece başka bir sınıfa ekliyorum.

40
00:02:50,940 --> 00:02:58,120
Bu yüzden her biri için yapacağım ve sütun orta olacak.

41
00:02:58,200 --> 00:03:05,600
Bu ızgaralar orta büyüklükte olduğunda, her birinin iki adet almasını isteriz ve biz de tasarruf edeceğiz.

42
00:03:05,640 --> 00:03:07,200
Şimdi gidip yenileyelim.

43
00:03:07,380 --> 00:03:09,120
Tam boy yapın.

44
00:03:09,120 --> 00:03:12,380
Hiçbir şey değişmiyor çünkü büyük boydayız.

45
00:03:12,570 --> 00:03:16,190
Ama şimdi ortama geçiş yaptığımda.

46
00:03:16,200 --> 00:03:21,380
Dikkat edin, şimdi her biri iki ünite alıyor ve altı tane geçiyoruz.

47
00:03:21,630 --> 00:03:28,230
Ve eğer onu küçültmeye devam edersek, küçük kesme noktasına gelirsek, her bir sütunun

48
00:03:28,230 --> 00:03:33,480
tam 12 birime gideceği ve birbirinin üstüne yığıldığı yerde değişir.

49
00:03:33,900 --> 00:03:41,040
Öyleyse geri dönelim ve okumaya devam edelim, eski yeminimize dönelim ve eski şemamızı canlandıralım.

50
00:03:41,130 --> 00:03:46,410
Bu nedenle ondan kurtulacağız, çünkü aslında 12 farklı bileşene rastlamak yaygın

51
00:03:46,410 --> 00:03:47,160
değildir.

52
00:03:47,160 --> 00:03:53,300
Genellikle üç ya da dört bazen altı ile çalışıyorsunuz ama 12 ayrı sütun oldukça nadir.

53
00:03:53,400 --> 00:03:59,550
Şimdi buna geri dönelim ve ne yapacağız Olafur Arnold'un tur çizelgesinden oynamayı deneyin

54
00:03:59,550 --> 00:04:01,250
ve yeniden yapın.

55
00:04:01,590 --> 00:04:04,200
Böylece dörtte başlıyor.

56
00:04:04,200 --> 00:04:05,400
Sonra küçülüyoruz.

57
00:04:05,550 --> 00:04:12,060
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

58
00:04:12,060 --> 00:04:13,100
karşı tarafa geçiyoruz.

59
00:04:13,140 --> 00:04:15,580
Ve sonra mobil x veya küçük bir tane.

60
00:04:15,990 --> 00:04:20,530
Bu yüzden, yalnızca yapıyı değil içeriği yeniden deneyeceğiz.

61
00:04:20,790 --> 00:04:22,080
Bu yüzden geri döneceğiz.

62
00:04:22,650 --> 00:04:25,740
Ve dörtümüzün başlamasıyla başlamak istiyoruz.

63
00:04:25,740 --> 00:04:31,860
Bu da her birinin üç ünite kaldığını ve sonra metni burada değiştirebileceğimiz anlamına geliyor.

64
00:04:31,860 --> 00:04:35,510
Ve sadece söyleyecek ya da çıkalım.

65
00:04:35,610 --> 00:04:43,470
Dolayısıyla biz taze olsaydık, dört sütun olmalıydı ki bunu da yaptığımız şey tam

66
00:04:43,470 --> 00:04:46,320
da budur, dört sütun başlıyor.

67
00:04:46,320 --> 00:04:48,720
Ve tek fark gerçek içerik.

68
00:04:48,720 --> 00:04:55,650
Bu yüzden her sütunun yerine bir H üç paragrafı bir düğme ve başka ne olursa olsun

69
00:04:55,650 --> 00:05:00,190
biraz H eklemeliyiz. R. Görünüşe benzer ve yine de aynı aralığı elde edeceğiz.

70
00:05:00,600 --> 00:05:01,200
Tamam.

71
00:05:01,200 --> 00:05:03,790
Bir sonraki kırılma noktası, orta seviyeye geldiğimiz zamandır.

72
00:05:03,960 --> 00:05:05,840
Dörtte kaldı.

73
00:05:06,300 --> 00:05:12,570
Dolayısıyla yapmamız gereken şey, orta kesme noktasını belirtmektir; bu nedenle, bu noktaya geldiğimizde hala

74
00:05:12,570 --> 00:05:15,440
her biri üç ünite almış olmalı.

75
00:05:15,600 --> 00:05:26,810
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

76
00:05:26,840 --> 00:05:33,300
ve üç ünitede kalıyoruz ve daha sonra küçük başlıyoruz ve şimdi yine 12

77
00:05:33,290 --> 00:05:34,190
ünitiz.

78
00:05:34,310 --> 00:05:42,610
Ve bunu izlemek için ne istiyoruz; küçük boyutlara ulaştığımızda artık her biri altı adet

79
00:05:43,400 --> 00:05:49,140
alıyoruz, böylece buraya girebilir ve bunu küçük 6 sütununa ekleyebiliriz.

80
00:05:49,400 --> 00:05:57,070
Bu nedenle, her biri orta büyüklükte 12 büyüklüğündeki üç ünite yüzde 25'ini kaplar.

81
00:05:57,120 --> 00:05:57,920
Aynı şey.

82
00:05:58,010 --> 00:06:04,730
Yüzde 25'ini, daha sonra tabletler için olan küçük boyutta, yüzde 50'sini kaplıyorlar.

83
00:06:05,480 --> 00:06:12,980
Bu yüzden, her biri üç dakika, daha sonra üç üniteyi yenileyelim, o zaman küçük çarpıştık.

84
00:06:13,040 --> 00:06:17,880
Ve şimdi her biri altı adet alıyor ve sonra fazladan küçük varmış.

85
00:06:17,940 --> 00:06:21,620
Ardından, tam istediğimiz 12 üniteyi alıyorlar.

86
00:06:21,810 --> 00:06:27,350
Ne zaman küçük çarpıştığımızın farkına varırız ve tek bir üniteyi ele almasını istiyoruz.

87
00:06:27,380 --> 00:06:28,010
Tamam.

88
00:06:28,010 --> 00:06:33,240
Yani buna sahip olursak, yüce geri dönersek yapabileceğimiz küçük bir değişiklik var.

89
00:06:33,770 --> 00:06:39,560
Bu üç üniteyi büyük ve orta için iki kez belirlediğimizi göreceksiniz.

90
00:06:39,560 --> 00:06:46,700
Aslında büyük üç sütundan kurtulabiliriz ve sadece orta kısmını koyabiliriz ve önyükleme durdurucusu, orta değeri üç

91
00:06:46,740 --> 00:06:51,650
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ı

92
00:06:51,650 --> 00:06:54,320
alacağımızı ve uygulayacağımızı bilecek büyük.

93
00:06:54,440 --> 00:06:55,880
Yani aynı şekilde çalışır.

94
00:06:55,880 --> 00:06:56,650
Hiçbir şey değişmedi.

95
00:06:56,660 --> 00:07:02,420
Zaten yenilenmiş görünüyorsun, orta kesme hâlâ orada ve küçük işlerimiz aynı.

96
00:07:02,420 --> 00:07:04,800
Dolayısıyla bunu iki kez belirtmek zorunda değiliz.

97
00:07:05,300 --> 00:07:10,460
Ben de geleyim. Z. Bundan kurtulduk ve tam olarak aynı şekilde çalışıyor.

98
00:07:10,520 --> 00:07:14,990
Aslında bir göz atarsak, Web sitesine gideriz.

99
00:07:15,000 --> 00:07:19,770
Bahse girerim bunları incelersek, orada göreceksin.

100
00:07:19,780 --> 00:07:22,590
Sütun küçük altı sütun orta üç.

101
00:07:22,790 --> 00:07:26,990
Tam olarak şu dört farklı ebadı kapattık.

102
00:07:27,070 --> 00:07:30,710
Umarım şebeke sisteminin çok yönlü ve kullanışlı olduğunu görebilirsiniz.

103
00:07:30,750 --> 00:07:31,520
Hadi geri dönelim.

104
00:07:31,740 --> 00:07:33,960
Ve şimdi ben yuva ızgaraları ele alacağız.

105
00:07:34,310 --> 00:07:40,130
Diyelim ki burada bu ilk sütun yerine yarıya bölmek ve bunun sol tarafında bir şey varsa

106
00:07:40,130 --> 00:07:42,710
ve sağ tarafta bir şey var diyelim.

107
00:07:42,800 --> 00:07:47,340
Aslında gidip içeride başka bir satır ekleyebilirim.

108
00:07:47,370 --> 00:07:49,230
Yani sınıf eşittir.

109
00:07:49,740 --> 00:07:56,300
Ve o sıranın içinde bir sınıfı sütuna eşit bir div ekleyebilirim ve hepsi

110
00:07:56,300 --> 00:08:06,620
ş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

111
00:08:06,710 --> 00:08:09,100
ve diğer yarısı yazacağım.

112
00:08:09,360 --> 00:08:18,170
İlk yarıya ve diğer yarısına değiştirelim ve onlara klasik bir pembe renk kazandıralım.

113
00:08:18,200 --> 00:08:24,000
Şimdi yaptığımız şu ki, üçümüz arasında hala veya dörtümüz var.

114
00:08:24,000 --> 00:08:30,290
Bir iki üç dört ve birincisinde başka bir satır ekleyerek 12 birime bölüyoruz ve ilk

115
00:08:30,290 --> 00:08:35,420
altıyı bir şeyler söylemek için kullanıyoruz ve ikinci bir altısı kullanarak başka

116
00:08:36,330 --> 00:08:38,530
bir şey kaydetmek veya yenilemektelik. .

117
00:08:38,960 --> 00:08:41,770
İşte siz gidin ve daha da belirgin hale getirin.

118
00:08:41,780 --> 00:08:43,280
Onlara başka bir sınıf vereceğim.

119
00:08:43,400 --> 00:08:45,170
Diyelim ki turuncu diyelim.

120
00:08:45,370 --> 00:08:46,940
Henüz yok.

121
00:08:46,940 --> 00:09:00,030
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

122
00:09:00,140 --> 00:09:04,870
ve daha sonra da tamam mı diyeceğiz.

123
00:09:05,540 --> 00:09:10,530
Yenileyerek görebilirsiniz, şimdi bu dört şeyi görüyoruz.

124
00:09:10,520 --> 00:09:16,880
Her biri üç ünite alır, ancak birincisini altı birime, altı birimi de o satırı

125
00:09:16,880 --> 00:09:19,160
ekleyerek böldük ve satır eklemelisin.

126
00:09:19,160 --> 00:09:22,520
Bir sütun yerine bir sütununuz olduğu yerde bunu yapmaya başlayamazsınız.

127
00:09:22,520 --> 00:09:23,980
Bir sıra olmalı.

128
00:09:24,260 --> 00:09:25,520
Ve bir tane daha yapalım.

129
00:09:25,910 --> 00:09:31,090
Bu sonuncuyu buraya altı küçük parçaya koyalım.

130
00:09:31,500 --> 00:09:39,770
Dolayısıyla div sınıfının satır yerine eşit bir satır eklemeliyiz.

131
00:09:39,770 --> 00:09:48,770
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

132
00:09:48,770 --> 00:09:50,310
birimden ikisini alıyor.

133
00:09:50,310 --> 00:09:58,070
Ve biz altı istiyoruz ve sonra her birine gidip o turuncu sınıfa sadece onları görebilmemiz

134
00:09:58,080 --> 00:09:59,370
için ekleyelim.

135
00:10:00,440 --> 00:10:01,150
TAMAM.

136
00:10:01,640 --> 00:10:06,540
Yani yarım bölünmüş ilk dört sütun arasında dört büyük sütun var.

137
00:10:06,650 --> 00:10:12,410
Sonuncusu altı parçaya bölüyoruz ve gerçekten hiçbir şey göremiyorsunuz, böylece orada herhangi bir metin koymadık.

138
00:10:12,920 --> 00:10:14,200
O halde gidelim.

139
00:10:14,270 --> 00:10:20,100
Ya da aslına bakarsanız, sınıfın portakalına yalnızca bir boy veya yükseklik verilir.

140
00:10:20,100 --> 00:10:22,950
Her biri 50 piksel yapalım.

141
00:10:22,940 --> 00:10:29,330
Yenilersem, şu an portakal rengi turuncu olan her şey 50 piksel yüksekliğinde

142
00:10:29,340 --> 00:10:29,960
görünür.

143
00:10:30,260 --> 00:10:37,640
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

144
00:10:37,730 --> 00:10:40,880
dört eşit bölünmüş üst seviye sütun içimizde.

145
00:10:40,880 --> 00:10:43,700
Böylece ızgara sisteminin tüm önemli parçaları bu.

146
00:10:43,860 --> 00:10:46,420
Kısaca her sırada 12 adet var.

147
00:10:46,560 --> 00:10:48,300
Onları istediğiniz gibi bölüştünüz.

148
00:10:48,360 --> 00:10:56,360
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

149
00:10:56,370 --> 00:10:58,900
bu dört üniteyi yeniden atayabilirsiniz.

150
00:10:59,000 --> 00:11:03,050
Ve bu güzel tepki veren düzenlerle bu şekilde sona erdiniz ve genelde

151
00:11:03,410 --> 00:11:04,870
gördüğünüz desen mobil sitelerde.

152
00:11:04,880 --> 00:11:10,700
ekstra küçük boyutta birçok site içeriğini birbirinin üstüne yapıştırır.

153
00:11:10,700 --> 00:11:12,830
Bu yüzden, küçültersem,

154
00:11:12,840 --> 00:11:18,180
Bu, mobil cihazınızda aynı satırda birden fazla içeriğe sahip olmadığınız ortak düzen.

155
00:11:19,080 --> 00:11:19,540
TAMAM.

156
00:11:19,700 --> 00:11:20,990
Hadi yüce geri dönelim.

157
00:11:21,090 --> 00:11:23,290
Üç ana hedeften bahsettiğimden emin olun.

158
00:11:23,610 --> 00:11:28,160
Bu yüzden ızgaralı sistemin amacı, şeyleri düzenlemek için bize yardımcı olan amacı konuştuk.

159
00:11:28,160 --> 00:11:29,270
Bu harika.

160
00:11:29,660 --> 00:11:31,690
Dört farklı boyu anlayın.

161
00:11:31,700 --> 00:11:36,740
Bunlar, büyük, orta küçük ekstra küçük ve daha sonra iç içe geçmiş ızgaralar.

162
00:11:37,040 --> 00:11:42,450
İşte burada yaptığımız şey, bir sütun yerine bir satır eklediğimizde, bir sonraki

163
00:11:42,600 --> 00:11:45,790
videoda bu satırı başka alt sütunlarla doldurabiliyoruz.

164
00:11:45,840 --> 00:11:48,650
Izgara sistemini kullanarak basit bir resim ızgarası inşa edeceğiz.