1
00:00:02,220 --> 00:00:08,250
Jadi sekarang dengan langkah-langkah dasar pertama yang diambil, jika saya sekarang mengisi angka di sini dan kami melanjutkan, ini

2
00:00:08,250 --> 00:00:10,330
semua terlihat bagus untuk saya di sini,

3
00:00:10,420 --> 00:00:12,980
ini semua bekerja, jika kita sekarang memulai permainan,

4
00:00:12,990 --> 00:00:19,560
maka saya juga ingin mengurangi jarak yang kita miliki ini di sini dan saya juga ingin memastikan bahwa kotak saya ada di

5
00:00:19,560 --> 00:00:20,020
bawah

6
00:00:20,040 --> 00:00:23,240
sana, jadi ini tebakan tebakan yang kita miliki, bahwa ini juga

7
00:00:23,250 --> 00:00:24,490
terlihat lebih baik.

8
00:00:25,050 --> 00:00:29,820
Nah, itu adalah sesuatu yang bisa kita lakukan di layar game tentu saja karena itulah layar yang saat

9
00:00:29,820 --> 00:00:31,350
ini kita lihat di sana.

10
00:00:31,410 --> 00:00:37,410
Sekarang untuk satu saja, ini adalah jarak, margin atas ini di wadah bawah kami yang merupakan wadah ini, margin atas adalah jarak antara

11
00:00:37,590 --> 00:00:43,370
angka di sini dan wadah dan saya ingin mengubah ini. Sekarang untuk mengubah ini, kita

12
00:00:43,510 --> 00:00:44,720
dapat

13
00:00:44,760 --> 00:00:47,120
kembali menggunakan dimensi API.

14
00:00:47,280 --> 00:00:54,300
Jadi di sini, saya kembali mengimpor dimensi dari Bereaksi Asli dan sekarang di

15
00:00:54,510 --> 00:01:03,630
sana, kita dapat menghitung margin ini secara dinamis. Apa yang dapat kita lakukan di sini adalah kita dapat kembali mendapatkan

16
00:01:03,870 --> 00:01:09,630
dimensi jendela kita dan kemudian di sini, lebar atau dalam hal ini, mungkin tinggi dan kemudian

17
00:01:09,630 --> 00:01:17,430
membaginya dengan sesuatu tetapi ini akan sangat rumit, kita dapat membaginya dengan 20 misalnya , pada 20 dan melihat apakah itu

18
00:01:17,430 --> 00:01:21,990
terlihat bagus tapi ini benar-benar permainan menebak, mungkin bukan yang kita inginkan.

19
00:01:22,230 --> 00:01:28,320
Alih-alih, kami dapat memeriksa berapa tinggi yang kami miliki dan kemudian menggunakan

20
00:01:28,320 --> 00:01:34,920
jarak yang berbeda berdasarkan itu. Kita dapat memeriksa apakah tinggi badan kita katakanlah lebih besar dari 600, jika itu

21
00:01:35,310 --> 00:01:41,490
masalahnya, kita ingin memiliki jarak 20, jika tidak kita memiliki satu dari 10. Jadi kita juga dapat menggunakan dimensi yang kita

22
00:01:41,490 --> 00:01:46,920
hitung dalam kondisi if, dalam hal ini dalam ekspresi ternary di sini, tetapi Anda

23
00:01:46,920 --> 00:01:49,890
dapat menggunakannya dalam normal jika memeriksa juga.

24
00:01:49,970 --> 00:01:56,300
Jadi sekarang kita bisa kembali ke sini dan apa yang sekarang kita lihat adalah bahwa ketika kita memulai permainan, kita tidak memiliki celah

25
00:01:56,300 --> 00:02:01,580
yang besar di sini di layar yang lebih kecil, pada iPhone yang merupakan layar yang lebih besar, kita pasti

26
00:02:01,670 --> 00:02:05,960
memiliki celah yang lebih besar dan untuk melihat lebih jelas, Anda tentu saja bisa bermain-main

