{"id":4968,"date":"2026-10-13T14:07:58","date_gmt":"2026-10-13T11:07:58","guid":{"rendered":"https:\/\/wpcalc.com\/uk\/konvertery\/konverter-odynyts-cms\/"},"modified":"2026-10-13T14:07:58","modified_gmt":"2026-10-13T11:07:58","slug":"konverter-odynyts-cms","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/uk\/konvertery\/konverter-odynyts-cms\/","title":{"rendered":"\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u043e\u0434\u0438\u043d\u0438\u0446\u044c CSS"},"content":{"rendered":"<section class=\"not-prose calculator-box\" aria-labelledby=\"calculator-title\"><div class=\"flex items-baseline sm:items-center justify-between gap-2 sm:gap-3\"><div class=\"flex flex-col sm:flex-row sm:items-center gap-2\"><span class=\"icon icon-calculator text-primary-700! text-base! dark:text-primary-300!\" aria-hidden=\"true\"><\/span><h2 id=\"calculator-title\" class=\"text-lg font-display font-bold\">\u041f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043c\u0456\u0436 px, rem, em, vw \u0456 vh<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"4968\" data-favorite-title=\"\u041e\u0434\u0438\u043d\u0438\u0446\u0456 CSS\" data-favorite-url=\"https:\/\/wpcalc.com\/uk\/konvertery\/konverter-odynyts-cms\/\" data-favorite-excerpt=\"\u041f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u044e\u0439\u0442\u0435 \u0434\u043e\u0432\u0436\u0438\u043d\u0443 \u0432 CSS \u043c\u0456\u0436 px, rem, em, vw, vh, pt \u0456 \u0432\u0456\u0434\u0441\u043e\u0442\u043a\u0430\u043c\u0438. \u0412\u0432\u0435\u0434\u0456\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u043e\u0431\u0435\u0440\u0456\u0442\u044c \u0439\u043e\u0433\u043e \u043e\u0434\u0438\u043d\u0438\u0446\u044e, \u0437\u0430\u0434\u0430\u0439\u0442\u0435 \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u043a\u043e\u0440\u0435\u043d\u044f \u0442\u0430 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u0442\u0430\u043a\u043e\u0436 \u0440\u043e\u0437\u043c\u0456\u0440\u0438 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430 \u2014 \u0456 \u043e\u0434\u0440\u0430\u0437\u0443 \u043e\u0434\u0435\u0440\u0436\u0442\u0435 \u0432\u0441\u0456 \u0435\u043a\u0432\u0456\u0432\u0430\u043b\u0435\u043d\u0442\u0438.\" aria-label=\"\u0414\u043e\u0434\u0430\u0442\u0438 \u0432 \u043e\u0431\u0440\u0430\u043d\u0435\" data-favorite-icon=\"icon icon-other\">\n    <span class=\"icon icon-shape-star-empty\" aria-hidden=\"true\"><\/span>\n  <\/button>\n  <div class=\"calcdash-favorite__tip\" aria-hidden=\"true\">\n   <span class=\"favorite-tooltip\" id=\"favorite-tooltip\"><\/span>\n  <\/div>\n  <span class=\"sr-only\" role=\"status\" id=\"favorite-status\"><\/span>\n<\/div><\/div><form action=\"https:\/\/wpcalc.com\/uk\/konvertery\/konverter-odynyts-cms\/\" method=\"POST\" class=\"calculator\" id=\"calculator-4968\" data-post=\"4968\"><fieldset class=\"fieldset-input is-1\"><legend class=\"sr-only\">\u041f\u043e\u043b\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044f<\/legend><div class=\"field has-term\" id=\"input-1\"><label for=\"field-1\">\u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f<\/label><div class=\"term\">v<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"number\" name=\"znachennya\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"e.g. 24\" step=\"any\" value=\"24\"\/><small id=\"calc-info-1\">\u0414\u043e\u0432\u0436\u0438\u043d\u0430, \u044f\u043a\u0443 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0438\u0442\u0438. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u0456 \u0432\u0456\u0434\u2019\u0454\u043c\u043d\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f (\u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0432\u0456\u0434\u2019\u0454\u043c\u043d\u0456 \u0437\u043e\u0432\u043d\u0456\u0448\u043d\u0456 \u0432\u0456\u0434\u0441\u0442\u0443\u043f\u0438).<\/small><\/div><div class=\"field\" id=\"input-2\"><label for=\"field-2\">\u041e\u0434\u0438\u043d\u0438\u0446\u044f CSS<\/label><div class=\"grid grid-cols-1\"><select id=\"field-2\" name=\"odynytsya_css\"><option value=\"px\" selected>px (\u043f\u0456\u043a\u0441\u0435\u043b\u0456)<\/option><option value=\"rem\">rem (\u043a\u043e\u0440\u0435\u043d\u0435\u0432\u0438\u0439 em)<\/option><option value=\"em\">em (\u0432\u0456\u0434\u043d\u043e\u0441\u043d\u043e \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0448\u0440\u0438\u0444\u0442\u0430 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430)<\/option><option value=\"vw\">vw (\u0448\u0438\u0440\u0438\u043d\u0430 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430)<\/option><option value=\"vh\">vh (\u0432\u0438\u0441\u043e\u0442\u0430 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430)<\/option><option value=\"pt\">pt (\u043f\u0443\u043d\u043a\u0442\u0438)<\/option><option value=\"%\">% (\u0432\u0456\u0434\u0441\u043e\u0442\u043a\u0438 \u0432\u0456\u0434 \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0448\u0440\u0438\u0444\u0442\u0430 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430)<\/option><\/select><svg class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n              <path fill-rule=\"evenodd\" d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" \/>\n            <\/svg><\/div><\/div><div class=\"field has-term\" id=\"input-3\"><label for=\"field-3\">\u0420\u043e\u0437\u043c\u0456\u0440 \u043a\u043e\u0440\u0435\u043d\u0435\u0432\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430<\/label><div class=\"term\">rem<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"rozmir_korenevogo_shryfta\" id=\"field-3\" aria-describedby=\"calc-unit-3 calc-info-3\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 16\" min=\"0.1\" value=\"16\"\/><div class=\"unit\" id=\"calc-unit-3\">px<\/div><small id=\"calc-info-3\">\u0420\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;html&gt;. \u0422\u0438\u043f\u043e\u0432\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 16px; \u043f\u043e\u0442\u0440\u0456\u0431\u0435\u043d \u0434\u043b\u044f rem.<\/small><\/div><div class=\"field has-term\" id=\"input-4\"><label for=\"field-4\">\u0420\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/label><div class=\"term\">em<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"rozmir_shryfta_batkivskogo_elementa\" id=\"field-4\" aria-describedby=\"calc-unit-4 calc-info-4\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 16\" min=\"0.1\" value=\"16\"\/><div class=\"unit\" id=\"calc-unit-4\">px<\/div><small id=\"calc-info-4\">\u041e\u0431\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430; \u043f\u043e\u0442\u0440\u0456\u0431\u0435\u043d \u0434\u043b\u044f em \u0456 %.<\/small><\/div><div class=\"field has-term\" id=\"input-5\"><label for=\"field-5\">\u0428\u0438\u0440\u0438\u043d\u0430 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430<\/label><div class=\"term\">vw<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"shyryna_vyuporta\" id=\"field-5\" aria-describedby=\"calc-unit-5 calc-info-5\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 1920\" min=\"1\" value=\"1920\"\/><div class=\"unit\" id=\"calc-unit-5\">px<\/div><small id=\"calc-info-5\">\u0428\u0438\u0440\u0438\u043d\u0430 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430; \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0430 \u0434\u043b\u044f vw.<\/small><\/div><div class=\"field has-term\" id=\"input-6\"><label for=\"field-6\">\u0412\u0438\u0441\u043e\u0442\u0430 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430<\/label><div class=\"term\">vh<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"vysota_vyuporta\" id=\"field-6\" aria-describedby=\"calc-unit-6 calc-info-6\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 1080\" min=\"1\" value=\"1080\"\/><div class=\"unit\" id=\"calc-unit-6\">px<\/div><small id=\"calc-info-6\">\u0412\u0438\u0441\u043e\u0442\u0430 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430; \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0430 \u0434\u043b\u044f vh.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"\u041f\u0435\u0440\u0435\u0440\u0430\u0445\u0443\u0432\u0430\u0442\u0438\" id=\"calculate-button\" data-post=\"4968\">\u0420\u043e\u0437\u0440\u0430\u0445\u0443\u0432\u0430\u0442\u0438<\/button><button type=\"reset\">\u0421\u043a\u0438\u043d\u0443\u0442\u0438<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">\u0420\u0430\u0445\u0443\u0432\u0430\u0442\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e<\/label><small>\u042f\u043a\u0449\u043e \u0443\u0432\u0456\u043c\u043a\u043d\u0435\u043d\u043e, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u043d\u043e\u0432\u043b\u044e\u0432\u0430\u0442\u0438\u043c\u0435\u0442\u044c\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u043f\u0456\u0441\u043b\u044f \u0437\u043c\u0456\u043d\u0438 \u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f.<\/small><\/div><div class=\"fieldset-result is-hidden\" aria-labelledby=\"result-title\" aria-live=\"polite\" role=\"region\"> <h3 class=\"result-title bg-gradient-to-r from-primary-50 to-gray-50 dark:from-primary-900 dark:to-gray-800\" id=\"result-title\"><span class=\"icon icon-s-pulse\" aria-hidden=\"true\"><\/span> \u041f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f<\/h3><div class=\"result-box\"><div class=\"field-result\" id=\"output-1\"><span class=\"field-title\"><span>\u041f\u0456\u043a\u0441\u0435\u043b\u0456<\/span><span class=\"result-term\">px<\/span><\/span><span class=\"field-value\" id=\"result-1\" data-unit=\"px\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\" aria-label=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-2\"><span class=\"field-title\"><span>\u041a\u043e\u0440\u0435\u043d\u0435\u0432\u0456 em<\/span><span class=\"result-term\">rem<\/span><\/span><span class=\"field-value\" id=\"result-2\" data-unit=\"rem\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\" aria-label=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-3\"><span class=\"field-title\"><span>em (\u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430)<\/span><span class=\"result-term\">em<\/span><\/span><span class=\"field-value\" id=\"result-3\" data-unit=\"em\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\" aria-label=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-4\"><span class=\"field-title\"><span>\u041e\u0434\u0438\u043d\u0438\u0446\u0456 \u0448\u0438\u0440\u0438\u043d\u0438 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430<\/span><span class=\"result-term\">vw<\/span><\/span><span class=\"field-value\" id=\"result-4\" data-unit=\"vw\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\" aria-label=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-5\"><span class=\"field-title\"><span>\u041e\u0434\u0438\u043d\u0438\u0446\u0456 \u0432\u0438\u0441\u043e\u0442\u0438 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430<\/span><span class=\"result-term\">vh<\/span><\/span><span class=\"field-value\" id=\"result-5\" data-unit=\"vh\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\" aria-label=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-6\"><span class=\"field-title\"><span>\u041f\u0443\u043d\u043a\u0442\u0438<\/span><span class=\"result-term\">pt<\/span><\/span><span class=\"field-value\" id=\"result-6\" data-unit=\"pt\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\" aria-label=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result is-column\" id=\"output-7\"><span class=\"field-title\"><span>\u041e\u0441\u043d\u043e\u0432\u0430 \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f<\/span><\/span><span class=\"field-value\" id=\"result-7\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\" aria-label=\"\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><\/div><div class=\"result-actions\"><button type=\"button\" class=\"copy-link\"><svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"\/><path d=\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"\/><\/svg><span class=\"copy-link__text\">\u0421\u043a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043d\u0430 \u0446\u0435\u0439 \u0440\u043e\u0437\u0440\u0430\u0445\u0443\u043d\u043e\u043a<\/span><\/button><span class=\"sr-only\" role=\"status\" id=\"copy-link-status\"><\/span><\/div><\/div><a href=\"#respond\" class=\"hidden transition-opacity duration-300 opacity-0 w-50 text-sm justify-center items-center gap-2 px-4 py-2 rounded bg-gray-200 text-gray-700 hover:bg-gray-300\" id=\"leave-comment\"><span class=\"icon icon-comments\" aria-hidden=\"true\"><\/span>\u0417\u0430\u043b\u0438\u0448\u0438\u0442\u0438 \u043a\u043e\u043c\u0435\u043d\u0442\u0430\u0440<\/a><\/form><\/section><section id=\"calc-reactions\" class=\"not-prose hidden my-12 bg-gradient-to-r from-primary-50 to-gray-50 border border-indigo-100 rounded-xl px-6 py-4 shadow-sm\" data-post=\"4968\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">\u042f\u043a \u0432\u0430\u043c \u0446\u0435\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?<\/p><div role=\"group\" aria-labelledby=\"calc-reactions-title\" class=\"grid grid-cols-3 sm:flex sm:flex-row sm:justify-around gap-4 sm:items-center sm:flex-wrap\"><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"like\"><span class=\"reaction-count\" data-reaction-count=\"like\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude00 <\/span><span class=\"reaction-description font-medium\">\u041f\u043e\u0434\u043e\u0431\u0430\u0454\u0442\u044c\u0441\u044f <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"helpful\"><span class=\"reaction-count\" data-reaction-count=\"helpful\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\udca1 <\/span><span class=\"reaction-description font-medium\">\u041a\u043e\u0440\u0438\u0441\u043d\u043e <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"confused\"><span class=\"reaction-count\" data-reaction-count=\"confused\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude15 <\/span><span class=\"reaction-description font-medium\">\u041d\u0435\u0437\u0440\u043e\u0437\u0443\u043c\u0456\u043b\u043e <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"disappointed\"><span class=\"reaction-count\" data-reaction-count=\"disappointed\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude1e <\/span><span class=\"reaction-description font-medium\">\u0420\u043e\u0437\u0447\u0430\u0440\u043e\u0432\u0443\u0454 <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"inaccurate\"><span class=\"reaction-count\" data-reaction-count=\"inaccurate\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\u274c <\/span><span class=\"reaction-description font-medium\">\u041d\u0435\u0442\u043e\u0447\u043d\u043e <\/span><\/button><\/div><div id=\"reaction-message\" class=\"hidden mt-8 rounded-md border border-primary-100 bg-white\/50 backdrop-blur-sm px-4 py-2 text-sm text-center shadow-sm\"><\/div><\/section><div class=\"calcdash-ad not-prose calcdash-ad--calc_result calcdash-ad--in-article\"><ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-1721569815777345\" data-ad-slot=\"6317458308\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script><\/div>\n<style id=\"wpcoderpro-inline-1\">.formula-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section class=\"formula-box\" aria-labelledby=\"formula-title\">\r\n\t<div id=\"formula-title\" class=\"not-prose font-display mb-4\"><span class=\"icon icon-formula\" aria-hidden=\"true\"><\/span><h2>\u0424\u043e\u0440\u043c\u0443\u043b\u0430 \u043e\u0434\u0438\u043d\u0438\u0446\u044c CSS<\/h2><\/div>\r\n\t<figure class=\"not-prose formula\">\r\n\t\t<figcaption class=\"formula-title\">\u0424\u043e\u0440\u043c\u0443\u043b\u0430<\/figcaption>\r\n\t\t<div class=\"text-base text-gray-800\" id=\"formula\">\n\\[ px = v \\times f(\\text{\u043e\u0434\u0438\u043d\u0438\u0446\u044f}) \\]\n\\[ x_{\\text{\u0446\u0456\u043b\u044c}} = \\frac{px}{f(\\text{\u0446\u0456\u043b\u044c\u043e\u0432\u0430 \u043e\u0434\u0438\u043d\u0438\u0446\u044f})} \\]\n<\/div>\r\n\t<\/figure>\r\n\t<\/p>\n<p><strong>\u0414\u0435:<\/strong><\/p>\n<ul>\n<li>\\(v\\) \u2014 \u0432\u0432\u0435\u0434\u0435\u043d\u0430 \u0432\u0430\u043c\u0438 \u0434\u043e\u0432\u0436\u0438\u043d\u0430 \u0443 \u0432\u0438\u0445\u0456\u0434\u043d\u0456\u0439 \u043e\u0434\u0438\u043d\u0438\u0446\u0456<\/li>\n<li>\\(f(\\text{\u043e\u0434\u0438\u043d\u0438\u0446\u044f})\\) \u2014 \u0441\u043a\u0456\u043b\u044c\u043a\u043e\u043c \u043f\u0456\u043a\u0441\u0435\u043b\u044f\u043c \u0434\u043e\u0440\u0456\u0432\u043d\u044e\u0454 \u043e\u0434\u043d\u0430 \u043e\u0434\u0438\u043d\u0438\u0446\u044f \u0446\u044c\u043e\u0433\u043e \u0442\u0438\u043f\u0443:<\/li>\n<li>\\(px\\): 1 &nbsp;\\(rem\\): \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u043a\u043e\u0440\u0435\u043d\u044f &nbsp;\\(em\\): \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &nbsp;\\(vw\\): \u0448\u0438\u0440\u0438\u043d\u0430 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430 \\(\/ 100\\) &nbsp;\\(vh\\): \u0432\u0438\u0441\u043e\u0442\u0430 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430 \\(\/ 100\\) &nbsp;\\(pt\\): \\(96\/72 = 1.3333\\) &nbsp;\\(%\\): \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \\(\/ 100\\)<\/li>\n<\/ul>\n<p>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u044e\u0454 \u0432\u0432\u0435\u0434\u0435\u043d\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0432 \u043f\u0456\u043a\u0441\u0435\u043b\u0456, \u0430 \u043f\u043e\u0442\u0456\u043c \u0434\u0456\u043b\u0438\u0442\u044c \u0439\u043e\u0433\u043e \u043d\u0430 \u043f\u0456\u043a\u0441\u0435\u043b\u044c\u043d\u0438\u0439 \u043a\u043e\u0435\u0444\u0456\u0446\u0456\u0454\u043d\u0442 \u043a\u043e\u0436\u043d\u043e\u0457 \u0446\u0456\u043b\u044c\u043e\u0432\u043e\u0457 \u043e\u0434\u0438\u043d\u0438\u0446\u0456. \u0422\u0430\u043a\u0438\u0439 \u0434\u0432\u043e\u0435\u0442\u0430\u043f\u043d\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434 \u0433\u0430\u0440\u0430\u043d\u0442\u0443\u0454, \u0449\u043e \u0432\u0441\u0456 \u0441\u0456\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0456\u0432 \u0443\u0437\u0433\u043e\u0434\u0436\u0435\u043d\u0456 \u043c\u0456\u0436 \u0441\u043e\u0431\u043e\u044e.<\/p>\n<p>\r\n<\/section>\n<style id=\"wpcoderpro-inline-2\">.calculation-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section id=\"calculation\" class=\"calculation-box\" aria-labelledby=\"calculation-title\">\r\n\t<div id=\"calculation-title\" class=\"not-prose font-display\"><span class=\"icon icon-unordered-list\" aria-hidden=\"true\"><\/span><h2>\u041e\u0434\u0438\u043d\u0438\u0446\u0456 CSS \u2014 \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u043e\u0431\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044f<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>\u041f\u0440\u0438\u043a\u043b\u0430\u0434:<\/strong> \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0438\u043c\u043e <code>24px<\/code> \u043d\u0430 rem, em, vw, vh \u0456 pt \u0437\u0430 \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0448\u0440\u0438\u0444\u0442\u0443 \u043a\u043e\u0440\u0435\u043d\u044f \u0442\u0430 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 16px \u0456 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430 1920\u00d71080 (\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430).<\/p>\n<p>\\[ px = 24 \\times 1 = 24 \\]<\/p>\n<p>\\[ rem = \\frac{24}{16} = 1.5 \\quad em = \\frac{24}{16} = 1.5 \\]<\/p>\n<p>\\[ vw = \\frac{24}{1920\/100} = \\frac{24}{19.2} = 1.25 \\quad vh = \\frac{24}{1080\/100} \\approx 2.2222 \\]<\/p>\n<p>\\[ pt = 24 \\times \\frac{72}{96} = 18 \\]<\/p>\n<p><strong>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/strong> 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.<\/p>\n<p>\n\r\n<\/section>\n<h2>\u042f\u043a \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0442\u0438\u0441\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u043e\u043c \u043e\u0434\u0438\u043d\u0438\u0446\u044c CSS<\/h2>\n<ol>\n<li>\u0412\u0432\u0435\u0434\u0456\u0442\u044c \u0434\u043e\u0432\u0436\u0438\u043d\u0443 \u0432 \u043f\u043e\u043b\u0435 <strong>\u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f<\/strong> \u2014 \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, 24. \u041f\u0456\u0434\u0445\u043e\u0434\u044f\u0442\u044c \u0456 \u0432\u0456\u0434\u2019\u0454\u043c\u043d\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u0449\u043e \u0437\u0440\u0443\u0447\u043d\u043e \u0434\u043b\u044f \u0432\u0456\u0434\u2019\u0454\u043c\u043d\u0438\u0445 \u0432\u0456\u0434\u0441\u0442\u0443\u043f\u0456\u0432.<\/li>\n<li>\u041e\u0431\u0435\u0440\u0456\u0442\u044c \u043e\u0434\u0438\u043d\u0438\u0446\u044e \u0446\u044c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0443 \u0432\u0438\u043f\u0430\u0434\u043d\u043e\u043c\u0443 \u0441\u043f\u0438\u0441\u043a\u0443 <strong>\u041e\u0434\u0438\u043d\u0438\u0446\u044f CSS<\/strong> (px, rem, em, vw, vh, pt \u0430\u0431\u043e %).<\/li>\n<li>\u0417\u0430\u0434\u0430\u0439\u0442\u0435 <strong>\u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u043a\u043e\u0440\u0435\u043d\u044f<\/strong> \u2014 \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;html&gt;<\/code>. \u0422\u0438\u043f\u043e\u0432\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0442\u044c 16px.<\/li>\n<li>\u0417\u0430\u0434\u0430\u0439\u0442\u0435 <strong>\u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/strong> \u2014 \u0439\u043e\u0433\u043e \u043e\u0431\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443, \u043f\u043e\u0442\u0440\u0456\u0431\u0435\u043d \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f em \u0456 %.<\/li>\n<li>\u0412\u0432\u0435\u0434\u0456\u0442\u044c <strong>\u0448\u0438\u0440\u0438\u043d\u0443<\/strong> \u0442\u0430 <strong>\u0432\u0438\u0441\u043e\u0442\u0443 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430<\/strong> \u0432\u0456\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0432 \u043f\u0456\u043a\u0441\u0435\u043b\u044f\u0445; \u0441\u0430\u043c\u0435 \u0432\u0456\u0434 \u043d\u0438\u0445 \u0437\u0430\u043b\u0435\u0436\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0438 \u0434\u043b\u044f vw \u0456 vh.<\/li>\n<li>\u041e\u0434\u0435\u0440\u0436\u0442\u0435 \u043e\u0434\u0440\u0430\u0437\u0443 \u0432\u0441\u0456 \u0435\u043a\u0432\u0456\u0432\u0430\u043b\u0435\u043d\u0442\u0438 \u0432 \u0440\u043e\u0437\u0434\u0456\u043b\u0456 <strong>\u041f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f<\/strong> \u0440\u0430\u0437\u043e\u043c \u0456\u0437 \u043e\u0441\u043d\u043e\u0432\u043e\u044e \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f, \u044f\u043a\u0430 \u043f\u043e\u043a\u0430\u0437\u0443\u0454, \u0441\u043a\u0456\u043b\u044c\u043a\u043e\u043c \u043f\u0456\u043a\u0441\u0435\u043b\u044f\u043c \u0434\u043e\u0440\u0456\u0432\u043d\u044e\u0454 \u043a\u043e\u0436\u043d\u0430 \u043e\u0434\u0438\u043d\u0438\u0446\u044f \u0443 \u0432\u0430\u0448\u0438\u0445 \u0443\u043c\u043e\u0432\u0430\u0445.<\/li>\n<\/ol>\n<h2>\u0429\u043e \u0442\u0430\u043a\u0435 \u043e\u0434\u0438\u043d\u0438\u0446\u0456 CSS \u0456 \u0447\u043e\u043c\u0443 \u0432\u043e\u043d\u0438 \u0432\u0430\u0436\u043b\u0438\u0432\u0456?<\/h2>\n<p>\u0414\u043e\u0432\u0436\u0438\u043d\u0438 \u0432 CSS \u043f\u043e\u0434\u0456\u043b\u044f\u044e\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0432\u0456 \u0440\u043e\u0434\u0438\u043d\u0438. <em>\u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u0456<\/em> \u043e\u0434\u0438\u043d\u0438\u0446\u0456, \u044f\u043a-\u043e\u0442 px \u0456 pt, \u043c\u0430\u044e\u0442\u044c \u0444\u0456\u043a\u0441\u043e\u0432\u0430\u043d\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440: \u0441\u043f\u0435\u0446\u0438\u0444\u0456\u043a\u0430\u0446\u0456\u044f CSS \u0432\u0438\u0437\u043d\u0430\u0447\u0430\u0454 \u043e\u043f\u043e\u0440\u043d\u0438\u0439 \u043f\u0456\u043a\u0441\u0435\u043b\u044c \u0442\u0430\u043a, \u0449\u043e 1in = 96px = 72pt. <em>\u0412\u0456\u0434\u043d\u043e\u0441\u043d\u0456<\/em> \u043e\u0434\u0438\u043d\u0438\u0446\u0456 \u0437\u0430\u043b\u0435\u0436\u0430\u0442\u044c \u0432\u0456\u0434 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443: rem \u043f\u043e\u0441\u0438\u043b\u0430\u0454\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u043a\u043e\u0440\u0435\u043d\u0435\u0432\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430, em \u2014 \u043d\u0430 \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e, vw \u0456 vh \u2014 \u043d\u0430 1% \u0448\u0438\u0440\u0438\u043d\u0438 \u0430\u0431\u043e \u0432\u0438\u0441\u043e\u0442\u0438 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430, \u0430 % (\u0434\u043b\u044f font-size) \u2014 \u043d\u0430 \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0412\u0438\u0431\u0456\u0440 \u043e\u0434\u0438\u043d\u0438\u0446\u0456 \u0432\u0438\u0437\u043d\u0430\u0447\u0430\u0454 \u043f\u043e\u0432\u0435\u0434\u0456\u043d\u043a\u0443 \u043c\u0430\u043a\u0435\u0442\u0430. \u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0432 px \u0437\u0430\u043b\u0438\u0448\u0430\u044e\u0442\u044c\u0441\u044f \u043d\u0435\u0437\u043c\u0456\u043d\u043d\u0438\u043c\u0438 \u043f\u043e\u043f\u0440\u0438 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430, \u0442\u043e\u043c\u0443 \u0432\u043e\u043d\u0438 \u043f\u0435\u0440\u0435\u0434\u0431\u0430\u0447\u0443\u0432\u0430\u043d\u0456 \u0434\u043b\u044f \u0440\u0430\u043c\u043e\u043a \u0456 \u0434\u0440\u0456\u0431\u043d\u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439, \u0430\u043b\u0435 \u043d\u0435\u0433\u043d\u0443\u0447\u043a\u0456 \u0434\u043b\u044f \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0456\u043a\u0438. \u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0432 rem \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0443\u044e\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u043e\u043c \u0456\u0437 \u0440\u043e\u0437\u043c\u0456\u0440\u043e\u043c \u0448\u0440\u0438\u0444\u0442\u0443 \u043a\u043e\u0440\u0435\u043d\u044f: \u044f\u043a\u0449\u043e \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u0437\u0431\u0456\u043b\u044c\u0448\u0443\u0454 \u0431\u0430\u0437\u043e\u0432\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 \u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0456, \u0432\u0441\u0435, \u0449\u043e \u0437\u0430\u0434\u0430\u043d\u043e \u0432 rem, \u0437\u0440\u043e\u0441\u0442\u0430\u0454 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0456\u0439\u043d\u043e \u2014 \u0446\u0435 \u043a\u043b\u044e\u0447\u043e\u0432\u0430 \u0432\u0438\u043c\u043e\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0456. \u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0432 em \u043d\u0430\u043a\u043e\u043f\u0438\u0447\u0443\u044e\u0442\u044c\u0441\u044f \u0443 \u0432\u043a\u043b\u0430\u0434\u0435\u043d\u0438\u0445 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445, \u0449\u043e \u043c\u043e\u0436\u0435 \u0434\u0430\u0432\u0430\u0442\u0438 \u043d\u0435\u0441\u043f\u043e\u0434\u0456\u0432\u0430\u043d\u0456 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0438 \u0432 \u0433\u043b\u0438\u0431\u043e\u043a\u0456\u0439 \u0440\u043e\u0437\u043c\u0456\u0442\u0446\u0456.<\/p>\n<p>\u0412\u2019\u044e\u043f\u043e\u0440\u0442\u043d\u0456 \u043e\u0434\u0438\u043d\u0438\u0446\u0456 \u0437\u043c\u0443\u0448\u0443\u044e\u0442\u044c \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0456\u043a\u0443 \u0439 \u0432\u0456\u0434\u0441\u0442\u0443\u043f\u0438 \u0440\u0435\u0430\u0433\u0443\u0432\u0430\u0442\u0438 \u043d\u0430 \u0440\u043e\u0437\u043c\u0456\u0440 \u0432\u0456\u043a\u043d\u0430. \u0428\u0438\u0440\u0438\u043d\u0430, \u0437\u0430\u0434\u0430\u043d\u0430 \u044f\u043a <code>50vw<\/code>, \u0437\u0430\u0432\u0436\u0434\u0438 \u0437\u0430\u0439\u043c\u0430\u0454 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0435\u043a\u0440\u0430\u043d\u0430, \u0442\u043e\u043c\u0443 \u0443 \u0432\u0435\u043b\u0438\u043a\u0438\u0445 \u043f\u0435\u0440\u0448\u0438\u0445 \u0441\u0435\u043a\u0446\u0456\u044f\u0445 \u0456 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0447\u043e\u0457 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0456\u043a\u0438 vw \u0447\u0430\u0441\u0442\u043e \u043f\u043e\u0454\u0434\u043d\u0443\u044e\u0442\u044c \u0456\u0437 rem \u0447\u0435\u0440\u0435\u0437 <code>clamp()<\/code>. \u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 vw \u0456 vh \u0437\u043c\u0456\u043d\u044e\u044e\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043a\u043e\u0436\u043d\u0456\u0439 \u0437\u043c\u0456\u043d\u0456 \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0432\u0456\u043a\u043d\u0430, \u0457\u0445 \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0432 px \u043c\u0430\u0454 \u0441\u0435\u043d\u0441 \u043b\u0438\u0448\u0435 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430 \u2014 \u0441\u0430\u043c\u0435 \u0442\u043e\u0433\u043e, \u044f\u043a\u0438\u0439 \u0432\u0438 \u0432\u0432\u043e\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440.<\/p>\n<p>\u0422\u043b\u0443\u043c\u0430\u0447\u0438\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u0440\u043e\u0441\u0442\u043e: \u043a\u043e\u0436\u043d\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u2014 \u0446\u0435 \u0442\u0430 \u0441\u0430\u043c\u0430 \u0444\u0456\u0437\u0438\u0447\u043d\u0430 \u0434\u043e\u0432\u0436\u0438\u043d\u0430, \u0432\u0438\u0440\u0430\u0436\u0435\u043d\u0430 \u0432 \u0456\u043d\u0448\u0456\u0439 \u043e\u0434\u0438\u043d\u0438\u0446\u0456. \u042f\u043a\u0449\u043e \u0432\u0438 \u043c\u0456\u0433\u0440\u0443\u0454\u0442\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0437 px \u043d\u0430 rem, \u043a\u043e\u043b\u043e\u043d\u043a\u0430 rem \u043f\u0456\u0434\u043a\u0430\u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0442\u043e\u043a\u0435\u043d\u0430, \u044f\u043a\u0435 \u0442\u0440\u0435\u0431\u0430 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u0438; \u044f\u043a\u0449\u043e \u0432\u0438 \u0433\u043e\u0442\u0443\u0454\u0442\u0435 \u043c\u0430\u0442\u0435\u0440\u0456\u0430\u043b \u0434\u043e \u0434\u0440\u0443\u043a\u0443 \u0447\u0438 \u043f\u043e\u0440\u0456\u0432\u043d\u044e\u0454\u0442\u0435 \u0437 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0443, \u0449\u043e \u043f\u0440\u0430\u0446\u044e\u044e\u0442\u044c \u0456\u0437 \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438, \u043a\u043e\u043b\u043e\u043d\u043a\u0430 pt \u0434\u0430\u0441\u0442\u044c \u043f\u0440\u044f\u043c\u0438\u0439 \u0435\u043a\u0432\u0456\u0432\u0430\u043b\u0435\u043d\u0442.<\/p>\n<h2>\u041f\u0440\u0438\u043f\u0443\u0449\u0435\u043d\u043d\u044f, \u043e\u0431\u043c\u0435\u0436\u0435\u043d\u043d\u044f \u0442\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0456 \u043f\u043e\u0440\u0430\u0434\u0438<\/h2>\n<ul>\n<li>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u043f\u0440\u0438\u043f\u0443\u0441\u043a\u0430\u0454 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0438\u0439 \u043e\u043f\u043e\u0440\u043d\u0438\u0439 \u043f\u0456\u043a\u0441\u0435\u043b\u044c CSS: <code>1in = 96px = 72pt<\/code>. \u0424\u0456\u0437\u0438\u0447\u043d\u0438\u0439 (\u0434\u0440\u0443\u043a\u043e\u0432\u0430\u043d\u0438\u0439) \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u0435 \u0442\u0440\u043e\u0445\u0438 \u0432\u0456\u0434\u0440\u0456\u0437\u043d\u044f\u0442\u0438\u0441\u044f \u0437\u0430\u043b\u0435\u0436\u043d\u043e \u0432\u0456\u0434 \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u044e.<\/li>\n<li>\u0412\u0456\u0434\u0441\u043e\u0442\u043a\u0438 \u0442\u0440\u0430\u043a\u0442\u0443\u044e\u0442\u044c\u0441\u044f \u044f\u043a \u0432\u0456\u0434\u043d\u043e\u0441\u043d\u0456 \u0434\u043e \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0448\u0440\u0438\u0444\u0442\u0443 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0449\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0434\u043b\u044f <code>font-size<\/code>. \u0414\u043b\u044f <code>width<\/code>, <code>height<\/code>, <code>margin<\/code> \u0456 <code>padding<\/code> \u0432\u0456\u0434\u0441\u043e\u0442\u043e\u043a \u043e\u0431\u0447\u0438\u0441\u043b\u044e\u0454\u0442\u044c\u0441\u044f \u0432\u0456\u0434 \u0440\u043e\u0437\u043c\u0456\u0440\u0456\u0432 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0442\u043e\u0436 \u0443 \u0442\u0430\u043a\u0438\u0445 \u0432\u0438\u043f\u0430\u0434\u043a\u0430\u0445 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0435 \u0456\u043d\u0448\u0435 \u043e\u043f\u043e\u0440\u043d\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f.<\/li>\n<li>em \u0454 \u0432\u0456\u0434\u043d\u043e\u0441\u043d\u043e\u044e \u0434\u043e \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0448\u0440\u0438\u0444\u0442\u0443 <em>\u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e<\/em> \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0410\u043b\u0435 \u0443 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u044f\u0445 \u043d\u0430 \u043a\u0448\u0442\u0430\u043b\u0442 <code>line-height<\/code> \u0447\u0438 <code>padding<\/code> \u0441\u0430\u043c\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 em \u043f\u043e\u0441\u0438\u043b\u0430\u0454\u0442\u044c\u0441\u044f \u043d\u0430 \u0432\u043b\u0430\u0441\u043d\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u0446\u044c\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u2014 \u0441\u043a\u043e\u0440\u0438\u0433\u0443\u0439\u0442\u0435 \u043f\u043e\u043b\u0435 \u00ab\u0420\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u00bb \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e.<\/li>\n<li>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0438 \u0434\u043b\u044f vw \u0456 vh \u0447\u0438\u043d\u043d\u0456 \u043b\u0438\u0448\u0435 \u0434\u043b\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0445 \u0432\u0430\u043c\u0438 \u0440\u043e\u0437\u043c\u0456\u0440\u0456\u0432 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430. \u041f\u0435\u0440\u0435\u0432\u0456\u0440\u0442\u0435 \u043a\u0456\u043b\u044c\u043a\u0430 \u0440\u043e\u0437\u043c\u0456\u0440\u0456\u0432 (\u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, 1920\u00d71080, 1366\u00d7768, 390\u00d7844), \u0449\u043e\u0431 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438, \u044f\u043a \u0437\u043c\u0456\u043d\u044e\u044e\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f.<\/li>\n<li>\u0417\u0430 \u043f\u0435\u0432\u043d\u0438\u0445 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0438 \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u044e\u0442\u044c \u043c\u0456\u043d\u0456\u043c\u0430\u043b\u044c\u043d\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443, \u0447\u0435\u0440\u0435\u0437 \u044f\u043a\u0438\u0439 \u0434\u0443\u0436\u0435 \u0434\u0440\u0456\u0431\u043d\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0456 rem \u0430\u0431\u043e em \u043c\u043e\u0436\u0435 \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u0438\u0441\u044f \u0431\u0456\u043b\u044c\u0448\u0438\u043c, \u043d\u0456\u0436 \u0432\u0438\u043f\u043b\u0438\u0432\u0430\u0454 \u0437 \u0440\u043e\u0437\u0440\u0430\u0445\u0443\u043d\u043a\u0443.<\/li>\n<li>\u0417\u0440\u0443\u0447\u043d\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e: \u0437\u0430 \u0442\u0438\u043f\u043e\u0432\u043e\u0433\u043e \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0448\u0440\u0438\u0444\u0442\u0443 \u043a\u043e\u0440\u0435\u043d\u044f 16px \u043c\u0430\u0454\u043c\u043e 1rem = 16px, \u0442\u043e\u0431\u0442\u043e <em>px \u00f7 16 = rem<\/em>. \u042f\u043a\u0449\u043e \u0437\u043c\u0456\u043d\u0438\u0442\u0438 \u043a\u043e\u0440\u0456\u043d\u044c \u043d\u0430 10px, \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f rem \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0442\u0438\u043c\u0443\u0442\u044c px \u00f7 10 \u2014 \u0441\u0430\u043c\u0435 \u0442\u043e\u043c\u0443 \u0431\u0430\u0433\u0430\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0442\u044c \u043a\u043e\u0440\u0456\u043d\u044c 10px.<\/li>\n<\/ul>\n<p>\u042f\u043a\u0449\u043e \u0432\u0430\u043c \u0442\u0430\u043a\u043e\u0436 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u043e\u0434\u0438\u043d\u0438\u0446\u0456 \u0432\u0438\u043c\u0456\u0440\u044e\u0432\u0430\u043d\u043d\u044f \u0447\u0438 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u0456 \u043e\u0434\u0438\u043d\u0438\u0446\u0456, \u0441\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044f \u043d\u0430\u0448\u0438\u043c\u0438 <a href=\"https:\/\/wpcalc.com\/uk\/konvertery\/konverter-odynyts-potuzhnosti\/\">\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u043e\u043c \u043e\u0434\u0438\u043d\u0438\u0446\u044c \u043f\u043e\u0442\u0443\u0436\u043d\u043e\u0441\u0442\u0456<\/a>, <a href=\"https:\/\/wpcalc.com\/uk\/konvertery\/konverter-shvydkosti-peredachi-danykh-mbps-v-mb-s\/\">\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u043e\u043c \u0448\u0432\u0438\u0434\u043a\u043e\u0441\u0442\u0456 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445<\/a> \u0430\u0431\u043e \u0443\u043d\u0456\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0438\u043c <a href=\"https:\/\/wpcalc.com\/uk\/konvertery\/konverter-shvydkosti\/\">\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u043e\u043c \u043e\u0434\u0438\u043d\u0438\u0446\u044c \u0448\u0432\u0438\u0434\u043a\u043e\u0441\u0442\u0456<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u044e\u0439\u0442\u0435 \u0434\u043e\u0432\u0436\u0438\u043d\u0443 \u0432 CSS \u043c\u0456\u0436 px, rem, em, vw, vh, pt \u0456 \u0432\u0456\u0434\u0441\u043e\u0442\u043a\u0430\u043c\u0438. \u0412\u0432\u0435\u0434\u0456\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u043e\u0431\u0435\u0440\u0456\u0442\u044c \u0439\u043e\u0433\u043e \u043e\u0434\u0438\u043d\u0438\u0446\u044e, \u0437\u0430\u0434\u0430\u0439\u0442\u0435 \u0440\u043e\u0437\u043c\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0443 \u043a\u043e\u0440\u0435\u043d\u044f \u0442\u0430 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u0442\u0430\u043a\u043e\u0436 \u0440\u043e\u0437\u043c\u0456\u0440\u0438 \u0432\u2019\u044e\u043f\u043e\u0440\u0442\u0430 \u2014 \u0456 \u043e\u0434\u0440\u0430\u0437\u0443 \u043e\u0434\u0435\u0440\u0436\u0442\u0435 \u0432\u0441\u0456 \u0435\u043a\u0432\u0456\u0432\u0430\u043b\u0435\u043d\u0442\u0438.<\/p>\n","protected":false},"author":3168,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[61],"class_list":["post-4968","post","type-post","status-publish","format-standard","hentry","category-konvertery","tag-inshi-odynytsi"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/uk\/wp-json\/wp\/v2\/posts\/4968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/uk\/wp-json\/wp\/v2\/users\/3168"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/uk\/wp-json\/wp\/v2\/comments?post=4968"}],"version-history":[{"count":2,"href":"https:\/\/wpcalc.com\/uk\/wp-json\/wp\/v2\/posts\/4968\/revisions"}],"predecessor-version":[{"id":6045,"href":"https:\/\/wpcalc.com\/uk\/wp-json\/wp\/v2\/posts\/4968\/revisions\/6045"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/uk\/wp-json\/wp\/v2\/media?parent=4968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/uk\/wp-json\/wp\/v2\/categories?post=4968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/uk\/wp-json\/wp\/v2\/tags?post=4968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}