05 Feb

Thuộc tính Responsive 5.00/5 (100.00%) 1 vote

Ngày nay trong thiết kế giao diện, người ta thường chú trọng đến việc sử dụng % hơn là px. Vì sao mình lại nói như thế thì qua các ví dụ các bạn sẽ hiểu tại sao người ta thường sử dụng % thay vì sử dụng px. Việc sử dụng này được gọi là thuộc tính Responsive hay còn được gọi là Responsive  Web Design.

Responsive  Web Design (RWD) là xu hướng mới được mọi người sử dụng để có thể thiết kế và phát triển để đáp ứng được cho các thiết bị khác nhau về kích thước, chiều dài của màn hình thiết bị. Khi người dùng truy cập vào các trang web thì trang web sẽ tự động thay đổi kích thước để phù hợp với thiết bị.

Với thuộc tính Responsive thì mọi thứ sẽ trở nên linh hoạt hơn. Hình ảnh có thể tự động điều chỉnh để các layout không bị phá vỡ.

Ví dụ: mình sẽ sử dụng cả 2 thuộc tính đó là px và % để cho các bạn thấy

Đây là việc sử dụng hình ảnh bình thường không quy định kích thước. Nó chỉ hiển thị đúng kích ban đầu. khi thu nhỏ hay phóng to thì nó vẫn giữ đúng kích thước. Nhược điểm là khi sử dụng bằng các thiết bị như điện thoại di động thì hình ảnh trên trang web không thay đổi sẽ làm mất đi vẻ đẹp của trang web. Cũng như việc quy định kích thước hình ảnh bằng px thì tương tự khi xem trên thiết bị có màn hình nhỏ.

Kết quả không sử dụng thuộc tính Responsive
Responsive

Đây là việc sử dụng Responsive cho hình ảnh có quy định về %. Ưu điểm là khi xem bằng các thiết bị khác nhau thì vẫn giữ đúng tỉ lệ ban đầu bạn quy định. Ở đây do mình quy định 100% thì nó sẽ lấy hết chiều dài, khi xem bằng các thiết bị khác thì hình ảnh sẽ tự động điều chỉnh lại và phù hợp với kích thước màn hình của thiết bị. Bạn có thể quy định % sao cho phù hợp với trang web của bạn

Kết quả sử dụng thuộc tính Responsive
Responsive

Các từ khóa liên quan bài viết:
thuộc tính responsive trong css
thuộc tính responsive
responsive web design là gì
responsive web design
responsive

Chúc các bạn thành công!