Responsive web design với Bootstrap

Từ khi có nhiều thiết bị thông minh ra đời như điện thoại, tablet hỗ trợ người dùng xem các trang web trực tiếp trên các trình duyệt được tích hợp, các front end developer lại phải đối mặt với những vấn đề về layout cho web, làm sao web có thể hiển thị tốt cả trên browser của desktop và mobile? Hôm nay mình xin chia sẻ một số vấn đề liên quan đến responsive design cho web

1. Ý tưởng tạo layout responsive

Ngày xưa, để tạo web tương thích với mobile và desktop các developer sử dụng browser’s user-agent để kiểm tra loại device. Sau khi kiểm tra xong thì sẽ chuyển người dùng về các subsites cho desktop hoặc mobile. Với cách làm này thì developer sẽ tốn nhiều effort.

Khi CSS3 phát triển mạnh, việc làm responsive đơn giản hơn. Việc canh chỉnh layout có thể được hỗ trợ hoàn toàn bởi CSS. Và nổi bật là sự ra đời của framework hỗ trợ responsive như Bootstrap. Lúc này các developer đã có một công cụ mạnh mẽ, có thể làm các layout đẹp, nhanh và tương thích với nhiều độ phân giải khác nhau của nhiều loại device.

2. Giới thiệu về bootstrap và sử dụng bootstrap trong rails project.

Bootstrap hỗ trợ responsive thông qua grid system. Có thể hiểu đơn giản là grid system sử dụng các row và column, số column có thể tăng đến 12 tuỳ theo device hoặc viewport site.

Để sử dụng bootstrap trong rails chúng ta có thể download source bootstrap và add vào project, hoặc sử dụng thông qua các gem, mình thường sử dụng gem bootstrap-sass https://github.com/twbs/bootstrap-sass

3. Một số lưu ý khi apply responsive design cho web.

Khi làm responsive design, mặc định bootstrap đã hỗ trợ rất nhiều, nhưng đôi khi có nhiều chổ chúng ta cần phải custom. Ví dụ như trên mobile chúng ta cần giảm đi các element phức tạp hoặc thay đổi bố cục để dễ nhìn hơn, lúc này chúng ta có thể làm được thông qua media-query. Media query nên được đặt ở cuối trong file css chính của project. Các bạn có thể thay đổi min-width theo device bạn muốn hỗ trợ và tuỳ chỉnh CSS ứng với loại device đó mà không sợ ảnh hưởng đến sự hiển thị của web trên các device có kích thước ngoài định nghĩa.

/* Extra small devices (phones, less than 768px) */

/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }

Một điểm lưu ý nhỏ nhưng quan trọng nữa đó là làm sao để giữ các font chữ không bị thay đổi kích thước khi responsive? Vấn đề này mình đã từng gặp và solution là thêm vào head của web meta viewport với content là initial-scale=1.

Thank for reading