Đơn vị đóng vai trò quan trọng trong việc đo lường và xây dựng những thứ như một ngôi nhà, một cây cầu hay một tòa tháp và việc xây dựng một trang web cũng không phải là ngoại lệ. Có một số phương pháp đo lường được sử dụng trên Web, cụ thể là trong CSS, cụ thể là Pixel, EM và Tỷ lệ phần trăm Show Trong bài đăng này, chúng tôi sẽ chạy qua các đơn vị này để hiểu rõ hơn về các đơn vị đo lường này Hướng dẫn về đơn vị CSS Viewport. vw, vh, vmin, vmax Hướng dẫn về đơn vị CSS Viewport. vw, vh, vmin, vmaxĐộ dài phần trăm khung nhìn hoặc đơn vị khung nhìn như chúng thường được nhắc đến hơn, là các đơn vị CSS đáp ứng cho phép. Đọc thêm PXPixel là đơn vị đo lường cố định và là đơn vị đo lường nhỏ nhất trên màn hình nhưng đừng nhầm lẫn điều này với Pixel xác định độ phân giải màn hình. Pixel trong CSS không liên quan gì đến độ phân giải màn hình Khi chúng tôi thử xem một trang web cố định ở chiều rộng 1024px, chẳng hạn như trên máy tính bảng có độ phân giải màn hình 1024px x 480px, trang web sẽ không vừa với màn hình Trước đây, tôi đã gặp sự cố này và phát hiện ra rằng Pixel trong CSS thực sự không phải là một đơn vị tuyến tính – thực tế nó là một phép đo bán kính Về cơ bản, Pixel trong CSS đo chiều dài của vùng hiển thị thay vì độ phân giải màn hình, vì vậy độ phân giải màn hình 1024px không có nghĩa là màn hình cũng có chiều dài 1024px Tìm hiểu thêm về PXTôi không phải là chuyên gia về các kỹ thuật trong vấn đề này nhưng nếu bạn biết Lượng giác và muốn tìm hiểu thêm, hãy xem phần giải thích sau đây của Sean B. Palmer. CSS px là phép đo góc  Vì tỷ lệ phần trăm cũng là một đơn vị tương đối nên nó cũng có ràng buộc tương tự như đơn vị EM. Không rõ là bao nhiêu phần trăm của Có hai cách chúng tôi có thể thực hiện cho vấn đề này, hoặc chúng tôi thực hiện theo cách truyền thống với máy tính hoặc nếu bạn cảm thấy thoải mái với việc sử dụng Bộ xử lý trước CSS, bạn có thể sử dụng hàm Suy nghĩ cuối cùngCó nhiều cuộc thảo luận về các phương pháp hay nhất khi sử dụng các đơn vị trong thiết kế web. Nhưng lý tưởng nhất là đơn vị PX nên được sử dụng khi các thuộc tính thường cần chính xác e. g. độ lệch ngang hoặc dọc của Bài viết này giải thích sự khác biệt giữa các thuộc tính phông chữ này và cách sử dụng chúng tốt nhất. Tất nhiên, không có cách nào đúng để làm điều này và phần lớn việc sử dụng kích thước phông chữ nào và cách sử dụng sẽ phần lớn mang tính quyết định dựa trên sự hiểu biết của chúng tôi về các đơn vị kích thước phông chữ này và dự án được đề cập Điểm ảnh. Trước khi thiết kế đáp ứng ra đời, pixel đã được sử dụng rộng rãi làm kích thước phông chữ cho mọi thứ, từ kiểu chữ đến chiều rộng, phần đệm và chiều cao. Tuy nhiên, pixel là đơn vị có kích thước cố định và không thay đổi dựa trên kích thước của chế độ xem hoặc có thể mở rộng. Nếu bạn muốn xây dựng một trang web đáp ứng bằng cách sử dụng pixel, có thể rất khó theo dõi tất cả các giá trị dựa trên pixel trong biểu định kiểu CSS, bao gồm các giá trị trong truy vấn phương tiện. Vì vậy, chúng ta có thể sử dụng thuộc tính phông chữ nào để cho phép chúng ta thực hiện những thay đổi tối thiểu đối với biểu định kiểu CSS nhưng vẫn có thể mở rộng được? em. Em là một đơn vị linh hoạt, có thể mở rộng được trình duyệt chuyển đổi thành các giá trị pixel. Nếu kích thước phông chữ mặc định trong chrome là 16 px, 1 em = 16 pixel. Một quan niệm sai lầm lớn về em là nó liên quan đến kích thước phông chữ của phần tử cha. Theo thông số W3, em có liên quan đến kích thước phông chữ của phần tử mà chúng được sử dụng. Bài viết này ở đây đã thực hiện một công việc tuyệt vời khi giải thích khái niệm em một cách rõ ràng và chi tiết. Nếu bạn thực sự muốn tìm hiểu cách thức hoạt động của em, đừng bỏ qua bài viết nêu trên. Ems thường được sử dụng cho kiểu chữ như tiêu đề, văn bản, đoạn văn và các yếu tố liên quan đến kiểu chữ như lề, phần đệm, v.v. Nếu bạn đặt kích thước phông chữ phần tử nội dung và html cơ sở theo pixel và các thuộc tính của phần tử kiểu chữ của bạn được xác định bằng ems, thì đối với thiết kế đáp ứng, tất cả những gì bạn cần làm là thay đổi kích thước phông chữ mặc định ở cấp độ cơ sở, chẳng hạn như @media (max-width: 400px) {và tất cả các giá trị em sẽ tự động tính toán lại mức cơ sở However, ems have a major caveat, Inheritance!! For example, a with a font-size of 16px containing a with a font-size of 2em translates to 32 px for the element. Now add a inside the with a font size of 0.5em too, the result of the div will be 16px, half of 32 px, not 8px. This is where rems come into the picture. Rem. Rem có liên quan đến kích thước phông chữ của phần tử gốc (phần tử html). Nếu cỡ chữ của phần tử html là 16 px, thì 1rem = 16 px. Rem sẽ LUÔN có liên quan đến phần tử gốc, bất kể các phần tử được lồng vào nhau như thế nào. Tuy nhiên, việc chỉ sử dụng rems và không sử dụng ems có thể gặp rắc rối riêng vì kiểu chữ có thể trở nên quá lớn hoặc quá nhỏ và điều này có thể dẫn đến các vấn đề về tỷ lệ. Bài viết này giải thích một cách tuyệt vời để giải quyết vấn đề này Phần trăm. Giá trị phần trăm luôn liên quan đến giá trị khác, có thể là giá trị gốc của phần tử hoặc từ một thuộc tính khác của chính phần tử đó. Tỷ lệ phần trăm được sử dụng rộng rãi trong thiết kế đáp ứng. Một ví dụ tuyệt vời sẽ là khung Bootstrap của Twitter. Bố cục 12 cột của Bootstrap có chiều rộng được đặt theo tỷ lệ phần trăm, vì vậy chúng luôn linh hoạt và có kích thước tương ứng với phần tử gốc Đơn vị khung nhìn. Các thuộc tính chiều rộng và chiều cao của khung nhìn có liên quan đến chiều rộng/chiều cao của kích thước khung nhìn hiện tại 1vw = 1% chiều rộng khung nhìn Viewport ở đây có nghĩa là kích thước cửa sổ của trình duyệt. Nếu bạn muốn định cỡ phần tử của mình dựa trên chiều rộng khung nhìn chứ không phải phần tử gốc/phần tử gốc, thì đơn vị khung nhìn là đơn vị định cỡ phông chữ bạn cần sử dụng. Các đơn vị vw/vh hoạt động tốt với kiểu chữ và thường được sử dụng cho cùng một. Phán quyết cuối cùng. Vì tôi sử dụng bootstrap thường xuyên nên kích thước cơ sở mặc định của tôi tính bằng pixel. Tôi sử dụng phần trăm để đặt chiều rộng và chiều cao của hình ảnh, vùng chứa và div, ems và rems cho kiểu chữ và các yếu tố liên quan đến kiểu chữ như lề, phần đệm, v.v. Tôi hiện đang chơi với các đơn vị khung nhìn cho kiểu chữ đáp ứng và thấy nó thật tuyệt. Thử nghiệm với các thuộc tính phông chữ này rất nhiều và bạn sẽ sớm rơi vào một phong cách được thiết kế riêng cho bạn Sử dụng tỷ lệ phần trăm trong CSS có tốt hơn không?Tùy thuộc vào công ty bạn làm việc , một số sẽ là tỷ lệ phần trăm, một số sẽ thích rem, hoặc em hoặc vh. Mỗi công ty có phong cách và yêu cầu riêng.
Khi nào tôi nên sử dụng px trong CSS?Đơn vị kỳ diệu của CSS, px , thường là một đơn vị tốt để sử dụng, đặc biệt là nếu phong cách yêu cầu căn chỉnh văn bản thành hình ảnh, or simply because anything that is 1px wide or a multiple of 1px is guaranteed to look sharp. But for font sizes it is even better to use em .
Nó tốt hơn để sử dụng hoặc px?cài đặt loại trong px ngăn cài đặt trình duyệt thực hiện điều chỉnh kích thước phông chữ (mà một số người chắc chắn sử dụng) và. loại cài đặt theo đơn vị tương đối duy trì độ trung thực của thiết kế cao hơn khi người dùng sử dụng tính năng thu phóng trình duyệt (điều mà nhiều người chắc chắn sử dụng).
Sự khác biệt giữa px em và phần trăm là gì?Pixel là phép đo tĩnh, trong khi phần trăm và EM là phép đo tương đối. Kích thước của EM hoặc phần trăm phụ thuộc vào cha mẹ của nó. Nếu kích thước văn bản của nội dung là 16 pixel, thì 150% hoặc 1. 5 EM sẽ là 24 pixel (1. 5*16).
. Kích thước phông chữ cơ thể |
