Tại sao nên sử dụng rem thay vì px
|
Tôi muốn khen ngợi câu trả lời của josh3736 vì đã cung cấp một số bối cảnh lịch sử xuất sắc. Trong khi nó được khớp nối tốt, bối cảnh CSS đã thay đổi trong gần năm năm kể từ khi câu hỏi này được hỏi. Khi câu hỏi này được hỏi, px là câu trả lời đúng, nhưng điều đó không còn đúng trong ngày hôm nay. Show tl; dr: sử dụng remname__ Tổng quan về đơn vịVề mặt lịch sử, các đơn vị pxthường đại diện cho một pixel thiết bị. Với các thiết bị có mật độ điểm ảnh cao hơn và cao hơn, điều này không còn giữ cho nhiều thiết bị, như với Màn hình Retina của Apple. Các đơn vị remđại diện cho kích thước r oot em. Đó là font-size của bất kỳ thứ gì khớp với :root. Trong trường hợp của HTML, đó là phần tử ; đối với SVG, đó là phần tử Tại thời điểm viết, remđược khoảng 98% người dùng hỗ trợ . Nếu bạn lo lắng về 2% khác, tôi sẽ nhắc bạn rằng truy vấn phương tiện là cũng được hỗ trợ bởi khoảng 98% người dùng . Đang sử dụng pxname__Phần lớn các ví dụ CSS trên internet sử dụng các giá trị pxvì chúng là tiêu chuẩn thực tế. ptname__, invà một loạt các đơn vị khác có thể đã được sử dụng trên lý thuyết, nhưng chúng không xử lý tốt các giá trị nhỏ vì bạn cần nhanh chóng sử dụng các phân số, đó là lâu hơn để gõ, và khó hơn để lý do về. Nếu bạn muốn có một đường viền mỏng, với pxbạn có thể sử dụng 1px, với ptbạn cần sử dụng 0.75pt để có kết quả nhất quán và điều đó không thuận tiện lắm. Đang sử dụng remname__remname Giá trị mặc định của 16px không phải là một đối số rất mạnh cho việc sử dụng nó. Viết 0.0625rem là tệ hơn so với viết 0.75pt, vậy tại sao mọi người sẽ sử dụng remname__? Có hai phần lợi thế của remname __ so với các đơn vị khác.
Tôn trọng sở thích người dùngThu phóng trình duyệt đã thay đổi rất nhiều trong những năm qua. Trong lịch sử, nhiều trình duyệt sẽ chỉ tăng quy mô font-size, nhưng điều đó đã thay đổi khá nhanh khi các trang web nhận ra rằng các thiết kế pixel đẹp hoàn hảo của họ đang phá vỡ bất cứ khi nào ai đó phóng to hoặc thu nhỏ. Tại thời điểm này, các trình duyệt chia tỷ lệ toàn bộ trang, do đó, thu phóng dựa trên phông chữ sẽ không còn nữa. Tôn trọng mong muốn của người dùng không nằm ngoài dự đoán. Chỉ vì một trình duyệt được đặt thành 16px theo mặc định, không có nghĩa là bất kỳ người dùng nào cũng không thể thay đổi tùy chọn của họ thành 24px hoặc 32px để sửa cho tầm nhìn kém. Nếu bạn căn cứ các đơn vị của mình khỏi remname__, bất kỳ người dùng nào ở cỡ chữ cao hơn sẽ thấy một trang web lớn hơn tương ứng. Biên giới sẽ lớn hơn, phần đệm sẽ lớn hơn, lề sẽ lớn hơn, mọi thứ sẽ tăng lên một cách trôi chảy. Nếu bạn dựa trên các truy vấn phương tiện của mình trên remname__, bạn cũng có thể đảm bảo rằng trang web mà người dùng của bạn thấy phù hợp với màn hình của họ. Người dùng có font-size được đặt thành 32px trên trình duyệt rộng 640px, sẽ thấy trang web của bạn như được hiển thị cho người dùng tại 16px trên trình duyệt rộng 320px. RWD hoàn toàn không mất gì khi sử dụng remname__. Thay đổi giá trị pxGiá trịVì remdựa trên font-size của nút :root, nếu bạn muốn thay đổi những gì 1rem đại diện, tất cả những gì bạn phải làm là thay đổi font-size: :root { font-size: 100px; } body { font-size: 1rem; } Don't ever actually do this, please Dù bạn làm gì, đừng đặt phần tử :root của font-size thành giá trị pxname__. Nếu bạn đặt font-size trên htmlthành giá trị pxname__, bạn đã thổi bay các tùy chọn của người dùng mà không có cách nào lấy lại chúng. Nếu bạn muốn thay đổi giá trị rõ ràng của remname__, hãy sử dụng các đơn vị %. Toán học cho điều này là hợp lý đơn giản. Kích thước phông chữ rõ ràng của :root là 16px, nhưng giả sử chúng ta muốn thay đổi nó thành 20px. Tất cả những gì chúng ta cần làm là nhân 16 với một số giá trị để nhận 20. Thiết lập phương trình của bạn: 16 * X = 20Và giải quyết cho Xname__: X = 20 / 16 X = 1.25 X = 125%:root { font-size: 125%; } If you're using the default font-size, I'm 20px tall. Thực hiện mọi thứ trong bội số của 20 không phải là tuyệt vời, nhưng một đề xuất phổ biến là làm cho kích thước rõ ràng của rembằng với 10px. Số ma thuật cho đó là 10/16 là 0.625 hoặc 62.5%. :root { font-size: 62.5%; } If you're using the default font-size, I'm 10px tall. Vấn đề bây giờ là font-size mặc định của bạn cho phần còn lại của trang được đặt quá nhỏ, nhưng có một cách khắc phục đơn giản cho việc đó: Đặt font-size trên bodybằng cách sử dụng remname__: :root { font-size: 62.5%; } body { font-size: 1.6rem; } I'm the default font-size Điều quan trọng cần lưu ý, với sự điều chỉnh này, giá trị rõ ràng của remlà 10px có nghĩa là bất kỳ giá trị nào bạn có thể đã viết trong pxcó thể được chuyển đổi trực tiếp thành rembằng cách đặt một số thập phân. padding: 20px;trở thành Kích thước phông chữ rõ ràng bạn chọn tùy thuộc vào bạn, vì vậy nếu bạn muốn không có lý do gì bạn không thể sử dụng: :root { font-size: 6.25%; } body { font-size: 16rem; }và có 1rem bằng 1px. Vì vậy, bạn có nó, một giải pháp đơn giản để tôn trọng mong muốn của người dùng đồng thời tránh làm phức tạp quá mức CSS của bạn. Đợi đã, vậy thì bắt cái gì?Tôi sợ bạn có thể hỏi điều đó. Nhiều như tôi muốn giả vờ rằng remlà ma thuật và giải quyết tất cả mọi thứ, vẫn còn một số vấn đề cần lưu ý. Không có gì phá vỡ theo ý kiến của tôi, nhưng tôi sẽ gọi họ ra để bạn không thể nói rằng tôi đã không cảnh báo bạn. Truy vấn phương tiện truyền thôngMột trong những vấn đề đầu tiên bạn sẽ gặp phải với remliên quan đến truy vấn phương tiện. Hãy xem xét các mã sau đây: :root { font-size: 1000px; } @media (min-width: 1rem) { :root { font-size: 1px; } }Ở đây, giá trị của remthay đổi tùy thuộc vào việc truy vấn phương tiện có áp dụng hay không và truy vấn phương tiện phụ thuộc vào giá trị của remname__, vậy chuyện gì đang xảy ra? remtrong các truy vấn phương tiện sử dụng giá trị ban đầu là font-size và không tính đến bất kỳ thay đổi nào có thể xảy ra với font-size của phần tử :root. Nói cách khác, giá trị rõ ràng của nó là luôn luôn 16px. Điều này hơi khó chịu, vì điều đó có nghĩa là bạn phải thực hiện một số phép tính phân số, nhưng tôi đã thấy rằng hầu hết các truy vấn phương tiện phổ biến đã sử dụng các giá trị là bội số của 16. | px | rem | +------+-----+ | 320 | 20 | | 480 | 30 | | 768 | 48 | | 1024 | 64 | | 1200 | 75 | | 1600 | 100 |Ngoài ra, nếu bạn đang sử dụng bộ tiền xử lý CSS, bạn có thể sử dụng mixins hoặc biến để quản lý các truy vấn phương tiện của mình, điều này sẽ che giấu vấn đề hoàn toàn. Chuyển đổi bối cảnhNếu bạn chuyển đổi giữa các dự án khác nhau, các dự án khác nhau, có thể kích thước phông chữ rõ ràng của remsẽ có các giá trị khác nhau. Trong một dự án, bạn có thể đang sử dụng kích thước rõ ràng là 10px trong đó trong một dự án khác, kích thước rõ ràng có thể là 1px. Điều này có thể gây nhầm lẫn và gây ra vấn đề. Đề xuất duy nhất của tôi ở đây là gắn bó với 62.5% để chuyển đổi remthành kích thước rõ ràng của 10px, vì điều đó đã phổ biến hơn trong trải nghiệm của tôi. Thư viện CSS được chia sẻNếu bạn đang viết CSS sẽ được sử dụng trên một trang web mà bạn không kiểm soát, chẳng hạn như đối với tiện ích nhúng, thực sự không có cách nào tốt để biết kích thước rõ ràng remsẽ có. Nếu đó là trường hợp, vui lòng tiếp tục sử dụng pxname__. Tuy nhiên, nếu bạn vẫn muốn sử dụng remname__, hãy xem xét việc phát hành phiên bản Sass hoặc LESS của biểu định kiểu với một biến để ghi đè tỷ lệ cho kích thước rõ ràng của remname__. * Tôi không muốn loại bỏ bất kỳ ai sử dụng remname__, nhưng tôi chưa thể xác nhận chính thức rằng mỗi trình duyệt sử dụng 16px theo mặc định. Bạn thấy đấy, có rất nhiều trình duyệt và sẽ không khó để một trình duyệt có thể chuyển hướng từng chút một, nói 15px hoặc 18px. Tuy nhiên, trong thử nghiệm, tôi chưa thấy một ví dụ nào trong đó trình duyệt sử dụng cài đặt mặc định trong hệ thống sử dụng cài đặt mặc định có bất kỳ giá trị nào ngoài 16px. Nếu bạn tìm thấy một ví dụ như vậy, xin vui lòng chia sẻ nó với tôi. 
Sau khi viết xong bài trước về sự khác nhau giữa 2 đơn vị em và rem thì nhiều bạn có nói rằng “nếu có demo thì tốt hơn” thế nên hôm nay mình viết bài “nên sử dụng em hay rem vào dự án” này kèm theo demo là 1 trang mình cắt đơn giản sử dụng 2 đơn vị này. Các bạn có thể xem tại đây.
# Áp dụngĐầu tiên thì các bạn inspect code(F12) rồi các bạn chọn thẻ các bạn sẽ thấy mình set giá trị của thuộc tính font-size: 62.5%. Tại sao vậy ? Ở bài trước mình có nói mặc định font-size ở hầu hết trình duyệt là 16px tức là 100%. Nghĩa là 1em = 1rem = 100% = 16px. Thế mình muốn có một div nào đó có width là 50px đi thì mình phải tính toán 50px / 16px được bao nhỉ ? Lấy máy tính ra tính à được 3.125(em-rem). Như vậy mất thời gian quá nhỉ ? Đó là lý do mình set ở thẻ font-size 62.5%. 100% thì được 16px suy ra 62.5% thì được 10px. Lúc này 1em = 1rem = 10px. Hehe. Giờ box có width 50px à dễ thôi cho width = 5rem là xong vì giờ tính toán lẹ hơn, tính được trong đầu ngay lập tức 50/10 = 5. Thế là mình áp dụng chúng vào cái template này như thế. Các bạn có thể thấy cách mình làm ở div có class task__item(F12 rồi chọn thẻ div có class này nhé) Mình cho margin-bottom 4rem thì sẽ tương ứng 40px vì đơn vị rem chỉ phụ thuộc vào thẻ nên mình không lo lắng. Tại sao mình không chọn em trong trường hợp này là vì nó phụ thuộc vào giá trị của thuộc tính font-size của chính nó hoặc phần tử cha chứa nó nên mình sợ nảy sinh nhiều vấn đề. Các bạn xem ví dụ dưới nè. Giờ mình thay đổi giá trị margin-bottom thành 4em và thêm font-size là 2rem(20px) thì lúc này margin-bottom 4em sẽ tương đương với 80px chứ ko phải là 40px như của đơn vị rem, như vậy sẽ không được như bạn mong muốn. Các bạn phải tính toán kỹ khi dùng với đơn vị em nhé. Bây giờ khi resize xuống màn hình nhỏ hơn như IPad, Mobile mình thấy toàn website kích thước to quá nhìn không hợp. Thay vì chỉnh từng cái thì mình set giá trị font-size của thẻ xuống còn 50%(bao nhiêu % tùy design hoặc yêu cầu) lúc này toàn bộ size sẽ nhỏ lại theo size của từng element. Các bạn có thể mở template mình đã làm rồi Inspect code, resize trình duyệt và check code để xem cách mình áp dụng đơn vị rem như thế nào nhé. Nếu không hiểu thì có thể bình luận ở dưới mình sẽ trả lời nha. Ah còn 1 điểm lưu ý nữa đó là trong @media queries mình ít sử dụng px hay là rem mà mình lại sử dụng em. Ở đây mình nói là bên trong cái dấu () của @media queries chớ không phải nội dụng bên trong dấu {} này nha các bạn đừng hiểu sai ý mình. Có rất nhiều lý do ở đây giữa 3 đơn vị này khi dùng cho @media queries. Nó rất dài để giải thích nên mình có tìm tòi và đọc được 1 bài viết khá hay, chi tiết nói về vấn đề này các bạn có thể xem tại đây nha. # Lời kết
Còn các bạn thì dùng như thế nào ? Cùng chia sẻ ở bên dưới bình luận nhé. Hi vọng với những kiến thức mà mình chia sẻ sẽ giúp ích cho các bạn phần nào trong việc học tập và code. Chúc các bạn ngày tốt lành. |
