Search
Generic filters
Exact matches only
Filter by Custom Post Type

Try these: wordpressfront endvloghackerrankmalaysia

Quy Tắc “Mobile Frist” Cần Biết Khi Xây Dựng Giao Diện

Câu chuyện được bắt đầu vào một ngày đẹp trời, trong một buổi phỏng vấn xin việc cho vị trí Front-end Developer ở một công ty A. Trong quá trao đổi với anh sếp:

Anh sếp: “Theo em Bootstrap là dùng để xây dựng Mobile First hay Desktop First ?”

Theo một cách quán tính, tui trả lời.

Tui: “Em nghĩ nó là Desktop First đó anh”

Tới đây là các AE cũng đủ hiểu tui đã failed rồi đó. Đây là vấn đề cơ bản của một Front-end Developer cần biết, sau buổi phỏng vấn trên tui đã có thêm được một bài học mới ( Đi một ngày đàng học một sàn khôn mà nị, bữa giờ failed một đống rồi nên cũng một đống khôn rồi chứ ít gì 😂😂😂 ).

Mobile First Là Gì ?

Khi xây dựng giao diện Responsive, thì cũng nên nhắc đến khái niệm Mobile First, vì nó sẽ giúp ít cho bạn xây dựng giao diện nhanh hơn rất nhiều. Mobile First nghĩa là bạn sẽ tập trung đi xây dựng giao diện cho điện thoại trước và sử dụng giao diện điện thoại làm nền tảng, sau đó bạn sẽ đi xây dựng cho các thiết bị còn lại như tablet, desktop, retina,….

Tại Sao Cần Biết Mobile First ?

Công nghệ ngày càng phát triển cùng theo đó là số lượng điện thoại ngày càng tăng lên một cách chóng mặt, và dưới đây là một vài lý do của nó:

  • Điện thoại tăng nhiều nên người dùng sẽ dùng smartphone lướt web nhiều hơn.
  • Dễ dàng trong quá trình coding nhất là khi dùng media query để xây dựng giao diện responsive.
  • Nếu bạn là blogger ham viết blog, ham chém gió thì nó cũng là một lý do để bạn kiếm thêm nhiều lượt tương tác từ điện thoại.
  • Tránh các lỗi phát sinh trong quá trình xây dựng giao diện trên desktop, trùng css, media query tè le hột me không biết lần ở chỗ nào trên trái đất này.
  • Google sẽ đánh giá cao các website có giao diện mobile thân thiện và nó sẽ giúp bạn có thứ hạng nhanh hơn.
  • Và còn nhiều tác dụng phụ khác mà chỉ có khi chiến mới biết.

Một Số Kiến Thức Trong “Kinh Thánh”

Như đã nói ở trên, chúng ta sẽ xây dựng giao diện theo quy tắc Mobile First, do đó trong quá trình viết CSS, Media Query nó sẽ có cấu trúc như sau:

/* For Mobile */
@media all and (min-width: 320px) {...}

/* For Tablet With Vertical Screen */
@media all and (min-width: 600px) {...}

/* For Tablet With Horizontal Screen */
@media all and (min-width: 1024px) {...}

/* For Desktop */
@media all and (min-width: 1280px) {...}

Các CSS chính trong quá trình viết sẽ bao gồm dành cho tất cả thiết bị, sau đó ta sẽ dùng Media Query để canh chỉnh lại các đối tượng trong giao diện. Sở dĩ dùng min-width là mục đích chúng ta sẽ dùng nó để tuỳ chỉnh lại các giao diện lớn hơn từ giao diện mobile ban đầu.Và dưới đây là một vài yếu tố để bạn cần biết để quá trình viết CSS dễ dàng và nhanh hơn:

  • Hãy kết hợp với Sass hoặc Scss để viết CSS, nó sẽ giúp bạn tránh lẫn lộn các dòng code của mình.
  • Dùng !important nếu muốn viết đè CSS.
  • Sử dụng display: none để ẩn các thành phần cần ẩn đi theo đừng thiết bị mà bạn muốn.

Về xây dựng giao diện Responsive thì các AE chỉ cần nắm vòng quanh cái Media Query là đã giải quyết được vấn đề rồi. Còn nếu các AE muốn build ra một giao diện tối ưu riêng cho Mobile thì có thể tìm hiểu qua AMPProject của Google nha.

Kết Luận

Xu hướng sử dụng điện thoại ngày càng tăng với số lượng các App trên IOS, Android ngày càng nhiều, bởi vậy các website đang có xu hướng thay đổi để chiếm lại thị phần sân chơi của mình trên điện thoại, một website thương mại điện tử vừa chiến trên điện thoại, máy tính bảng, laptop thì còn gì bằng, tiết kiệm chi phí bảo trì, xây dựng.

Và tất nhiên là công ăn việc làm cho mấy anh em Front-end Developer như mình ngày càng nhiều. Còn mấy AE thì sao có đồng ý kiến với tui không hãy để bình luận phía dưới nhé.

 

Chào các bạn, tôi là Phạm Phi Hùng, tác giả của blog Hung Pham Dev Web. Tôi là một web developer, kiêm writer, quay phim dạo, dựng phim dạo, sửa máy dạo và làm một số ngành nghề khác nữa.