1
00:00:00,000 --> 00:00:04,717
[MUSIC]

2
00:00:04,717 --> 00:00:09,290
Những ngày này trong thế giới phát triển web, chúng ta thường nghe mọi người

3
00:00:09,290 --> 00:00:14,721
đề cập đến các thuật ngữ thiết kế đáp ứng và cách tiếp cận đầu tiên trên điện thoại di động.

4
00:00:14,721 --> 00:00:18,558
Hãy thử và hiểu ý nghĩa của những thuật ngữ này và

5
00:00:18,558 --> 00:00:23,480
chúng ảnh hưởng đến cách bạn thiết kế trang web và ứng dụng web của bạn như thế nào.

6
00:00:25,490 --> 00:00:30,745
Câu hỏi rõ ràng của bạn sẽ là lý do tại sao xem xét thiết kế đáp ứng?

7
00:00:30,745 --> 00:00:38,040
Để giúp chúng tôi hiểu được điều này, chúng ta hãy xem xét cách mọi người truy cập các trang web trong những ngày này?

8
00:00:38,040 --> 00:00:42,980
Theo truyền thống, khi các trang web được thiết kế lần đầu tiên, bạn có thể giả định

9
00:00:42,980 --> 00:00:47,100
rằng mọi người sẽ duyệt trang web của bạn từ máy tính.

10
00:00:48,170 --> 00:00:55,694
Những ngày này các trang web của bạn có thể được truy cập từ điện thoại thông minh, máy tính bảng hoặc

11
00:00:55,694 --> 00:01:02,250
máy tính có kích thước màn hình và độ phân giải màn hình khác nhau.

12
00:01:02,250 --> 00:01:09,350
Làm thế nào để chúng tôi hiển thị trang web của chúng tôi một cách nhất quán trên các thiết bị có kích thước màn hình khác nhau?

13
00:01:10,530 --> 00:01:14,570
Một kích thước phù hợp với tất cả các cách tiếp cận mà các

14
00:01:14,570 --> 00:01:19,020
nhà thiết kế trang web truyền thống đã thực hiện không còn hóa đơn cố định.

15
00:01:19,020 --> 00:01:24,338
Chúng ta cần một cách tiếp cận tốt hơn, một cách tiếp cận sẽ tự động

16
00:01:24,338 --> 00:01:30,940
điều chỉnh trang web của bạn với kích thước của màn hình mà nó đang được xem.

17
00:01:30,940 --> 00:01:38,190
Đây là nơi chúng ta phải thực hiện một cách tiếp cận để thích ứng với cổng xem của người dùng.

18
00:01:38,190 --> 00:01:42,890
Điều này phải được tích hợp vào thiết kế và phát triển trang web của bạn

19
00:01:42,890 --> 00:01:49,000
để nó sẽ tự động thích ứng với khung nhìn của thiết bị của người dùng.

20
00:01:50,260 --> 00:01:53,437
Để giúp bạn đánh giá cao hơn nhu cầu

21
00:01:53,437 --> 00:01:57,170
giải quyết các thiết bị có kích thước màn hình khác nhau.

22
00:01:57,170 --> 00:02:03,273
Tôi đang dùng sự giúp đỡ của các tùy chọn nhà phát triển mà có thể trình duyệt Safari

23
00:02:03,273 --> 00:02:10,110
cung cấp cho phép tôi để xem các trang web với màn hình có kích thước khác nhau.

24
00:02:10,110 --> 00:02:15,470
Vì vậy, hy vọng sẽ thuyết phục bạn về lý do tại sao chúng tôi thực hiện thiết kế web đáp ứng.

25
00:02:15,470 --> 00:02:19,622
Vì vậy, ở đây bạn thấy rằng trang web Coursera được

26
00:02:19,622 --> 00:02:24,476
hiển thị trên một 1920 bởi 1080 trang web màn hình.

27
00:02:24,476 --> 00:02:32,088
Đây sẽ là một máy tính để bàn lớn điển hình hoặc màn hình máy tính xách tay có độ phân giải cao.

28
00:02:32,088 --> 00:02:38,810
Sau đó, chúng ta hãy xem xét cùng một trang web đang được xem bằng cách sử dụng một màn hình nhỏ hơn như vậy.

29
00:02:38,810 --> 00:02:44,126
Vì vậy, bạn thấy tự động bố cục màn hình của bạn hơi

30
00:02:44,126 --> 00:02:49,214
điều chỉnh kích thước của khung nhìn của thiết bị của bạn,

31
00:02:49,214 --> 00:02:52,281
cùng một điều ở 800 x 600.

32
00:02:52,281 --> 00:02:59,708
Vì vậy, chúng ta hãy đi xuống trong kích thước màn hình, đây là một cái nhìn gần iPad của cùng một trang web.

33
00:02:59,708 --> 00:03:05,826
Đây là một kích thước iPad Air 2, đây là một kích thước iPad Mini 4,

34
00:03:05,826 --> 00:03:10,125
lưu ý sự chuyển đổi từ

35
00:03:10,125 --> 00:03:15,610
kích thước iPad Mini 4 sang iPhone 6S Plus ở chế độ chân dung.

