Điểm bài viết
[Tổng cộng: 1 Trung bình: 5]
Trrước đây khi màn hình hiển thị đại trà phổ thông chưa gồm có mobile devices, tất cả chúng ta không có khái niệm mobile-first. Với sự tăng trưởng can đảm và mạnh mẽ của thời đại, lúc bấy giờ khái niệm mobile-first đã được định nghĩa và sử dụng liên tục hơn rất nhiều .
Mobile-First là gì?
Mobile-first được coi là những tiêu chuẩn ưu tiên mặc định cho mobile devices ( những khung hình nhỏ như thiết bị di động ) sau đó mới override những giá trị cho tablet, và sau cuối là desktop. Khái niệm này được đưa ra bởi Luke Wroblewski vào năm 2009 .
Mobile-first khác hẳn với Desktop-first, tức những tiêu chuẩn vận dụng cho khung hình từ 1024 px trở lên của những thiết bị như desktop, máy tính, do vậy cách viết code sẽ trọn vẹn ngược nhau ( nhưng không phải sai hay đúng, chỉ là do sự thống nhất code mà tất cả chúng ta pháp luật ra thôi ) .
Sự khác nhau giữa Mobile-First và Desktop-First
Hãy nhìn vào đoạn code của Mobile-first dưới đây :
.block {
width: 100%;
}
@media (min-width: 30em) {
.block {
width: 50%;
}
}
Ta sẽ thấy khung hình mobile sẽ có width 100%, sau đó mới đến khung hình lớn hơn (30em ~ 480px trở lên), ta mới set về width 50%. Nếu không có @media, rõ ràng block sẽ có khung width 100% của mobile trên tất cả khung hình, đúng không?
Sự khác nhau của Mobile-first chính là vậy. Như thế, Desktop-First sẽ sử dụng @media (max-width: 30em) thay vì min-width như Mobile-first.
Ưu điểm của Mobile-First
Mobile-first mang lại một cuộc cách mạng nho nhỏ trong việc hình thành mindset mobile-first dành cho những ứng dụng di động, những nền tảng và mạng lưới hệ thống tương hỗ đa thiết bị .
Nói như vậy là bởi mobile-first cũng tương tự như như trào lưu sử dụng wap trước đây, nhưng thay vì độc lập và tách biệt khỏi nền tảng web thì nay nó chạy song song trên tổng thể devices. Responsive cũng là lợi điểm dễ nhận thấy của mobile-first, quan sát và thuận tiện theo dõi hơn so với làm Desktop-first .
Môt điểm không thể bỏ qua là Mobile-first giúp bạn quan sát layout và thực hiện code ban đầu rất nhẹ nhàng, bởi khung mobile thường không quá phức tạp, các grid layout và sự thay đổi là không cao.
Bắt đầu Mobile-First như thế nào?
Nếu bạn sử dụng CSS thuần, đoạn code ngay lúc đầu hoàn toàn có thể là 1 lựa chọn tương thích. Tuy vậy, Code Tốt khuyến khích những bạn làm quen với SCSS và sử dụng gulp tool từ NodeJS để compile code .
Code trong SCSS chắc như đinh sẽ dễ đọc và tưởng tượng hơn :
.box { width: 100%; @media (min-width: 30em) { width: 50%; }
}
Bạn thấy không, @media hoàn toàn có thể sử dụng bên trong class thay vì cần tách ra như CSS thuần.
Chúc bạn nắm được và sử dụng khái niệm mobile-first hiệu suất cao trong việc làm nhé .
Bonus poll về mobile-first
Poll của Smashing Magazine về việc giải quyết và xử lý desktop-first hay mobile-first cho dân dev .
5
1
nhìn nhận
Đánh giá bài viết
