Khái quát
Với xu thế của thời đại 4.0 thì việc nhà nhà người người đều có một website riêng là chuyện hết sức bình thường. Website giúp chúng ta có thể truy cập, xem nhiều thông tin cần thiết củng như mua xắm.
Nền tảng làm việc và dể dàng nhất đối với website đó là giao diện máy tính, laptop. Nhưng không phải ai củng có những thiết bị này củng như muốn thu hút được người xem hơn thì không thể rằng buộc rằng họ phải dùng laptop để truy cập. Điều này sẽ khiến cho trải nghiệm của người dùng không tốt, tốn quá nhiều thời gian và công sức của họ, thay vào đó họ sẽ tìm đến một đơn vị khác, một website khác và thế là chúng ta đã mất lượng người truy cập này.
Vì vậy mà reponsive ra đời, reponsive không phải là quá trình xây dựng. Nó là quá trình chỉnh sửa dựa trên những gì đã có sẳn của trang web trên nền tảng máy tính. Sử dụng nó, chỉnh sửa, thay đổi để thích nghi với nhiều màn hình khác nhau từ ipad đến điện thoại.
Bản chất
Trên thực tế, dù có làm nhiều cách khác nhau, chung quy lại đơn giản reponsive sẽ thay đổi kích thước, vị trí của những thành phần bên trong nhằm mục đích tạo cảm giác dể nhìn hơn trên chính thiết bị đang được reponsive.
Ngoài ra trong quá trình xây dựng, lập trình viên có thể ẩn bớt đi những thành phần được cho là dư thừa không cần thiết hoặc bổ xung những thành phần phù hợp mà giao diện vốn ban đầu không có nhằm mục đích tăng trải nghiệm người dùng lên.
Tiến trình reponisve CSS
Tùy thuộc vào từng design, từng yêu cầu mà cách tiến hành reponsive củng khác nhau.
Thông thường lập trình viên sẽ xây dựng web trên nền tảng giao diện máy tính trước, vì nền tảng này là nền tảng sẽ cung cấp nhiều và đầy đủ nội dung nhất rồi sau đó mới đến việc reponsive cho các màn hình khác.
Những màn hình quan trọng đối với reponsive
Thông thường, sẽ có 3 màn hình quan trọng bật nhất: đó là máy tính nói chung, ipad nói chung và điện thoại nói chung.
Tuy rằng mỗi loại điện thoại hay ipad lại có độ phân giải khác nhau nhưng thường để đơn giản hóa vấn đề ta sẽ không phân chia nó ra mà đặt chung cho nó dựa vào một max-width(chìu dài màn hình).
Các phương pháp Reponsive CSS
1. Position CSS
Đây là cách reponsive nhằm mục đích thay đổi vị trí của một thành phần để di dời nó sang một vị trí khác.
Thường gặp nhất đó là menu của trang web.
Menu trên máy tính
Menu trên mobile
2. Overflow CSS
Mục đích khi sử dụng overflow trong CSS đó là không muốn thay đổi kết cấu một dòng vốn có của giao diện máy tính, vậy khi này nếu dùng overflow auto nó sẽ giúp cho trang web của bạn không bị bể, củng không thay đổi kết cấu trang web, bạn muốn xem hết phần còn lại đơn giản chỉ việc kéo.
Giao diện một danh sách một hàng trên máy tính
Vậy bây giờ nếu sử dụng overflow thì sẽ giúp cho item không bị xuống dòng củng như không bể web.
Nó sẽ xuất hiện một thanh kéo để nếu muốn xem phần bị kéo vào thì thực hiện hành vi kéo.
Thành quả khi dùng overflow
3. Sử dụng Grid CSS để định hình cột và chia cột dể dàng
Grid CSS là một công cụ tạo bố cục mạnh bật nhất của CSS ở thời điểm hiện tại, củng vì vậy mà nó củng dể dàng tùy biến giúp cho việc reponsive trở nên thật dể dàng.
Giao diện máy tính dùng Grid CSS chia làm bốn cột
Giao diện Ipad dọc dùng Grid CSS chia làm hai cột
Giao diện mobile dùng Grid chia làm một cột