27
00:02:06,050 --> 00:02:12,690
dengan itu dan misalnya menggunakan 30 untuk layar yang lebih kecil dan 30 untuk layar yang lebih besar dan 5 untuk layar yang lebih

28
00:02:12,800 --> 00:02:15,170
kecil dan sekarang Anda pasti harus melihatnya.

29
00:02:15,350 --> 00:02:17,680
Di sini kita memiliki celah kecil dan

30
00:02:17,840 --> 00:02:20,450
di sini, kita memiliki celah yang lebih besar.

31
00:02:20,750 --> 00:02:23,540
Jadi kita juga bisa menggunakan ini dalam kondisi if.

32
00:02:23,540 --> 00:02:29,060
Sekarang dengan itu, saya akan mengatur ini kembali ke 20 dan 5 di sini tapi ini sekarang mudah-mudahan juga menunjukkan cara lain

33
00:02:29,060 --> 00:02:30,110
untuk menggunakan ini.

34
00:02:30,110 --> 00:02:34,700
Anda dapat menggunakan ini jika kondisi yang tentu saja memberi Anda banyak fleksibilitas dalam kasus

35
00:02:34,700 --> 00:02:40,670
di mana Anda tidak ingin menggunakan lebar dalam perhitungan dinamis tetapi Anda memiliki nilai hardcoded yang berbeda yang ingin Anda

36
00:02:40,670 --> 00:02:46,730
gunakan berdasarkan pada breakpoints berbeda yang Anda ingin set, sedikit seperti yang Anda ketahui dari CSS di mana Anda juga

37
00:02:46,730 --> 00:02:51,080
memiliki kueri media dan kemudian Anda dapat membuat hal yang berbeda berdasarkan kueri media

38
00:02:51,080 --> 00:02:51,830
yang berbeda.

39
00:02:52,070 --> 00:02:57,740
Anda juga tidak dibatasi untuk menggunakan dimensi API di sana di stylesheet Anda, tentu saja, Anda dapat menggunakannya di mana saja di mana Anda

40
00:02:57,740 --> 00:03:04,100
dapat menggunakan Javascript, jadi di mana saja pada komponen Anda pada dasarnya. Anda juga dapat melampirkan gaya yang sama sekali

41
00:03:04,130 --> 00:03:10,070
berbeda berdasarkan lebar atau tinggi yang tersedia. Kita juga dapat menggunakan dimensi dapatkan

42
00:03:10,100 --> 00:03:18,050
jendela di sini di mana saya menetapkan gaya saya dan misalnya, periksa tinggi badan saya di sini, periksa apakah itu

43
00:03:18,050 --> 00:03:25,400
lebih besar dari 600 dan jika itu yang terjadi, gunakan wadah gaya tombol dan sebaliknya, gunakan wadah gaya

44
00:03:25,520 --> 00:03:31,520
tombol kecil jika kita punya ini kelas. Saya tidak memilikinya di sini, jadi saya akan menyingkirkan itu, tetapi itu cara lain

45
00:03:31,670 --> 00:03:37,280
untuk menggunakan ini, Anda dapat menggunakannya di mana saja di mana Javascript berjalan. Anda juga tentu saja dapat menggunakannya di sini,

46
00:03:37,280 --> 00:03:45,690
Anda dapat memiliki jika periksa di sini tepat sebelum Anda mengembalikan kode JSX Anda dan memeriksa dapatkan tinggi jendela, jika itu lebih besar dari 600 dan

47
00:03:45,690 --> 00:03:49,830
jika itu kasusnya katakanlah, Anda mengembalikan kode JSX yang sama sekali berbeda dan

48
00:03:49,830 --> 00:03:55,910
karena itu kode ini setelah itu tidak akan pernah berjalan jika Anda kembali ke sini dan hanya jika Anda