36
00:03:15,610 --> 00:03:23,090
Bây giờ bạn sẽ nhận thấy rằng Bot Điều hướng đã thu gọn thành một nút ở đây

37
00:03:23,090 --> 00:03:28,850
, khi bạn nhấp vào sẽ hiển thị các tùy chọn từ Navigation Bash của bạn.

38
00:03:28,850 --> 00:03:35,027
Và chúng ta hãy nhìn vào cùng một điều trong iPhone 6S của chúng tôi

39
00:03:35,027 --> 00:03:40,990
ở chế độ phong cảnh, lưu ý cách màn hình áp dụng chính nó.

40
00:03:40,990 --> 00:03:46,578
Tương tự như vậy cho một iPhone 6S trong chế độ phong cảnh và

41
00:03:46,578 --> 00:03:52,300
đi xuống đến một iPhone SE, và bạn thấy làm thế nào các trang web

42
00:03:52,300 --> 00:03:56,941
đã thay đổi cách nó đang được render.

43
00:03:56,941 --> 00:04:03,395
Vì vậy, hy vọng, ví dụ này đã minh họa cho bạn làm thế nào và

44
00:04:03,395 --> 00:04:07,357
tại sao chúng ta cần thiết kế web đáp ứng.

45
00:04:07,357 --> 00:04:12,240
Khái niệm liên quan thứ hai mà bạn sẽ nghe là điện thoại di động đầu tiên.

46
00:04:12,240 --> 00:04:17,749
Cách tiếp cận đầu tiên trên điện thoại di động thay vào đó nhìn vào việc thiết kế một trang web cho

47
00:04:17,749 --> 00:04:19,725
một thiết bị di động đầu tiên.

48
00:04:19,725 --> 00:04:27,465
Vì vậy, hãy xem xét làm thế nào bạn sẽ đáp ứng các ràng buộc màn hình của thiết bị di động của bạn.

49
00:04:27,465 --> 00:04:32,472
Và sau đó khi kích thước màn hình của bạn mở rộng, bạn sẽ tự động

50
00:04:32,472 --> 00:04:38,162
khởi động một ứng dụng đến trang web của bạn với kích thước màn hình lớn hơn và lớn hơn.

51
00:04:38,162 --> 00:04:41,548
Có lẽ, bạn sẵn sàng nhiều hơn và nhiều hơn nữa của nội dung.

52
00:04:41,548 --> 00:04:47,050
Vì vậy, để tận dụng lợi thế của bất động sản màn hình ngày càng tăng.

53
00:04:47,050 --> 00:04:51,974
Vì vậy, cùng một trang web khi nhìn thấy trên một thiết bị di động có thể chỉ có một

54
00:04:51,974 --> 00:04:56,091
phần của thông tin được tiết lộ cho người dùng.

55
00:04:56,091 --> 00:05:00,754
Nhưng sau đó khi được hiển thị trên một máy tính để bàn đầy đủ fledge nó

56
00:05:00,754 --> 00:05:05,960
có thể hiển thị phiên bản chi tiết hơn rất nhiều của trang web.

57
00:05:05,960 --> 00:05:11,020
Bây giờ điều này phải được tự động điều chỉnh dựa trên thông tin

58
00:05:11,020 --> 00:05:16,180
mà bạn nhận được từ thiết bị mà từ đó trang web của bạn đang được xem.

59
00:05:16,180 --> 00:05:18,519
Vậy làm thế nào để chúng ta có được thông tin này?

60
00:05:18,519 --> 00:05:23,610
May mắn thay, làm thiết kế web đáp ứng được hỗ trợ bởi

61
00:05:23,610 --> 00:05:29,950
nhiều khuôn khổ giao diện người dùng web fronend hiện đại bao gồm Bootstrap.

62
00:05:29,950 --> 00:05:37,230
Vì vậy, khi chúng ta nhìn vào định nghĩa của Bootstrap trên trang web nó nói,

63
00:05:37,230 --> 00:05:41,128
tiếp cận điện thoại di động đầu tiên đáp ứng.

64
00:05:41,128 --> 00:05:43,985
Vâng, làm thế nào để chúng ta đi bằng cách thực hiện thiết kế web đáp ứng?

65
00:05:43,985 --> 00:05:49,858
Vì vậy, có một số khái niệm được xây dựng trong khung thời gian

66
00:05:49,858 --> 00:05:57,170
web giao diện người dùng của bạn để hỗ trợ khi bạn cần thực hiện thiết kế web đáp ứng.

67
00:05:57,170 --> 00:06:00,819
Đầu tiên và quan trọng nhất là những gì được gọi là một hệ thống lưới?

68
00:06:00,819 --> 00:06:05,624
Chúng ta sẽ xem xét hệ thống Grid của Bootstrap chi tiết hơn trong bài

69
00:06:05,624 --> 00:06:06,319
giảng tiếp theo.

70
00:06:06,319 --> 00:06:11,201
Vì vậy, chúng ta sẽ hiểu chính xác cách chúng ta có thể tận dụng điều đó để có thể thực hiện

