Để đo kích thước các thành phần trên trang web bạn thường phải chụp màn hình rồi đưa vào công cụ đồ họa để đo. Nếu 1 năm bạn phải đo có một hai lần thì đó là cách cũng không tệ, nhưng nếu 1 tuần mà bạn phải đo vài lần thì sao? Rõ ràng là khá phiền toái. Cả trình duyệt Chrome và FireFox đều có tiện ích rất tốt giúp bạn nhanh chóng biết được kích thước tính ra px.
1. Trình duyệt Chrome
Bạn vào ruul. Screen ruler rồi nhấn Thêm vào Chrome. Sau khi thêm vào thành công, bạn sẽ thấy biểu tượng sau:
Muốn đo trang web nào, bạn nhấn vào biểu tượng trên, nó sẽ hiện ra cho bạn các lựa chọn:
Dưới đây là 5 trên tổng số 7 thước trong bộ chọn, sở dĩ nó có các màu khác nhau là để phù hợp với các nền khác nhau. Có thước có nền trong suốt, có thước có nền là màu đặc:
Tôi sẽ chọn thước nền gỗ đặc để làm minh họa mẫu. Bạn có thể thấy các biểu tượng nhỏ trên thước. Cái đầu tiên là dùng để xoay thước theo chiều dọc:
Hình thùng rác (vị trí cuối) là để bỏ thước kẻ đó đi. Còn khi nhấn vào hình dấu cộng ở chính giữa sẽ hiện ra các kích thước chữ và đường viền khác nhau để bạn ước lượng:
Nếu thành phần bạn muốn đo có kích thước lớn, hãy chọn thước long ở vị trí cuối cùng, nó có độ dài 1100px (các thước khác là 560px).
2. Trình duyệt FireFox
Ứng dụng bên FireFox có tên MeasureIt, bạn vào đường dẫn rồi nhấn Add to FireFox:
Để đo, bạn nhấn vào biểu tượng cái thước góc trên cùng bên tay phải, màn hình sẽ mờ đi một chút để cho bạn thấy tiện ích đã đi vào hoạt động. Để đo kích thước khoảng nào bạn chỉ cần kéo chuột vào khoảng đó.
Nó sẽ hiện cả kích thước chiều ngang và chiều rộng, như hình trên cho thấy, rộng (W) 105px, cao (H) cũng 105px. Nếu không muốn đo nữa thì bạn lại nhấn vào biểu tượng thước ở bên trên.
Điểm mạnh của MeasureIt là nó có thể đo cả các trang Offline lẫn Online, trong khi Screen ruler chỉ đo các trang Online mà thôi.