49
00:03:55,910 --> 00:03:57,230
tidak membuatnya menjadi

50
00:03:57,230 --> 00:04:02,560
ini jika memeriksa, jadi jika Anda memiliki perangkat yang tidak setinggi ini, maka Anda membuatnya di sana.

51
00:04:02,600 --> 00:04:09,260
Jadi Anda benar-benar fleksibel di sini dan gunakan fleksibilitas itu untuk membangun tata letak yang Anda inginkan karena ini adalah

52
00:04:09,410 --> 00:04:14,020
tentang semua ini dan apa yang memberi Anda banyak fleksibilitas untuk aplikasi Anda.

53
00:04:14,120 --> 00:04:15,440
Jadi itu jarak di

54
00:04:15,440 --> 00:04:19,210
sini, sekarang saya juga ingin mengubah item log saya di sana, itu juga

55
00:04:19,340 --> 00:04:21,560
sesuatu yang bisa kita lakukan dengan mudah.

56
00:04:21,740 --> 00:04:28,400
Kami memiliki item daftar kami di sana dan pada item daftar, kami menetapkan lebar 100% karena kami mengatur lebar daftar

57
00:04:28,400 --> 00:04:32,330
kami di sini dengan wadah daftar dan itu diatur ke 60%.

58
00:04:32,600 --> 00:04:36,750
Sekarang 60% terlihat cukup bagus di perangkat yang lebih besar saya pikir tetapi pada

59
00:04:36,910 --> 00:04:40,280
perangkat yang lebih kecil, kita bisa lebih besar dari itu.

60
00:04:40,280 --> 00:04:48,050
Sekarang kita tentu saja dapat mencoba lagi untuk menyelesaikan ini dengan aturan yang berbeda di sini di mana kita menetapkan lebar maks

61
00:04:48,050 --> 00:04:55,370
dan lebar min dan mungkin juga menggunakan dimensi API untuk menghitung ini secara dinamis atau kita lagi menggunakan centang jika.

62
00:04:55,910 --> 00:05:03,500
Di sini kita bisa lagi mengatakan dimensi dapatkan jendela, dapatkan lebar yang tersedia dalam kasus ini dan jika

63
00:05:03,500 --> 00:05:07,340
itu katakanlah lebih besar dari 500, maka saya

64
00:05:07,340 --> 00:05:15,220
ingin menggunakan 60%, kalau tidak saya ingin menggunakan 80%. Jadi sekarang kita cukup membuat wadah yang lebih luas, daftar yang

65
00:05:15,220 --> 00:05:18,070
lebih luas berdasarkan lebar yang tersedia pada perangkat

66
00:05:18,250 --> 00:05:19,340
yang kita

67
00:05:19,420 --> 00:05:24,490
jalankan dan mari kita benar-benar menggunakan 350 di sini mungkin bukan 500 karena kita berbicara

68
00:05:24,490 --> 00:05:26,350
tentang lebar, bukan tentang tinggi.

69
00:05:26,380 --> 00:05:31,630
Jadi sekarang di sini jika kita menjalankan ini pada iPhone, kita harus memiliki lebar yang sama seperti sebelumnya tetapi pada layar yang lebih

70
00:05:32,080 --> 00:05:33,820
kecil, kita memiliki item yang lebih besar.

71
00:05:33,820 --> 00:05:37,650
Jadi itu juga sesuatu yang bisa kita lakukan dan tentu saja Anda bisa bermain-main dengan breakpoint yang

72
00:05:37,690 --> 00:05:39,140
Anda setting secara efektif di sini.

73
00:05:39,160 --> 00:05:41,290
Anda dapat mencoba berbagai ukuran breakpoint di sini.

74
00:05:41,320 --> 00:05:43,420
Tentu saja Anda juga dapat memiliki beberapa breakpoint,

