[MUSIC]
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
đề 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.
Hãy thử và hiểu ý nghĩa của những thuật ngữ này và
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.
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?
Để 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?
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
rằng mọi người sẽ duyệt trang web của bạn từ máy tính.
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
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.
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?
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
nhà thiết kế trang web truyền thống đã thực hiện không còn hóa đơn cố định.
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
đ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.
Đâ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.
Đ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
để nó sẽ tự động thích ứng với khung nhìn của thiết bị của người dùng.
Để giúp bạn đánh giá cao hơn nhu cầu
giải quyết các thiết bị có kích thước màn hình khác nhau.
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
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.
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.
Vì vậy, ở đây bạn thấy rằng trang web Coursera được
hiển thị trên một 1920 bởi 1080 trang web màn hình.
Đâ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.
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.
Vì vậy, bạn thấy tự động bố cục màn hình của bạn hơi
điều chỉnh kích thước của khung nhìn của thiết bị của bạn,
cùng một điều ở 800 x 600.
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.
Đây là một kích thước iPad Air 2, đây là một kích thước iPad Mini 4,
lưu ý sự chuyển đổi từ
kích thước iPad Mini 4 sang iPhone 6S Plus ở chế độ chân dung.
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
, khi bạn nhấp vào sẽ hiển thị các tùy chọn từ Navigation Bash của bạn.
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
ở chế độ phong cảnh, lưu ý cách màn hình áp dụng chính nó.
Tương tự như vậy cho một iPhone 6S trong chế độ phong cảnh và
đi xuống đến một iPhone SE, và bạn thấy làm thế nào các trang web
đã thay đổi cách nó đang được render.
Vì vậy, hy vọng, ví dụ này đã minh họa cho bạn làm thế nào và
tại sao chúng ta cần thiết kế web đáp ứng.
Khái niệm liên quan thứ hai mà bạn sẽ nghe là điện thoại di động đầu tiên.
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
một thiết bị di động đầu tiên.
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.
Và sau đó khi kích thước màn hình của bạn mở rộng, bạn sẽ tự động
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.
Có lẽ, bạn sẵn sàng nhiều hơn và nhiều hơn nữa của nội dung.
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.
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
phần của thông tin được tiết lộ cho người dùng.
Nhưng sau đó khi được hiển thị trên một máy tính để bàn đầy đủ fledge nó
có thể hiển thị phiên bản chi tiết hơn rất nhiều của trang web.
Bây giờ điều này phải được tự động điều chỉnh dựa trên thông tin
mà bạn nhận được từ thiết bị mà từ đó trang web của bạn đang được xem.
Vậy làm thế nào để chúng ta có được thông tin này?
May mắn thay, làm thiết kế web đáp ứng được hỗ trợ bởi
nhiều khuôn khổ giao diện người dùng web fronend hiện đại bao gồm Bootstrap.
Vì vậy, khi chúng ta nhìn vào định nghĩa của Bootstrap trên trang web nó nói,
tiếp cận điện thoại di động đầu tiên đáp ứng.
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?
Vì vậy, có một số khái niệm được xây dựng trong khung thời gian
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.
Đầu tiên và quan trọng nhất là những gì được gọi là một hệ thống lưới?
Chúng ta sẽ xem xét hệ thống Grid của Bootstrap chi tiết hơn trong bài
giảng tiếp theo.
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
thiết kế web đáp ứng.
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
trang web của bạn sẽ tự động thích ứng với kích thước màn hình.
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.
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
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ị.
Bây giờ các truy vấn phương tiện hoạt động như thế nào?
Hãy nhìn vào điều đó tiếp theo.
Các truy vấn phương tiện được hỗ trợ trong CSS như thế này.
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
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.
Vì vậy, điều này sẽ được chỉ định trong tập tin CSS của bạn như @media, và
sau đó trong khung, bạn chỉ định ví dụ, chiều rộng tối thiểu.
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.
Đâ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
nhìn vào mã CSS của Bootstrap,
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.
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à
min-width 576 pixel.
Và sau đó nó xác định rằng các lớp CSS đặc biệt gọi container,
mà chúng ta sẽ tìm hiểu thêm về trong bài giảng tiếp theo,
và cũng trong bài tập sau.
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.
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.
Vì vậy, đây là những gì cho phép khung giao diện người dùng web của bạn để
hỗ trợ thiết kế web đáp ứng.
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
lập loại thiết bị mà bạn đang hiển thị trang web của bạn trên.
Và tương ứng điều chỉnh các lớp CSS để
phù hợp với kích thước màn hình thiết bị cụ thể.
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
làm điều này trong thực tế?
May mắn thay, nếu bạn bắt đầu với một
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.
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.
[ NHẠC]