Responsive web design không còn quá phức tạp với Bootstrap
Responsive
3
Bootstrap
8
White

Ruby Nguyen viết ngày 27/05/2015

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 :)

alt text

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 (Các bạn xem hướng dẫn cài đặt trong phần read me của gem, hoặc xem hướng dẫn lập trình Rails với Bootstrap)

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.

Nếu các bạn quan tâm về responsive, có thể trao đổi thêm với mình thông qua comment dưới post nhe! Rất hi vọng nhận được các chia sẻ và học hỏi thêm từ các bạn :)

Happy learning :)

Ruby Nguyen

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Ruby Nguyen

3 bài viết.
35 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
43 13
Scrum là một mô hình quản lý dự án tương đối hot và được nhiều công ty áp dụng hiện nay nên chắc hẳn các bạn đã nghe đến rất nhiều đặc biệt là các ...
Ruby Nguyen viết hơn 3 năm trước
43 13
White
15 10
Khi làm việc với các project nhỏ mình ít quan tâm đến phần tối ưu hóa truy vấn, vì với lượng data ít và quan hệ giữa các table đơn giản nên app nha...
Ruby Nguyen viết hơn 3 năm trước
15 10
Bài viết liên quan
White
18 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết gần 3 năm trước
18 10
White
9 3
Sau đây là cách để tạo một square div và canh giữa theo chiều dọc bằng css. Đây là cách làm rất hay, hỗ trợ được những browser đời cũ như IE8 mà ko...
Toan Nguyen viết hơn 3 năm trước
9 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
35 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!