Responsive sao cho chuẩn
29/09/2024
Responsive là gì?
Responsive là một từ quá quen thuộc với các lập trình viên font end.
Là một dạng thiết kế để code giao diện thể hiển thị đầy đủ nội dung trên nhiều thiết bị.
Tại sao lại cần Responsive ?
Lý do cần phải responsive rất đơn giản là vì hiện tại có quá nhiều cỡ màng hình khác nhau.
Kích thước trên các thiết bị hiện tại được chia làm các loại : máy tính, máy tính bảng, điện thoại.
Chúng ta không thể code một giao diện duy nhất mà có thể chạy trên cả ba loại màng hình.
Nếu chúng ta code theo màng hình desktop khi xem bằng điện thoại sẽ không đủ chỗ để hiển thị.
Vì thế chúng ta cần phải responsive để có được một giao diện đẹp nâng cao trải nghiệm người dùng.
Đối với các trang web thương mại thì responsive càng quan trọng nâng cao chất lượng seo cho trang web.
Vậy Phải làm sao để có thể responsive
Đầu tiên chúng ta phải tìm hiểu xem các kích thước màng hình thông dụng trên thị trường hiện nay.
Bởi vì chọn thông số màng hình để thao tác tránh làm dư hoặc thiếu cải thiện chất lượng code.
Mình tham khảo ở các nguồn thông tin khác kích thước màng hình chia theo 9 kích thước như sau:
320, 480, 768, 1024, 1280, 1366, 1440, 1600 và 1920. Ở đây mình tính theo chiều rộng (width) màng hình.
Các kích thước trên là kích thước chuẩn nhưng các bạn xem có các khoảng kích thước.
Chúng ta có thể gom lại để giảm thiểu code mình thường làm ở 3 kích thước: <415 , 420< && <915 và >915.
Các bạn có thể làm khác đây là giải pháp mình sử dụng trong các dự án mình đã làm.
Sau khi xác định các thông số màng hình cần phải thao tác mình tiến hành thiết kế giao diện.
Sau khi thiết kế ra giao diện theo các kích thước màng hình đã chọn chúng ta tiến hình code css để responsive.
để có thể code responsive chúng ta dùng lệnh @media. @media là nguyên tắc truy vấn để áp dụng các thuộc tính css khác nhau vào các thiết bị khác nhau.
Cấu trúc lệnh @media
@media + CSS Syntax + media type + and (mediafeature and|or|not mediafeature)
option CSS Syntax: not / only (thuộc tính này có thể có hoặc không);
option media type:
– all ( giá trị mặc định, sử dụng cho tất cả các loại kích thước màng hình),
– print (được sử dụng cho máy in ),
– screen (được sử dụng cho màng hình máy tính, máy tính bảng và điện thoại),
– speech (được sử dụng cho màng hình to),
Các bạn có thể tham khảo thêm tại https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Lưu ý: trong các thiết bị hiện nay thì có một thiết bị có kích thước màng hình khá lạ là samsung galaxy Fold với 2 kích thước màng hình lần lượt là 280 và 717. Nếu các bạn muốn ứng dụng của mình có thể hiển thị tốt trên cả dòng đt này các bạn phải set thêm 2 kích thước màng hình riêng cho chiếc điện thoại này.
Và đó là tất cả những gì mình muốn chia sẻ đến các bạn mọi thắc mắc vui lòng liên hệ qua mail: danh@allxone.vn xin cảm ơn.
Cựu học viên Onschool Bootcamp– Hiện là full-stack Developer tại All Xone
Các chia sẻ của cựu học viên Onschool Bootcamp?
Danh mục bài viết
- Kiến thức lập trình
- Cộng đồng học viên
- Chia sẻ học viên
Bài viết mới nhất