75
00:05:43,420 --> 00:05:48,940
Anda dapat memiliki ekspresi ternary bersarang di sini atau sebelum Anda menulis terlalu banyak ekspresi bersarang, cukup mengatur objek gaya yang berbeda

76
00:05:48,940 --> 00:05:56,500
di sini yang kemudian Anda muat dengan berbeda jika cek yang Anda gunakan di sana. Sekedar memberi contoh untuk ini, kita

77
00:05:56,500 --> 00:06:03,820
bisa memiliki daftar kontainer besar di sana-sini, kita atur yang fleksibel dan kita atur

78
00:06:03,820 --> 00:06:09,320
lebar misalkan 80% karena ini yang besar dan di sini

79
00:06:09,450 --> 00:06:13,380
kita punya yang normal dengan 60% .

80
00:06:13,380 --> 00:06:18,400
Sekarang saya tidak punya kondisi jika di sana tetapi saya memiliki dua objek gaya yang

81
00:06:18,400 --> 00:06:22,320
berbeda dan sekarang kita hanya perlu melampirkan objek gaya yang berbeda

82
00:06:22,680 --> 00:06:31,780
di sana, tidak di sini tapi di sini tentu saja, pada pandangan ini. Nah, untuk melakukan ini, kita cukup mengatur variabel gaya kontainer daftar di

83
00:06:31,780 --> 00:06:38,740
sini misalnya dan menunjuk pada daftar gaya kontainer yang merupakan standar kita tetapi kemudian menambahkan tanda centang di sini di

84
00:06:38,830 --> 00:06:46,750
mana kita memeriksa apakah dimensi mendapatkan lebar jendela dan sekarang jika lebar di sini adalah katakanlah lebih kecil dari 350, jadi jika kita

85
00:06:46,750 --> 00:06:51,910
memiliki perangkat kecil, maka kita ingin memiliki wadah daftar besar, maka kita dapat mengatur

86
00:06:51,910 --> 00:06:53,470
gaya wadah daftar,

87
00:06:53,470 --> 00:06:55,960
variabel ini sama dengan wadah gaya daftar

88
00:06:55,960 --> 00:07:01,960
besar untuk menunjuk pada objek gaya ini dan sekarang kita dapat menggunakan objek gaya di sini pada

89
00:07:01,960 --> 00:07:07,180
tampilan di mana kita memerlukan gaya kontainer daftar, kita menggunakan variabel sekarang yang menyimpan objek

90
00:07:07,330 --> 00:07:13,060
gaya kontainer daftar berbeda berdasarkan lebar perangkat kita. Dan jika kita sekarang menyimpan ini dan menjalankan ini lagi, Anda

91
00:07:13,060 --> 00:07:19,270
melihat bahwa pada iPhone dengan perangkat yang lebih besar di mana kami memiliki lebih banyak lebar, kami mendapat wadah yang lebih kecil dan di sini

92
00:07:19,270 --> 00:07:24,200
di ponsel Android dengan perangkat yang lebih kecil, dengan lebar yang lebih sedikit, kami mendapatkan wadah yang lebih besar.

93
00:07:24,280 --> 00:07:26,980
Jadi ini hasil yang sama seperti sebelumnya tetapi

94
00:07:27,070 --> 00:07:32,080
sedikit lebih mudah dibaca dan sekarang kita dapat memiliki beberapa seperti jika memeriksa di sini di mana

95
00:07:32,080 --> 00:07:34,900
kita menyimpan gaya yang berbeda di sini dalam gaya

96
00:07:34,900 --> 00:07:42,070
wadah daftar yang kemudian kita gunakan di sana, ini bisa lebih mudah dibaca daripada memiliki ekspresi ternary bersarang di sana di objek stylesheet Anda.

97
00:07:42,070 --> 00:07:47,650
Jadi ini adalah bagaimana Anda dapat bermain-main dengan itu dan menyadari bahwa fleksibilitas dimensi API sangat

98
00:07:47,770 --> 00:07:48,970
penting di sini.