{"id":4332,"date":"2026-04-23T16:43:10","date_gmt":"2026-04-23T09:43:10","guid":{"rendered":"https:\/\/wpdesign.vn\/phan-tich-subpixel-rendering-pixel-rounding-va-device-pixel-ratio\/"},"modified":"2026-05-04T14:05:00","modified_gmt":"2026-05-04T07:05:00","slug":"phan-tich-subpixel-rendering-pixel-rounding-va-device-pixel-ratio","status":"publish","type":"post","link":"https:\/\/wpdesign.vn\/vi\/phan-tich-subpixel-rendering-pixel-rounding-va-device-pixel-ratio\/","title":{"rendered":"Ph\u00e2n t\u00edch Subpixel Rendering, Pixel Rounding V\u00e0 Device Pixel Ratio"},"content":{"rendered":"\n<p>Kh\u00e1i ni\u1ec7m pixel trong CSS \u0111\u00e3 ti\u1ebfn h\u00f3a t\u1eeb m\u1ed9t \u0111\u01a1n v\u1ecb ph\u1ea7n c\u1ee9ng thu\u1ea7n t\u00fay tr\u00ean m\u00e0n h\u00ecnh CRT th\u00e0nh m\u1ed9t \u0111\u01a1n v\u1ecb logic linh ho\u1ea1t. Cu\u1ed9c c\u00e1ch m\u1ea1ng v\u1ec1 m\u1eadt \u0111\u1ed9 \u0111i\u1ec3m \u1ea3nh (High-DPI) v\u00e0 c\u00e1c h\u1ec7 th\u1ed1ng layout hi\u1ec7n \u0111\u1ea1i \u0111\u00e3 ph\u00e1 v\u1ee1 m\u1ed1i quan h\u1ec7 \u0111\u1ecbnh danh 1:1, bu\u1ed9c tr\u00ecnh duy\u1ec7t ph\u1ea3i \u00e1p d\u1ee5ng c\u00e1c c\u01a1 ch\u1ebf n\u1ed9i suy v\u00e0 l\u00e0m tr\u00f2n ph\u1ee9c t\u1ea1p h\u01a1n. <\/p>\n\n<h4 class=\"wp-block-heading\">1. S\u1ef1 tr\u1eebu t\u01b0\u1ee3ng h\u00f3a c\u1ee7a &#8220;Pixel&#8221; trong CSS<\/h4>\n\n<p>Trong nh\u1eefng ng\u00e0y \u0111\u1ea7u c\u1ee7a thi\u1ebft k\u1ebf web, m\u1ed9t &#8220;pixel&#8221; trong CSS th\u01b0\u1eddng t\u01b0\u01a1ng \u1ee9ng tr\u1ef1c ti\u1ebfp v\u1edbi m\u1ed9t &#8220;\u0111i\u1ec3m \u1ea3nh&#8221; tr\u00ean m\u00e0n h\u00ecnh CRT. Tuy nhi\u00ean, s\u1ef1 xu\u1ea5t hi\u1ec7n c\u1ee7a m\u00e0n h\u00ecnh m\u1eadt \u0111\u1ed9 cao (High-DPI\/Retina) v\u00e0 c\u00e1c h\u1ec7 th\u1ed1ng layout linh ho\u1ea1t (Flexbox, Grid) \u0111\u00e3 ph\u00e1 v\u1ee1 m\u1ed1i quan h\u1ec7 1:1 n\u00e0y. <\/p>\n\n<p>Hi\u1ec7n nay, vi\u1ec7c hi\u1ec3n th\u1ecb giao di\u1ec7n l\u00e0 m\u1ed9t quy tr\u00ecnh ph\u1ee9c t\u1ea1p g\u1ed3m ba giai \u0111o\u1ea1n:<\/p>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li><strong>T\u00ednh to\u00e1n (Calculation):<\/strong> Tr\u00ecnh duy\u1ec7t t\u00ednh to\u00e1n k\u00edch th\u01b0\u1edbc d\u1ef1a tr\u00ean t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m ho\u1eb7c c\u00e1c \u0111\u01a1n v\u1ecb linh ho\u1ea1t (em, rem, vh).<\/li>\n\n\n\n<li><strong>H\u1ec7 t\u1ecda \u0111\u1ed9 (Abstraction):<\/strong> Chuy\u1ec3n \u0111\u1ed5i c\u00e1c \u0111\u01a1n v\u1ecb \u0111\u00f3 sang h\u1ec7 t\u1ecda \u0111\u1ed9 c\u1ee7a thi\u1ebft b\u1ecb th\u00f4ng qua DPR.<\/li>\n\n\n\n<li><strong>S\u1ed1 h\u00f3a (Rasterization):<\/strong> L\u00e0m tr\u00f2n c\u00e1c gi\u00e1 tr\u1ecb th\u1eadp ph\u00e2n \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi l\u01b0\u1edbi pixel v\u1eadt l\u00fd c\u1ee7a ph\u1ea7n c\u1ee9ng.<\/li>\n<\/ul>\n\n<p>Hi\u1ec3u r\u00f5 s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa Subpixel Rendering, Pixel Rounding v\u00e0 DPR l\u00e0 \u0111i\u1ec1u ki\u1ec7n ti\u00ean quy\u1ebft \u0111\u1ec3 gi\u1ea3i quy\u1ebft c\u00e1c l\u1ed7i &#8220;l\u1ec7ch 1px&#8221; kinh \u0111i\u1ec3n ho\u1eb7c t\u00ecnh tr\u1ea1ng border b\u1ecb m\u1edd tr\u00ean c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng.<\/p>\n\n<h4 class=\"wp-block-heading\">2. Device Pixel Ratio (DPR): C\u1ea7u n\u1ed1i gi\u1eefa ph\u1ea7n m\u1ec1m v\u00e0 ph\u1ea7n c\u1ee9ng<\/h4>\n\n<h6 class=\"wp-block-heading\">2.1. Kh\u00e1i ni\u1ec7m c\u01a1 b\u1ea3n<\/h6>\n\n<p><strong>Device Pixel Ratio (DPR)<\/strong> l\u00e0 t\u1ef7 l\u1ec7 gi\u1eefa s\u1ed1 l\u01b0\u1ee3ng pixel v\u1eadt l\u00fd (Physical Pixels) tr\u00ean m\u00e0n h\u00ecnh v\u00e0 s\u1ed1 l\u01b0\u1ee3ng pixel logic (CSS Pixels) m\u00e0 tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng \u0111\u1ec3 d\u1ef1ng layout.<\/p>\n\n<p>$$DPR = \\frac{\\text{Physical Pixels}}{\\text{CSS Pixels}}$$<\/p>\n\n<p>Khi b\u1ea1n thi\u1ebft l\u1eadp m\u1ed9t ph\u1ea7n t\u1eed c\u00f3 <code>width: 100px<\/code> trong CSS:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ean m\u00e0n h\u00ecnh ti\u00eau chu\u1ea9n (<strong>DPR = 1<\/strong>): N\u00f3 chi\u1ebfm \u0111\u00fang 100 pixel v\u1eadt l\u00fd.<\/li>\n\n\n\n<li>Tr\u00ean m\u00e0n h\u00ecnh Retina (<strong>DPR = 2<\/strong>): N\u00f3 chi\u1ebfm 200 pixel v\u1eadt l\u00fd theo chi\u1ec1u ngang.<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">2.2. T\u1ea1i sao DPR l\u1ea1i quan tr\u1ecdng?<\/h6>\n\n<p>DPR cho ph\u00e9p h\u1ec7 \u0111i\u1ec1u h\u00e0nh v\u00e0 tr\u00ecnh duy\u1ec7t hi\u1ec3n th\u1ecb giao di\u1ec7n v\u1edbi k\u00edch th\u01b0\u1edbc v\u1eadt l\u00fd t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau tr\u00ean c\u00e1c thi\u1ebft b\u1ecb c\u00f3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i kh\u00e1c nhau, \u0111\u1ed3ng th\u1eddi t\u1eadn d\u1ee5ng m\u1eadt \u0111\u1ed9 \u0111i\u1ec3m \u1ea3nh cao \u0111\u1ec3 l\u00e0m s\u1eafc n\u00e9t v\u0103n b\u1ea3n v\u00e0 h\u00ecnh \u1ea3nh. N\u1ebfu kh\u00f4ng c\u00f3 DPR, m\u1ed9t n\u00fat b\u1ea5m 100px tr\u00ean m\u00e0n h\u00ecnh 4K c\u1ee7a \u0111i\u1ec7n tho\u1ea1i s\u1ebd tr\u1edf n\u00ean b\u00e9 t\u00ed hon \u0111\u1ebfn m\u1ee9c kh\u00f4ng th\u1ec3 ch\u1ea1m v\u00e0o. <\/p>\n\n<h4 class=\"wp-block-heading\">3. Subpixel Rendering: \u0110\u1ed9 ch\u00ednh x\u00e1c trong t\u00ednh to\u00e1n Layout<\/h4>\n\n<h6 class=\"wp-block-heading\">3.1. B\u1ea3n ch\u1ea5t c\u1ee7a Subpixel Layout<\/h6>\n\n<p><strong>Subpixel Rendering<\/strong> (hay ch\u00ednh x\u00e1c h\u01a1n trong ng\u1eef c\u1ea3nh n\u00e0y l\u00e0 <em>Subpixel Layout<\/em>) l\u00e0 kh\u1ea3 n\u0103ng c\u1ee7a layout engine (nh\u01b0 Blink, WebKit, Gecko) trong vi\u1ec7c l\u01b0u tr\u1eef v\u00e0 t\u00ednh to\u00e1n v\u1ecb tr\u00ed, k\u00edch th\u01b0\u1edbc d\u01b0\u1edbi d\u1ea1ng s\u1ed1 th\u1ef1c (floating-point) thay v\u00ec s\u1ed1 nguy\u00ean.<\/p>\n\n<p>Gi\u1ea3 s\u1eed b\u1ea1n c\u00f3 m\u1ed9t container <code>width: 100px<\/code> v\u00e0 ch\u1ee9a 3 ph\u1ea7n t\u1eed con c\u00f3 <code>width: 33.333%<\/code>.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>N\u1ebfu kh\u00f4ng c\u00f3 subpixel:<\/strong> Tr\u00ecnh duy\u1ec7t bu\u1ed9c ph\u1ea3i l\u00e0m tr\u00f2n 33.333% th\u00e0nh 33px. T\u1ed5ng 3 c\u1ed9t l\u00e0 99px, \u0111\u1ec3 l\u1ea1i m\u1ed9t kho\u1ea3ng tr\u1eafng 1px \u1edf cu\u1ed1i. <\/li>\n\n\n\n<li><strong>V\u1edbi subpixel:<\/strong> Tr\u00ecnh duy\u1ec7t l\u01b0u tr\u1eef c\u00e1c gi\u00e1 tr\u1ecb l\u00e0 33.333px. T\u1ed5ng l\u00e0 99.999px. Trong b\u1ed9 nh\u1edb \u0111\u1ec7m c\u1ee7a engine, c\u00e1c ph\u1ea7n t\u1eed n\u00e0y n\u1eb1m s\u00e1t kh\u00edt nhau.  <\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">3.2. Vai tr\u00f2 trong Animation v\u00e0 Transfrom<\/h6>\n\n<p>Subpixel Rendering \u0111\u1eb7c bi\u1ec7t quan tr\u1ecdng trong c\u00e1c hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng. Khi m\u1ed9t ph\u1ea7n t\u1eed di chuy\u1ec3n ch\u1eadm qua m\u00e0n h\u00ecnh b\u1eb1ng <code>transform: translateX()<\/code>, t\u1ecda \u0111\u1ed9 c\u1ee7a n\u00f3 kh\u00f4ng nh\u1ea3y t\u1eeb <code>1px<\/code> sang <code>2px<\/code>. Thay v\u00e0o \u0111\u00f3, n\u00f3 \u0111i qua c\u00e1c v\u1ecb tr\u00ed <code>1.1px<\/code>, <code>1.2px<\/code>&#8230; Tr\u00ecnh duy\u1ec7t s\u1ebd s\u1eed d\u1ee5ng k\u1ef9 thu\u1eadt <strong>Anti-aliasing<\/strong> (kh\u1eed r\u0103ng c\u01b0a) \u0111\u1ec3 pha tr\u1ed9n m\u00e0u s\u1eafc gi\u1eefa c\u00e1c pixel l\u00e2n c\u1eadn, t\u1ea1o ra c\u1ea3m gi\u00e1c chuy\u1ec3n \u0111\u1ed9ng m\u01b0\u1ee3t m\u00e0 h\u01a1n.   <\/p>\n\n<h4 class=\"wp-block-heading\">4. Pixel Rounding: &#8220;B\u1ee9c t\u01b0\u1eddng&#8221; c\u1ee7a th\u1ef1c t\u1ebf v\u1eadt l\u00fd<\/h4>\n\n<p>M\u1eb7c d\u00f9 engine c\u00f3 th\u1ec3 t\u00ednh to\u00e1n v\u1edbi \u0111\u1ed9 ch\u00ednh x\u00e1c v\u00f4 h\u1ea1n, nh\u01b0ng m\u00e0n h\u00ecnh v\u1eadt l\u00fd cu\u1ed1i c\u00f9ng v\u1eabn ch\u1ec9 c\u00f3 c\u00e1c &#8220;\u00f4 l\u01b0\u1edbi&#8221; c\u1ed1 \u0111\u1ecbnh. <strong>Pixel Rounding<\/strong> l\u00e0 qu\u00e1 tr\u00ecnh tr\u00ecnh duy\u1ec7t quy\u1ebft \u0111\u1ecbnh xem m\u1ed9t gi\u00e1 tr\u1ecb <code>33.7px<\/code> s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb \u1edf pixel th\u1ee9 33 hay 34.<\/p>\n\n<h6 class=\"wp-block-heading\">4.1. C\u01a1 ch\u1ebf l\u00e0m tr\u00f2n (Rounding Strategies)<\/h6>\n\n<p>M\u1ed7i tr\u00ecnh duy\u1ec7t c\u00f3 m\u1ed9t chi\u1ebfn l\u01b0\u1ee3c l\u00e0m tr\u00f2n kh\u00e1c nhau, \u0111i\u1ec1u n\u00e0y gi\u1ea3i th\u00edch t\u1ea1i sao c\u00f9ng m\u1ed9t m\u00e3 ngu\u1ed3n CSS nh\u01b0ng layout l\u1ea1i hi\u1ec3n th\u1ecb kh\u00e1c nhau tr\u00ean Chrome v\u00e0 Safari:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Truncation (C\u1eaft b\u1ecf):<\/strong> <code>33.9px<\/code> tr\u1edf th\u00e0nh <code>33px<\/code>.<\/li>\n\n\n\n<li><strong>Rounding (L\u00e0m tr\u00f2n g\u1ea7n nh\u1ea5t):<\/strong> <code>33.9px<\/code> tr\u1edf th\u00e0nh <code>34px<\/code>.<\/li>\n\n\n\n<li><strong>Expansion (M\u1edf r\u1ed9ng):<\/strong> Lu\u00f4n l\u1ea5y gi\u00e1 tr\u1ecb tr\u1ea7n (<code>ceil<\/code>) \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o kh\u00f4ng b\u1ecb thi\u1ebfu h\u1ee5t di\u1ec7n t\u00edch.<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">4.2. H\u1ec7 qu\u1ea3 c\u1ee7a Rounding: L\u1ed7i &#8220;Jitter&#8221; v\u00e0 &#8220;Gaps&#8221;<\/h6>\n\n<p>Trong c\u00e1c h\u1ec7 th\u1ed1ng l\u01b0\u1edbi ph\u1ee9c t\u1ea1p, l\u1ed7i t\u00edch l\u0169y t\u1eeb vi\u1ec7c l\u00e0m tr\u00f2n c\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn hai k\u1ecbch b\u1ea3n x\u1ea5u:<\/p>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li><strong>Gaps (Kho\u1ea3ng h\u1edf):<\/strong> C\u00e1c ph\u1ea7n t\u1eed con b\u1ecb l\u00e0m tr\u00f2n xu\u1ed1ng, \u0111\u1ec3 l\u1ea1i nh\u1eefng \u0111\u01b0\u1eddng k\u1ebb tr\u1eafng li ti gi\u1eefa c\u00e1c kh\u1ed1i m\u00e0u.<\/li>\n\n\n\n<li><strong>Wrapping (Tr\u00e0n d\u00f2ng):<\/strong> T\u1ed5ng c\u00e1c ph\u1ea7n t\u1eed con sau khi l\u00e0m tr\u00f2n v\u01b0\u1ee3t qu\u00e1 chi\u1ec1u r\u1ed9ng container (v\u00ed d\u1ee5: <code>33.4 + 33.4 + 33.4<\/code> b\u1ecb l\u00e0m tr\u00f2n th\u00e0nh <code>34 + 34 + 34 = 102<\/code>), khi\u1ebfn ph\u1ea7n t\u1eed cu\u1ed1i c\u00f9ng b\u1ecb \u0111\u1ea9y xu\u1ed1ng d\u00f2ng d\u01b0\u1edbi.<\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">5. S\u1ef1 t\u01b0\u01a1ng t\u00e1c gi\u1eefa DPR v\u00e0 Rounding: Hi\u1ec7u \u1ee9ng &#8220;Retina Sharpness&#8221;<\/h4>\n\n<p>DPR cao \u0111\u00f3ng vai tr\u00f2 nh\u01b0 m\u1ed9t &#8220;b\u1ed9 gi\u1ea3m ch\u1ea5n&#8221; cho c\u00e1c l\u1ed7i l\u00e0m tr\u00f2n.<\/p>\n\n<ul class=\"wp-block-list\">\n<li>\u1ede <strong>DPR = 1<\/strong>, sai s\u1ed1 l\u00e0m tr\u00f2n t\u1ed1i \u0111a l\u00e0 0.5px, t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi 0.5px v\u1eadt l\u00fd (r\u1ea5t d\u1ec5 nh\u1eadn th\u1ea5y).<\/li>\n\n\n\n<li>\u1ede <strong>DPR = 3<\/strong>, sai s\u1ed1 l\u00e0m tr\u00f2n 0.33 CSS pixel ch\u1ec9 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi 0.11 pixel v\u1eadt l\u00fd tr\u00ean m\u00e0n h\u00ecnh.<\/li>\n<\/ul>\n\n<p>\u0110\u00e2y l\u00e0 l\u00fd do t\u1ea1i sao c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 layout th\u01b0\u1eddng xu\u1ea5t hi\u1ec7n nhi\u1ec1u h\u01a1n tr\u00ean m\u00e0n h\u00ecnh m\u00e1y t\u00ednh c\u0169 (non-Retina) so v\u1edbi tr\u00ean \u0111i\u1ec7n tho\u1ea1i th\u00f4ng minh hi\u1ec7n \u0111\u1ea1i.<\/p>\n\n<h4 class=\"wp-block-heading\">6. Ph\u00e2n t\u00edch tr\u01b0\u1eddng h\u1ee3p th\u1ef1c t\u1ebf (Case Studies)<\/h4>\n\n<h6 class=\"wp-block-heading\">6.1. V\u1ea5n \u0111\u1ec1 Border 1px tr\u00ean thi\u1ebft b\u1ecb High-DPI<\/h6>\n\n<p>Trong CSS, <code>border: 1px solid black<\/code> c\u00f3 ngh\u0129a l\u00e0 &#8220;v\u1ebd m\u1ed9t \u0111\u01b0\u1eddng bi\u00ean d\u00e0y 1 CSS pixel&#8221;. Tr\u00ean m\u00e0n h\u00ecnh iPhone (DPR=3), \u0111\u01b0\u1eddng bi\u00ean n\u00e0y th\u1ef1c ch\u1ea5t d\u00e0y 3 pixel v\u1eadt l\u00fd. \u0110i\u1ec1u n\u00e0y \u0111\u00f4i khi l\u00e0m thi\u1ebft k\u1ebf tr\u00f4ng &#8220;th\u00f4&#8221; h\u01a1n so v\u1edbi mong mu\u1ed1n c\u1ee7a designer (v\u1ed1n mu\u1ed1n m\u1ed9t \u0111\u01b0\u1eddng k\u1ebb si\u00eau m\u1ea3nh).  <\/p>\n\n<p><strong>Gi\u1ea3i ph\u00e1p:<\/strong> S\u1eed d\u1ee5ng <code>transform: scale(0.5)<\/code> ho\u1eb7c <code>svg<\/code> \u0111\u1ec3 t\u1ea1o ra c\u00e1c \u0111\u01b0\u1eddng bi\u00ean m\u1ecfng th\u1ef1c s\u1ef1 \u1edf c\u1ea5p \u0111\u1ed9 pixel v\u1eadt l\u00fd.<\/p>\n\n<h6 class=\"wp-block-heading\">6.2. H\u00ecnh \u1ea3nh b\u1ecb m\u1edd (Blurry Images)<\/h6>\n\n<p>N\u1ebfu m\u1ed9t t\u1ea5m \u1ea3nh c\u00f3 k\u00edch th\u01b0\u1edbc 100x100px v\u1eadt l\u00fd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong m\u1ed9t khung <code>img { width: 100px; }<\/code> tr\u00ean m\u00e0n h\u00ecnh DPR=2, tr\u00ecnh duy\u1ec7t ph\u1ea3i k\u00e9o gi\u00e3n 100 pixel \u1ea3nh ra th\u00e0nh 200 pixel m\u00e0n h\u00ecnh. Qu\u00e1 tr\u00ecnh n\u1ed9i suy (interpolation) n\u00e0y g\u00e2y ra hi\u1ec7n t\u01b0\u1ee3ng m\u1edd. <\/p>\n\n<p><strong>Nguy\u00ean t\u1eafc v\u00e0ng:<\/strong> Lu\u00f4n cung c\u1ea5p h\u00ecnh \u1ea3nh c\u00f3 k\u00edch th\u01b0\u1edbc v\u1eadt l\u00fd b\u1eb1ng <code>K\u00edch th\u01b0\u1edbc CSS * DPR<\/code>.<\/p>\n\n<h4 class=\"wp-block-heading\">7. Gi\u1ea3i ph\u00e1p cho l\u1eadp tr\u00ecnh vi\u00ean Front-end<\/h4>\n\n<p>\u0110\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c s\u1ef1 nh\u1ea5t qu\u00e1n t\u1ed1i \u0111a trong hi\u1ec3n th\u1ecb, ch\u00fang ta c\u1ea7n \u00e1p d\u1ee5ng c\u00e1c k\u1ef9 thu\u1eadt sau:<\/p>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li><strong>S\u1eed d\u1ee5ng Flexbox v\u00e0 Grid:<\/strong> C\u00e1c engine hi\u1ec7n \u0111\u1ea1i \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a \u0111\u1ec3 x\u1eed l\u00fd subpixel t\u1ed1t h\u01a1n trong Flex\/Grid so v\u1edbi k\u1ef9 thu\u1eadt <code>float<\/code> ho\u1eb7c <code>inline-block<\/code>.<\/li>\n\n\n\n<li><strong>Tr\u00e1nh &#8220;Pixel Perfection&#8221; th\u00e1i qu\u00e1:<\/strong> Ch\u1ea5p nh\u1eadn r\u1eb1ng tr\u00ean c\u00e1c thi\u1ebft b\u1ecb kh\u00e1c nhau, c\u00e1c ph\u1ea7n t\u1eed c\u00f3 th\u1ec3 ch\u00eanh l\u1ec7ch 0.1 &#8211; 0.5px. H\u00e3y thi\u1ebft k\u1ebf layout c\u00f3 \u0111\u1ed9 co gi\u00e3n (fluid) thay v\u00ec c\u1ed1 \u0111\u1ecbnh tuy\u1ec7t \u0111\u1ed1i. <\/li>\n\n\n\n<li><strong>S\u1eed d\u1ee5ng SVG cho Icon:<\/strong> V\u00ec SVG l\u00e0 vector, n\u00f3 \u0111\u01b0\u1ee3c rasterize tr\u1ef1c ti\u1ebfp d\u1ef1a tr\u00ean DPR c\u1ee7a thi\u1ebft b\u1ecb, \u0111\u1ea3m b\u1ea3o lu\u00f4n s\u1eafc n\u00e9t \u1edf m\u1ecdi \u0111\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0 kh\u00f4ng s\u1ee3 l\u1ed7i rounding.<\/li>\n\n\n\n<li><strong>Ki\u1ec3m tra tr\u00ean c\u00e1c m\u00e0n h\u00ecnh DPR kh\u00e1c nhau:<\/strong> Lu\u00f4n s\u1eed d\u1ee5ng DevTools \u0111\u1ec3 gi\u1ea3 l\u1eadp c\u00e1c gi\u00e1 tr\u1ecb DPR (2.0, 3.0) \u0111\u1ec3 ph\u00e1t hi\u1ec7n s\u1edbm c\u00e1c kho\u1ea3ng h\u1edf (gaps) kh\u00f4ng mong mu\u1ed1n.<\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">8. K\u1ebft lu\u1eadn<\/h4>\n\n<p>M\u1ed1i quan h\u1ec7 gi\u1eefa <strong>Subpixel Rendering<\/strong>, <strong>Pixel Rounding<\/strong> v\u00e0 <strong>DPR<\/strong> l\u00e0 minh ch\u1ee9ng cho s\u1ef1 ph\u1ee9c t\u1ea1p c\u1ee7a vi\u1ec7c hi\u1ec3n th\u1ecb giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i. Trong khi DPR x\u00e1c \u0111\u1ecbnh m\u1eadt \u0111\u1ed9, Subpixel \u0111\u1ea3m nh\u1eadn t\u00ednh to\u00e1n ch\u00ednh x\u00e1c, th\u00ec Rounding l\u1ea1i l\u00e0 b\u01b0\u1edbc th\u1ecfa hi\u1ec7p cu\u1ed1i c\u00f9ng v\u1edbi gi\u1edbi h\u1ea1n c\u1ee7a ph\u1ea7n c\u1ee9ng. <\/p>\n\n<p>Vi\u1ec7c hi\u1ec3u s\u00e2u c\u00e1c c\u01a1 ch\u1ebf n\u00e0y kh\u00f4ng ch\u1ec9 gi\u00fap b\u1ea1n gi\u1ea3i quy\u1ebft c\u00e1c l\u1ed7i hi\u1ec3n th\u1ecb &#8220;kh\u00f3 ch\u1ecbu&#8221; m\u00e0 c\u00f2n gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng \u0111\u01b0\u1ee3c nh\u1eefng h\u1ec7 th\u1ed1ng thi\u1ebft k\u1ebf (Design Systems) c\u00f3 \u0111\u1ed9 b\u1ec1n v\u1eefng cao, hi\u1ec3n th\u1ecb ho\u00e0n h\u1ea3o tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb t\u1eeb m\u00e0n h\u00ecnh 4K cho \u0111\u1ebfn nh\u1eefng thi\u1ebft b\u1ecb c\u1ea7m tay ph\u1ed5 th\u00f4ng.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kh\u00e1i ni\u1ec7m pixel trong CSS \u0111\u00e3 ti\u1ebfn h\u00f3a t\u1eeb m\u1ed9t \u0111\u01a1n v\u1ecb ph\u1ea7n c\u1ee9ng thu\u1ea7n t\u00fay tr\u00ean m\u00e0n h\u00ecnh CRT [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":4330,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25],"tags":[],"class_list":["post-4332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-publishing"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/comments?post=4332"}],"version-history":[{"count":1,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4332\/revisions"}],"predecessor-version":[{"id":4333,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4332\/revisions\/4333"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media\/4330"}],"wp:attachment":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media?parent=4332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/categories?post=4332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/tags?post=4332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}