Bộ Chuyển Đổi Đơn Vị CSS

Hai họ đơn vị

Mọi giá trị độ dài trong CSS đều thuộc về một trong hai họ. Các đơn vị tuyệt đối, như px, pt, cm, mm và in, mô tả một kích thước vật lý hoặc kích thước thiết bị cố định không thay đổi theo ngữ cảnh. Các đơn vị tương đối, như em, rem, phần trăm, vw, vh, ch và ex, mô tả một kích thước trong tương quan với một thứ khác, thường là một cỡ chữ hoặc khung nhìn. Toàn bộ nghệ thuật của CSS đáp ứng và dễ tiếp cận quy về việc chọn đúng họ cho mỗi công việc, và bộ chuyển đổi này tồn tại để dịch một cách gọn gàng giữa chúng.

Ranh giới phân chia rất quan trọng bởi đơn vị tuyệt đối đóng băng một giá trị trong khi đơn vị tương đối cho phép nó thích nghi. Một tiêu đề đặt bằng pixel vẫn giữ nguyên cỡ bất kể người dùng đã cấu hình trình duyệt thế nào, trong khi cùng tiêu đề đó đặt bằng rem sẽ lớn lên khi họ tăng cỡ chữ mặc định. Một trong hai hành vi ấy là thân thiện; hành vi còn lại lặng lẽ loại trừ con người.

Pixel và mốc chuẩn 16px

px là điểm tham chiếu cho gần như mọi phép chuyển đổi. Bất chấp cái tên, một pixel CSS không phải lúc nào cũng là một chấm vật lý trên màn hình; trên những màn hình mật độ cao, trình duyệt ánh xạ nó tới nhiều chấm thiết bị để một từ 16px vẫn giữ cỡ đọc dễ chịu, đó là lý do px được tính là tuyệt đối dù phần cứng có khác nhau. Hầu hết phép chuyển đổi trong công cụ này đều treo vào một con số, cỡ chữ gốc, mặc định là 16px bởi đó là cỡ mà trình duyệt áp cho phần tử html ngay từ đầu. Hãy thay đổi cơ sở đó trong Cài Đặt Nâng Cao và mọi kết quả rem cùng em sẽ được tính lại theo nó.

em so với rem: khác biệt ở sự kế thừa

Đây là sự phân biệt khiến nhiều lập trình viên vấp ngã nhất. Một rem luôn tương đối với cỡ chữ gốc, nên 1.5rem là cùng một độ dài ở bất cứ đâu trong tài liệu, dễ đoán và phẳng. Một em thì tương đối với cỡ chữ của chính phần tử mà nó nằm trên, nghĩa là em dồn tích lũy. Nếu một mục danh sách được đặt là 1.2em và phần tử cha của nó cũng là 1.2em, thì phần tử con sẽ bằng 1.2 nhân 1.2 của phần tử ông bà, và việc lồng nhau có thể lặng lẽ thổi phồng chữ của bạn lên những cỡ bất ngờ.

Sự dồn tích lũy đó đôi khi lại là điều bạn muốn. Phần đệm hay lề biểu diễn bằng em sẽ co giãn theo chữ của chính phần tử, nên một chiếc nút giữ tỷ lệ đệm cân đối khi nhãn của nó lớn lên. Nhưng với thang cỡ chữ toàn cục, rem thường là mặc định an toàn hơn chính vì nó không dồn tích lũy. Bộ chuyển đổi này cho phép bạn đặt cỡ chữ gốc và cỡ chữ của phần tử cha riêng biệt để kết quả rem và kết quả em phản ánh đúng sự khác biệt đó.

Đơn vị khung nhìn cho bố cục linh hoạt

Các đơn vị khung nhìn đo theo kích thước của chính cửa sổ. 1vw là một phần trăm chiều rộng khung nhìn và 1vh là một phần trăm chiều cao của nó, nên 50vw luôn rộng bằng nửa cửa sổ bất kể thiết lập cỡ chữ. Chúng là xương sống của bố cục linh hoạt và những dòng tiêu đề khổ lớn cần co giãn theo màn hình thay vì theo cỡ chữ.