71
00:06:11,201 --> 00:06:13,720
thiết kế web đáp ứng.

72
00:06:13,720 --> 00:06:21,110
Khía cạnh thứ hai là hình ảnh chất lỏng, do đó hình ảnh của bạn mà bạn đưa vào

73
00:06:21,110 --> 00:06:26,940
trang web của bạn sẽ tự động thích ứng với kích thước màn hình.

74
00:06:26,940 --> 00:06:34,890
Và phần thứ ba là những gì được gọi là một truy vấn phương tiện CSS từ mã CSS của bạn.

75
00:06:34,890 --> 00:06:41,110
Bạn có thể truy vấn kích thước của phương tiện và sau đó điều chỉnh thích hợp

76
00:06:41,110 --> 00:06:46,230
các lớp CSS của bạn để phù hợp với kích thước của màn hình của thiết bị.

77
00:06:46,230 --> 00:06:48,730
Bây giờ các truy vấn phương tiện hoạt động như thế nào?

78
00:06:48,730 --> 00:06:50,950
Hãy nhìn vào điều đó tiếp theo.

79
00:06:50,950 --> 00:06:55,080
Các truy vấn phương tiện được hỗ trợ trong CSS như thế này.

80
00:06:55,080 --> 00:07:00,930
Vì vậy, công nghệ cho phép bạn thực hiện một truy vấn phương tiện để xác định chiều rộng tối thiểu

81
00:07:00,930 --> 00:07:07,730
của màn hình theo đó tập hợp các lớp CSS đặc biệt này sẽ được kích hoạt.

82
00:07:07,730 --> 00:07:12,267
Vì vậy, điều này sẽ được chỉ định trong tập tin CSS của bạn như @media, và

83
00:07:12,267 --> 00:07:17,187
sau đó trong khung, bạn chỉ định ví dụ, chiều rộng tối thiểu.

84
00:07:17,187 --> 00:07:21,231
Có rất nhiều tùy chọn cho các truy vấn phương tiện truyền thông hơn những gì tôi đang hiển thị ở đây.

85
00:07:21,231 --> 00:07:28,750
Đây chỉ là một ví dụ về cách bạn sẽ xây dựng một truy vấn phương tiện trong mã CSS của bạn. Hãy

86
00:07:30,060 --> 00:07:34,990
nhìn vào mã CSS của Bootstrap,

87
00:07:34,990 --> 00:07:40,910
chúng ta hãy đi vào và xem cách truy vấn phương tiện truyền thông đang được sử dụng bởi Bootstrap.

88
00:07:40,910 --> 00:07:45,789
Vì vậy, ở đây bạn thấy một ví dụ về một truy vấn phương tiện mà nó nói, @media và

89
00:07:45,789 --> 00:07:47,854
min-width 576 pixel.

90
00:07:47,854 --> 00:07:54,906
Và sau đó nó xác định rằng các lớp CSS đặc biệt gọi container,

91
00:07:54,906 --> 00:07:59,960
mà chúng ta sẽ tìm hiểu thêm về trong bài giảng tiếp theo,

92
00:07:59,960 --> 00:08:04,150
và cũng trong bài tập sau.

93
00:08:04,150 --> 00:08:12,640
Chúng ta sẽ thấy rằng chiều rộng của thùng chứa được thiết lập dựa trên chiều rộng của màn hình.

94
00:08:12,640 --> 00:08:17,590
Tương tự, đối với màn hình chiều rộng cao hơn, chiều rộng thùng chứa được tự động điều chỉnh.

95
00:08:17,590 --> 00:08:22,251
Vì vậy, đây là những gì cho phép khung giao diện người dùng web của bạn để

96
00:08:22,251 --> 00:08:25,604
hỗ trợ thiết kế web đáp ứng.

97
00:08:25,604 --> 00:08:30,762
Vì vậy, làm truy vấn phương tiện truyền thông, khuôn khổ giao diện người dùng web của bạn có thể thiết

98
00:08:30,762 --> 00:08:36,928
lập loại thiết bị mà bạn đang hiển thị trang web của bạn trên.

99
00:08:36,928 --> 00:08:41,849
Và tương ứng điều chỉnh các lớp CSS để

100
00:08:41,849 --> 00:08:46,401
phù hợp với kích thước màn hình thiết bị cụ thể.

101
00:08:46,401 --> 00:08:50,821
Vậy thì rõ ràng, câu hỏi tiếp theo sẽ xuất hiện trong tâm trí của bạn là làm thế nào để chúng ta

102
00:08:50,821 --> 00:08:52,870
làm điều này trong thực tế?

103
00:08:52,870 --> 00:08:56,540
May mắn thay, nếu bạn bắt đầu với một

104
00:08:56,540 --> 00:09:01,700
khuôn khổ giao diện người dùng web kết thúc được thiết kế tốt như Bootstrap, mọi thứ trở nên rất đơn giản.

105
00:09:01,700 --> 00:09:08,023
Chúng ta sẽ tìm hiểu thêm về điều này trong bài giảng tiếp theo và bài tập sau.

106
00:09:08,023 --> 00:09:13,999
[ NHẠC]