Rem
Đơn vị mặc định của Webflow là px. Nếu chúng ta nhập “10” vào bất kì trường giá trị nào trong giao diện Designer, con số được hiển thị sẽ là “10px"
Client-First sử dụng rem mà chúng ta có thể chọn trong menu giá trị.
Rem là gì?
Rem là viết tắt của “root em"
- Rem là đại lượng được tính dựa trên giá trị font-size gốc của website.
- Phần tử gốc ở đây là thẻ html.
- Rem phụ thuộc vào giá trị font-size của thẻ html .
- Tất cả kích thước được sử dụng trong Client-First đều tính bằng rem.
Kế thừa kích thước font từ trình duyệt
Trong Client-First, chúng ta sẽ kế thừa giá trị html font-size từ trình duyệt
Thông thường giá trị mặc định của html font-size sẽ là 16px
1rem = 16px là quy đổi mặc định của trình duyệt
Dựa trên những giá trị được Client-First đồng thuận, chúng ta có tểh nahnh chóng đổi từ px sang rem. Ví dụ, những giá trị rem Client-First khuyên dùng là 0.5, 1, 1.5, 2, 2.5, 3,...
Rem và Client-First là bộ đôi hoàn hảo giúp bạn tuân theo những quy chuẩn tối ưu nhất về accessibility với font size trình duyệt
Cách tính
1rem sẽ tương ứng với 16px nếu giá trị font-size của trình duyệt được để ở chế độ mặc định.
Khi làm các project Webflow, chúng ta sẽ sử dụng 16px làm giá trị gốc cho việc tính toán rem.
Mỗi đơn vị tính theo rem sẽ là bội số của 16.
Để chuyển giá trị px sang rem, chia giá trị này cho 16.
64px / 16px = 4rem
Để chuyển giá trị rem sang px, nhân giá trị này với 16.
2rem x 16px = 32px
Để thuận tiện nhất, chúng tôi khuyên bạn sử dụng những giá trị rem dễ đọc như 1,2 ,2.5, 3, 4, 5.
Chúng ta nên tránh việc sử dụng thường xuyên những giá trị dài như 8.4375rem. Những giá trị này khó nhớ hơn cũng như sẽ giảm tốc độ làm việc đi đáng kể.
Tính toán trong giao diện Webflow Designer
Chúng ta có thể tính rem trực tiếp trong mỗi ô nhập giá trị của giao diện Webflow Designer
Bạn có thể nhập "100/16rem" vào ô giá trị rồi ấn "Enter" và việc tính toán đã xong.
Chúng ta có thể chia bất kỳ số nào cho 16 để ra giá trị rem tương ứng.
Lợi ích về Accessibility
Thiết lập font size của browsers
Browsers thường sử dụng 16px cho giá trị font size của thẻ html — với tùy chọn chỉnh sửa giá trị này. Người dùng có thể vào phần preferences và sửa giá trị font size mặc định.
Thiết lập giá trị font size cho browsers là một chủ đề rất quan trọng về accessibility. Khi người dùng cập nhật giá trị font của browsers, nội dung website cũng nên được điều chỉnh tương ứng. Hệ thống rem trong Client-First sẽ được cập nhật tuỳ theo những điều chỉnh này.
Khi sử dụng những đơn vị đo lường khác như px hoặc vw, chúng ta sẽ làm ngơ tuỳ chỉnh của người dùng khi họ cập nhật giá trị font size trong browser.
Browser zoom
Rem cũng tuân theo quyền kiểm soát browser zoom của người dùng . Khi người dùng zoom vào hoặc zoom ra một page, layout cũng như nội dung sử dụng rem cũng sẽ zoom theo những tương tác này.
Khi chúng ta sử dụng đơn vị là vw hoặc vh, browser zoom sẽ không hoạt động.
vw tính toán giá trị dựa theo chiều ngang của browser (hoặc chiều cao với vh). Chỉ khi bạn thay đổi kích cỡ của cửa sổ browser thì những giá trị này mới bị ảnh hưởng.
Client-First follows best accessibility practices. The decision to work in rem is directly related to this accessibility and UX benefit.
Tìm hiểu thêm về accessibility khi sử dụng rem trong bài viết so sánh Wizardry vs. Client-First của chúng tôi. Đây là những đánh giá kỹ thuật về lợi ích của rem như một đơn vị đo lường phục vụ cho accessibility.
Những giá trị quy đổi px sang rem chúng tôi khuyên dùng
Dưới đây là một danh sách những giá trị rem chúng tôi khuyên dùng, kèm theo giá trị px tương ứng.
Danh sách này là những giá trị chúng tôi khuyên dùng, tuy nhiên bạn không cần nhất thiết tuân theo chúng.
Bạn có thể tương tác với danh sách size này bằng việc nhập giá trị vào thanh menu.
{{fs-calc_component}}
Client-First khuyên bạn nên sử dụng những giá trị trên.
Tuy nhiên, vẫn có 3 trường hợp ngoại lệ nằm ngoài những giá trị trên:
1. Typography
Nếu 16px của font bạn dùng là quá lớn, bạn có thể chỉnh giá trị font-size thành 14px. Chúng ta sẽ tránh dùng 12px vì thường cỡ chữ như vậy là hơi nhỏ.
14px = 0.875rem
2. Khoảng cách 2px
Với khoảng cách quá nhỏ, hãy dùng 2px. Nếu giá trị khoảng cách cần dùng bé hơn 4px, hãy dùng 2px
2px = 0.125rem
3. 1px là 1px
Khi sử dụng 1px, ví dụ cho thuộc tính CSS border, hãy sử dụng trực tiếp giá trị 1px.
Chúng tôi không khuyến khích việc chuyển giá trị 1px sang rem.
Màn retina sẽ có cách scale khác với màn non-retina. Việc sử dụng 1px sẽ tạo ra đúng một đường 1px trên bất kì màn hình nào mà không phải lo ngại vấn đề về scaling của retina.
1px = 1px
Công cụ chuyển đổi từ px sang rem trong Finsweet Extension
Bên trong Finsweet Extension có chứa một công cụ giúp chuyển những project sử dụng px sang rem.
Tất cả những giá trị sử dụng px đều sẽ được tính sang giá trị rem tương ứng.
Bên trong tab Client-First của Finsweet Extension, bạn sẽ thấy công cụ "PX to REM Migrator" quản lý việc chuyển đổi kích cỡ.