Tuy vậy, hãy dùng chúng một cách cẩn trọng. Đặt cỡ chữ nội dung thuần bằng vw nghĩa là chữ co lại đến mức không đọc nổi trên một chiếc điện thoại hẹp và phình to trên một màn hình rộng, và trong một số thiết lập nó có thể phớt lờ mức thu phóng của người dùng. Phương thuốc hiện đại là hàm clamp, nhận một giá trị tối thiểu, một giá trị linh hoạt được ưa chuộng, và một giá trị tối đa, cho phép một tiêu đề lớn lên theo khung nhìn nhưng không bao giờ rơi xuống dưới một mức sàn hay vượt quá một mức trần. Hãy chuyển đổi mức sàn và mức trần của bạn ở đây sang rem để chúng vẫn tôn trọng thiết lập cỡ chữ của người dùng.

Phần trăm, ch và ex

Phần trăm là tương đối, nhưng tương đối với cái gì còn tùy thuộc vào thuộc tính. Với chiều rộng, nó là phần trăm chiều rộng của khối chứa; với cỡ chữ, nó là phần trăm cỡ chữ của phần tử cha, khiến nó hành xử rất giống em đối với chữ. Chính tính nhạy với ngữ cảnh đó là lý do công cụ này hỏi cỡ chữ của phần tử cha khi bạn chuyển đổi phần trăm của cỡ chữ. Còn hai đơn vị tương đối với chữ nữa dễ bị bỏ sót: ch là chiều rộng của chữ số không trong phông hiện tại, hoàn hảo để giới hạn một đoạn văn ở một độ rộng đọc dễ chịu khoảng 60ch, trong khi ex là chiều cao của chữ x viết thường, hữu ích cho những điều chỉnh theo chiều dọc gắn với tỷ lệ của phông chữ.

Đơn vị in ấn tuyệt đối: pt, in, cm, mm

Các đơn vị vật lý được chi phối bởi những tỷ lệ chính xác trong đặc tả CSS, đó là lý do các phép chuyển đổi ở đây không phải là xấp xỉ. Một inch bằng 96px, một point bằng một phần bảy mươi hai của một inch nên nó ra đúng một và một phần ba pixel, một centimeter khoảng 37.8px, và một millimeter bằng một phần mười con số đó. Những tỷ lệ này cố định bất kể màn hình thực tế là gì.

Trên màn hình, các đơn vị này hầu như là một cái bẫy, bởi một centimeter trên trang hiếm khi khớp với một centimeter trên thước đặt sát màn hình. Nơi chốn thật sự của chúng là các bảng định kiểu cho in ấn, nơi một tờ giấy vật lý trao cho chúng ý nghĩa đích thực, và riêng pt vẫn là cách quy ước mà các nhà thiết kế cùng trình xử lý văn bản dùng để mô tả cỡ chữ. Hãy với tới pt, cm và mm khi bạn định kiểu cho in ấn, và với tới rem, em cùng các đơn vị khung nhìn khi bạn định kiểu cho màn hình.

Khả năng tiếp cận: vì sao cỡ chữ bằng px là một vấn đề

Khi bạn đặt cỡ chữ bằng px, bạn ghim chặt chúng. Một người dùng tăng cỡ chữ mặc định của trình duyệt, thường vì họ cần thế, sẽ không thấy thay đổi gì, bởi một giá trị pixel cố định hoàn toàn phớt lờ tùy chọn đó. Đặt cỡ chữ bằng rem thay vào đó nghĩa là nó co giãn theo cỡ chữ gốc mà người dùng đã chọn, một trong những thắng lợi về khả năng tiếp cận có tác động cao nhất trong CSS mà chẳng tốn của bạn chút gì về mặt thị giác đối với người đọc ở thiết lập mặc định.

Một quy trình làm việc thực dụng nảy ra từ điều này: thiết kế bằng pixel vì chúng trực quan, rồi chuyển cỡ chữ và khoảng cách sang rem trước khi xuất bản để bố cục tôn trọng thiết lập của người dùng. Đó là phép chuyển đổi phổ biến nhất mà công cụ này thực hiện, và ở cơ sở mặc định 16px thì số học rất dễ chịu, bởi 16px là 1rem, 24px là 1.5rem, và 8px là 0.5rem.