{"id":281044,"date":"2016-11-16T13:00:04","date_gmt":"2016-11-16T10:00:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=281044"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=281044","title":{"rendered":"\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430 CSS-\u0448\u043b\u044e\u0437\u043e\u0432"},"content":{"rendered":"<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/b15\/4e3\/f69\/b154e3f690cf4709957005f22f02b096.png\" \/><\/div>\n<p>  CSS-\u0448\u043b\u044e\u0437\u043e\u043c (CSS-lock) \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u0438\u043a\u0430 \u0438\u0437 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u043d\u0435 \u043f\u0435\u0440\u0435\u043f\u0440\u044b\u0433\u0438\u0432\u0430\u0442\u044c \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443, \u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043b\u0430\u0432\u043d\u043e, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (viewport). \u0418\u0434\u0435\u044e \u0438 \u043e\u0434\u043d\u0443 \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b \u0422\u0438\u043c \u0411\u0440\u0430\u0443\u043d \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"http:\/\/blog.typekit.com\/2016\/08\/17\/flexible-typography-with-css-locks\/\">Flexible typography with CSS locks<\/a>. \u041a\u043e\u0433\u0434\u0430 \u044f \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b, \u043c\u043d\u0435 \u0441 \u0442\u0440\u0443\u0434\u043e\u043c \u0443\u0434\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u042f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u043c\u043d\u043e\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0438 \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u0432\u0441\u044e \u044d\u0442\u0443 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443.<\/p>\n<p>  \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043e\u043f\u0438\u0448\u0443 \u0441\u0430\u043c\u0443 \u043c\u0435\u0442\u043e\u0434\u0438\u043a\u0443, \u0435\u0451 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0438 \u043b\u0435\u0436\u0430\u0449\u0443\u044e \u0432 \u0435\u0451 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443. \u041d\u0435 \u0432\u043e\u043b\u043d\u0443\u0439\u0442\u0435\u0441\u044c: \u0442\u0430\u043c \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043e\u0434\u043d\u0438 \u0441\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u044f. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u0432\u0441\u0451 \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043d\u0430 \u044d\u0442\u0430\u043f\u044b \u0438 \u0443\u043a\u0440\u0430\u0441\u0438\u043b \u0438\u0445 \u0433\u0440\u0430\u0444\u0438\u043a\u0430\u043c\u0438.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h1>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 CSS-\u0448\u043b\u044e\u0437?<\/h1>\n<p>  <\/p>\n<h3>\u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430<\/h3>\n<p>  \u0412 \u043c\u043e\u0438\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0431\u0430\u043d\u043d\u0435\u0440 \u043d\u0430 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0441 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c \u0438 \u043e\u0434\u043d\u0438 \u043b\u0438\u0448\u044c \u00ab\u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0435\u00bb \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0441 \u043a\u0440\u0443\u043f\u043d\u044b\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438. \u042f \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0438 \u0447\u0442\u043e-\u0442\u043e \u0434\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432. \u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430?<\/p>\n<p>  \u0420\u0430\u043d\u044c\u0448\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <code>h1 { font-size: 4vw; \/* \u0411\u0443\u043c! \u0413\u043e\u0442\u043e\u0432\u043e. *\/ }<\/code><\/p>\n<p>  \u0423 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b:<\/p>\n<ol>\n<li>\u041d\u0430 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u0442\u0435\u043a\u0441\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0440\u043e\u0445\u043e\u0442\u043d\u044b\u043c (12,8 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0432 \u0432\u044b\u0441\u043e\u0442\u0443 \u043f\u0440\u0438 \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 320 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439), \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u2014 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c (64 \u043f\u0440\u0438 1600);<\/li>\n<li>\u041d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430.<\/li>\n<\/ol>\n<p>  CSS-\u0448\u043b\u044e\u0437\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. <b>\u0417\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435<\/b> CSS-\u0448\u043b\u044e\u0437\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0442\u0441\u044f \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.<\/p>\n<h3>\u0418\u0434\u0435\u044f CSS-\u0448\u043b\u044e\u0437\u0430<\/h3>\n<p>  CSS-\u0448\u043b\u044e\u0437 \u2014 \u044d\u0442\u043e \u043e\u0441\u043e\u0431\u044b\u0439 \u0432\u0438\u0434 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f CSS-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c:<\/p>\n<ul>\n<li>\u0435\u0441\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435,<\/li>\n<li>\u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 (breakpoint) (\u043e\u0431\u044b\u0447\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430),<\/li>\n<li>\u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u0438\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043b\u0438\u043d\u0435\u0439\u043d\u043e \u043e\u0442 \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0430 \u0434\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0430.<\/li>\n<\/ul>\n<p>   <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ca5\/71e\/a9b\/ca571ea9b08d4f539666360eb2bc4d9b.png\"\/><\/p>\n<p>  \u00ab\u041f\u0440\u0438 \u0448\u0438\u0440\u0438\u043d\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 320 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0448\u0440\u0438\u0444\u0442\u044b 20px, \u0441\u0432\u044b\u0448\u0435 960 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u2014 40px, \u0430 \u043c\u0435\u0436\u0434\u0443 320 \u0438 960 \u2014 \u043e\u0442 20px \u0434\u043e 40px\u00bb. <\/p>\n<p>  \u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 CSS \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">h1 { font-size: 1.25rem; }  @media (min-width: 320px) {   h1 { font-size: \/* \u0432\u043e\u043b\u0448\u0435\u0431\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0442 1.25 rem \u0434\u043e 2.5 rem *\/; } }  @media (min-width: 960px) {   h1 { font-size: 2.5rem; } }<\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0432\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c <b>\u0432\u043e\u043b\u0448\u0435\u0431\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/b>. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u043f\u043e\u0440\u0447\u0443 \u0432\u0430\u043c \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">h1 {   font-size: calc(1.25rem + viewport_relative_value); }<\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c <code>viewport_relative_value<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d\u043e\u0447\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>3vw<\/code>) \u0438\u043b\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u043e\u0439 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 (\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 <code>vw<\/code> \u0438\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u0435\u0434\u0438\u043d\u0438\u0446\u044b).<\/p>\n<h3>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/h3>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 CSS-\u0448\u043b\u044e\u0437\u044b \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u044b \u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0448\u043b\u044e\u0437\u044b \u0438\u043c\u0435\u044e\u0442 \u0440\u044f\u0434 \u0432\u0430\u0436\u043d\u044b\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439. <b>\u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0438\u0441\u043b\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/b> <code>calc()<\/code> <b>\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/b>.<\/p>\n<p>  \u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (<code>vw<\/code>, <code>vh<\/code>, <code>vmin<\/code> \u0438 <code>vmax<\/code>) \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u2014 768 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0442\u043e <code>1vw<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432 7,68 \u043f\u0438\u043a\u0441\u0435\u043b\u044f.<\/p>\n<p>  (\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0422\u0438\u043c\u0430 \u0435\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0430: \u043e\u043d \u043f\u0438\u0448\u0435\u0442, \u0447\u0442\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432\u0440\u043e\u0434\u0435 <code>100vw - 30em<\/code> \u0434\u0430\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>em<\/code>. \u042d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 <code>100vw<\/code> \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0438 \u0432\u044b\u0447\u0438\u0442\u0430\u0435\u0442 \u0438\u0437 \u043d\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>30em<\/code> \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.) <\/p>\n<p>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0442\u043e\u0433\u043e, \u0447\u0442\u043e <b>\u043d\u0435<\/b> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/p>\n<ul>\n<li>CSS-\u0448\u043b\u044e\u0437 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>opacity<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>opacity: calc(.5+1px)<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u043e\u0439;<\/li>\n<li>CSS-\u0448\u043b\u044e\u0437 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <code>transform<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>rotate<\/code>: \u0448\u043b\u044e\u0437 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445).<\/li>\n<\/ul>\n<p>  \u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435. \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u043d\u0430\u0439\u0434\u0443\u0442\u0441\u044f \u0445\u0440\u0430\u0431\u0440\u0435\u0446\u044b \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 <b>\u043c\u043e\u0433\u0443\u0442<\/b> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 CSS-\u0448\u043b\u044e\u0437\u0430\u0445.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>font-size<\/code> \u0438 <code>line-height<\/code> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0438\u0445 CSS-\u0448\u043b\u044e\u0437\u044b \u0441 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0438\u043b\u0438 em.<\/p>\n<h1>CSS-\u0448\u043b\u044e\u0437\u044b \u0441 \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438<\/h1>\n<p>  <\/p>\n<h3>\u0414\u0435\u043c\u043a\u0438<\/h3>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/fvsch.com\/code\/css-locks\/demo1\">CSS calc lock for font-size (rem+px, px MQ)<\/a><\/li>\n<li><a href=\"https:\/\/fvsch.com\/code\/css-locks\/demo2\">CSS calc lock for line-height (%+px, px MQ)<\/a><\/li>\n<li><a href=\"https:\/\/fvsch.com\/code\/css-locks\/demo3\">Combined font-size and line-height lock (px-based)<\/a><\/li>\n<\/ul>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c CSS-\u043a\u043e\u0434 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432.<\/p>\n<h3>\u0420\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043a\u0430\u043a \u043b\u0438\u043d\u0435\u0439\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f<\/h3>\n<p>  \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b font-size \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u043b\u0441\u044f \u0441 20px \u043f\u0440\u0438 \u0448\u0438\u0440\u0438\u043d\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 320px \u0434\u043e 40px \u043f\u0440\u0438 \u0448\u0438\u0440\u0438\u043d\u0435 960px. \u041e\u0442\u0440\u0430\u0437\u0438\u043c \u044d\u0442\u043e \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/d9a\/10e\/267\/d9a10e267b7e4b1888822742311eb49d.png\"\/><\/p>\n<p>  \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0433\u0440\u0430\u0444\u0438\u043a \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0451 \u043a\u0430\u043a <code>y = mx + b<\/code>:<\/p>\n<ul>\n<li><code>y<\/code> \u2014 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 (\u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0441\u044c),<\/li>\n<li><code>x<\/code> \u2014 \u0448\u0438\u0440\u0438\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 (\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0441\u044c),<\/li>\n<li><code>m<\/code> \u2014 \u043d\u0430\u043a\u043b\u043e\u043d (slope) \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u0440\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043d\u0430 1 \u043f\u0438\u043a\u0441\u0435\u043b\u044c),<\/li>\n<li><code>b<\/code> \u2014 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430.<\/li>\n<\/ul>\n<p>  \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c <code>m<\/code> \u0438 <code>b<\/code>. \u0412 \u0443\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430\u043c\u0438.<\/p>\n<p>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u0441 <code>m<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b <code>(x,y)<\/code>. \u042d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 (\u0434\u0438\u0441\u0442\u0430\u043d\u0446\u0438\u044f, \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043d\u0430\u044f \u0437\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438), \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430:<\/p>\n<pre><code class=\"css\">m = font_size_increase \/ viewport_increase m = (y2 - y1) \/ (x2 - x1) m = (40 - 20) \/ (960 - 320) m = 20 \/ 640 m = 0.03125<\/code><\/pre>\n<p>  \u0414\u0440\u0443\u0433\u0430\u044f \u0444\u043e\u0440\u043c\u0430:<\/p>\n<p>  \u041e\u0431\u0449\u0435\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 font-size \u2014 20 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 (<code>40 - 20<\/code>).<br \/>  \u041e\u0431\u0449\u0435\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u2014 640 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 (<code>960 - 320<\/code>).<br \/>  \u0415\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u044b\u0440\u0430\u0441\u0442\u0435\u0442 \u043d\u0430 1 \u043f\u0438\u043a\u0441\u0435\u043b\u044c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440 font-size? <\/p>\n<p>  <code>20 \/ 640 = 0.03125 px.<\/code><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u043c <code>b<\/code>.<\/p>\n<pre><code class=\"css\">y = mx + b b = y - mx b = y - 0.03125x<\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u0435\u0438\u0445 \u044d\u0442\u0438\u0445 \u0442\u043e\u0447\u0435\u043a, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b <code>(x,y)<\/code> \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u043d\u0438\u0445. \u0412\u043e\u0437\u044c\u043c\u0451\u043c \u043f\u0435\u0440\u0432\u0443\u044e:<\/p>\n<pre><code class=\"css\">b = y1 - 0.03125 \u00d7 x1 b = 20 - 0.03125 \u00d7 320 b = 10<\/code><\/pre>\n<p>  \u041a\u0441\u0442\u0430\u0442\u0438, \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u044d\u0442\u0438 10 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a. \u041d\u043e \u0432\u0435\u0434\u044c \u043e\u043d \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \ud83d\ude42<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <code>y = 0.03125x + 10<\/code><\/p>\n<h3>\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 CSS<\/h3>\n<p>  <code>y<\/code> \u2014 \u0440\u0430\u0437\u043c\u0435\u0440 font-size, \u0438, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 CSS, \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d <code>calc()<\/code>.<\/p>\n<p>  <code>font-size: calc( 0.03125x + 10px );<\/code><\/p>\n<p>  \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u044d\u0442\u043e \u043f\u0441\u0435\u0432\u0434\u043eCSS, \u043f\u043e\u0442\u043e\u043c\u0443 <code>x<\/code> \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c. \u041d\u043e \u0432 \u043d\u0430\u0448\u0435\u0439 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>x<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432 CSS \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c \u043a\u0430\u043a <code>100vw<\/code>.<\/p>\n<p>  <code>font-size: calc( 0.03125 * 100vw + 10px );<\/code><\/p>\n<p>  \u0412\u043e\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 CSS. \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0430\u0442\u043a\u043e, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>0.03125 \u00d7 100 = 3.125<\/code>, \u0442\u043e:<\/p>\n<p>  <code>font-size: calc( 3.125vw + 10px );<\/code><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 320 \u0438 960 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e media-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432:<\/p>\n<pre><code class=\"css\">h1 { font-size: 20px; }  @media (min-width: 320px) {   h1 { font-size: calc( 3.125vw + 10px ); } }  @media (min-width: 960px) {   h1 { font-size: 40px; } }<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448 \u0433\u0440\u0430\u0444\u0438\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ca5\/71e\/a9b\/ca571ea9b08d4f539666360eb2bc4d9b.png\"\/><\/p>\n<p>  \u041a\u0440\u0430\u0441\u0438\u0432\u043e, \u043d\u043e \u043c\u043d\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u043f\u0440\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0438 font-size. \u041c\u043e\u0436\u043d\u043e \u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435?<\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a<\/h3>\n<p>  \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u043d\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0432\u043d\u043e 16 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c, \u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 (\u043e\u0431\u044b\u0447\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442).<br \/>  \u042f \u0445\u043e\u0447\u0443 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 \u043d\u0430\u0448\u0443 \u0444\u043e\u0440\u043c\u0443\u043b\u0443 \u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u0440\u0430\u0449\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>rem<\/code>. \u0412 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 <code>em<\/code> \u0438 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0442 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f.<\/p>\n<p>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u0447\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u043c\u0443 (root) font-size \u043d\u0435 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u043e \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 CSS \u0438\u0437 Bootstrap 3, \u0442\u0430\u043c \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043c\u0430\u043b\u043e \u0442\u0430\u043a\u043e\u0433\u043e:<\/p>\n<pre><code class=\"css\">html {   font-size: 10px; }<\/code><\/pre>\n<p>  <b>\u041d\u0438\u043a\u043e\u0433\u0434\u0430 \u0442\u0430\u043a \u043d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435!<\/b> (\u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0432 Bootstrap 4 \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0438.) \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e em (<code>1rem<\/code>), \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435:<\/p>\n<pre><code class=\"css\">\/*  * \u041c\u0435\u043d\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 rem \u0441 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438.  * \u041f\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e font-size 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439:  * \u2022 62.5% -&gt; 1rem = 10px, .1rem  = 1px  * \u2022 125%  -&gt; 1rem = 20px, .05rem = 1px  *\/ html {   font-size: 62.5%; }<\/code><\/pre>\n<p>  \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0432 \u043f\u043e\u043a\u043e\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 font-size, \u043f\u0443\u0441\u0442\u044c \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 16 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442, \u0435\u0441\u043b\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c font-size-\u0448\u043b\u044e\u0437\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>rem<\/code>-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438:<\/p>\n<pre><code class=\"css\">\/*  * \u0421 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:  * \u2022 0.625rem = 10px  * \u2022 1.25rem  = 20px  * \u2022 2.5rem   = 40px  *\/ h1 { font-size: 1.25rem; }  @media (min-width: 320px) {   h1 { font-size: calc( 3.125vw + .625rem ); } }  @media (min-width: 960px) {   h1 { font-size: 2.5rem; } }<\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u0434 \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f, \u043a\u0430\u043a \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043a\u043e\u0434, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0439 \u043f\u0438\u043a\u0441\u0435\u043b\u0438. \u0417\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e!<\/p>\n<p>  \u041d\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u044d\u0442\u043e \u0440\u0430\u0434\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0432\u043d\u043e\u0441\u0438\u043c\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 <b>\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439<\/b>, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u0430\u043a \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0434\u0430\u043b \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0432\u043c\u0435\u0441\u0442\u043e 16 (\u043d\u0430 50 % \u0431\u043e\u043b\u044c\u0448\u0435). \u041a\u0430\u043a \u043f\u043e\u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044f \u043a\u043e\u0434?<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/73f\/fd2\/55b\/73ffd255be3f4526a949e312f82866c2.png\"\/><\/p>\n<p>  \u0421\u0438\u043d\u044f\u044f \u043b\u0438\u043d\u0438\u044f: font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 16 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c.<br \/>  \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f: font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c. <\/p>\n<p>  \u041f\u0440\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0434\u043e 320 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0448\u0440\u0438\u0444\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f <b>\u043c\u0435\u043d\u044c\u0448\u0435<\/b> (\u0441 30 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442\u0441\u044f \u0434\u043e 25), \u0430 \u043f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043a\u0430\u0447\u043a\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e (\u0441 45 \u0434\u043e 60 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439). \u041e\u0439.<\/p>\n<p>  \u0418\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0442\u043e \u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (baseline) \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0440\u0451\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0431\u0435\u0440\u0435\u043c <code>1.25rem<\/code>:<\/p>\n<pre><code class=\"css\">h1 { font-size: 1.25rem; }  @media (min-width: 320px) {   h1 { font-size: calc( 1.25rem + 3.125vw - 10px ); } }  @media (min-width: 960px) {   h1 { font-size: calc( 1.25rem + 20px ); } }<\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 <code>3.125vw - 10px<\/code>. \u042d\u0442\u043e \u043d\u0430\u0448\u0430 \u0441\u0442\u0430\u0440\u0430\u044f \u043b\u0438\u043d\u0435\u0439\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f (\u0432 \u0432\u0438\u0434\u0435 <code>mx + b<\/code>), \u043d\u043e \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>b<\/code>. \u041d\u0430\u0437\u043e\u0432\u0451\u043c \u0435\u0433\u043e <code>b\u2032<\/code>. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0432\u043d\u043e 20 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>b\u2032<\/code> \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0432\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"css\">b\u2032 = b - baseline_value b\u2032 = 10 - 20 b\u2032 = 10<\/code><\/pre>\n<p>  \u0414\u0440\u0443\u0433\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u2014 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <b>\u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430<\/b>, \u0430 \u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u043b\u0438\u043d\u0435\u0439\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0443\u044e <b>\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435<\/b> font-size (\u043d\u0430\u0437\u043e\u0432\u0451\u043c \u0435\u0433\u043e <code>y\u2032<\/code>, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0443\u0442\u0430\u0442\u044c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0430\u043c\u043e\u0433\u043e font-size <code>y<\/code>).<\/p>\n<pre><code class=\"css\">x1 = 320 x2 = 960  y\u20321 = 0 y\u20322 = 20  m = (y\u20322 - y\u20321) \/ (x2 - x1) m = (20 - 0) \/ (960 - 320) m = 20 \/ 640 m = 0.03125  b\u2032 = y\u2032 - mx b\u2032 = y\u20321 - 0.03125 \u00d7 x1 b\u2032 = 0 - 0.03125 \u00d7 320 b\u2032 = -10<\/code><\/pre>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>y\u2032 = 0.03125x - 10<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/069\/331\/63d\/06933163d15742dca038534d7b32096a.png\"\/><\/p>\n<p>  \u0421 \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0432 <code>rem<\/code> \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 <code>vw<\/code> \u0438\/\u0438\u043b\u0438 <code>px<\/code> \u043c\u044b \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0448\u043b\u044e\u0437 \u0434\u043b\u044f font-size. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u043d\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u043d\u0435\u0433\u043e \u0438 \u043d\u0435 \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/17a\/cae\/604\/17acae604fa342079ffcb35098381e2f.png\"\/><\/p>\n<p>  \u041f\u0443\u0440\u043f\u0443\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f: \u0441\u0442\u0435\u043f\u0435\u043d\u044c \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f font-size.<br \/>  \u0421\u0438\u043d\u044f\u044f \u043b\u0438\u043d\u0438\u044f: font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 16 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c.<br \/>  \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f: font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c. <\/p>\n<p>  \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u044d\u0442\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0441\u0438\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c: \u043e\u043d \u0445\u043e\u0442\u0435\u043b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0448\u0440\u0438\u0444\u0442 \u043d\u0430 50%, \u0430 \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u0438 \u0435\u0433\u043e \u043d\u0430 50% \u0432 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u0445 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0438 \u043d\u0430 25% \u2014 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445. \u041d\u043e \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0448\u043b\u044e\u0437\u0430 \u0434\u043b\u044f \u0432\u044b\u0441\u043e\u0442\u044b \u0441\u0442\u0440\u043e\u043a\u0438<\/h3>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439: \u00ab\u042f \u0445\u043e\u0447\u0443 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u044b \u0441 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 140% \u043f\u0440\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 320 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0438 180% \u2014 \u043f\u0440\u0438 960\u00bb.<\/p>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <b>\u043f\u043b\u044e\u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c, \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u043d\u044b\u043c \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/b>, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b 1,4 \u0438 1,8. \u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c <code>font-size<\/code> \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u043e\u0432. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0440\u0430\u0432\u0435\u043d 16 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c:<\/p>\n<ul>\n<li><code>16 * 1.4 = 22.4<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043f\u0440\u0438 \u043d\u0438\u0436\u043d\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (<code>320 px<\/code>)<\/li>\n<li><code>16 * 1.8 = 28.8<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043f\u0440\u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (<code>960 px<\/code>)<\/li>\n<\/ul>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u044c\u043c\u0451\u043c <code>140% = 22.4px<\/code>. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043e\u0431\u0449\u0435\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 6,4 \u043f\u0438\u043a\u0441\u0435\u043b\u044f. \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043d\u0430\u0448\u0435\u0439 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0443\u043b\u043e\u0439:<\/p>\n<pre><code class=\"css\">x1 = 320 x2 = 960  y\u20321 = 0 y\u20322 = 6.4  m = (y\u20322 - y\u20321) \/ (x2 - x1) m = (6.4 - 0) \/ (960 - 320) m = 6.4 \/ 640 m = 0.01  b\u2032 = y\u2032 - mx b\u2032 = y\u20321 - 0.01 \u00d7 x1 b\u2032 = 0 - 0.01 \u00d7 320 b\u2032 = 3.2  y\u2032 = 0.01x - 3.2<\/code><\/pre>\n<p>  \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0432 CSS:<\/p>\n<p>  <code>line-height: calc( 140% + 1vw - 3.2px );<\/code><\/p>\n<p>  <b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/b>: \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u0430\u043a 140% \u0438\u043b\u0438 <code>1.4em<\/code>; \u0431\u0435\u0437\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0435 <code>1.4<\/code> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 <code>calc()<\/code>.<\/p>\n<p>  \u0417\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c media-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e\u0431\u044b <b>\u0432\u0441\u0435<\/b> \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f <code>line-height<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043e\u0434\u043d\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (<code>140%<\/code>).<\/p>\n<pre><code class=\"css\">p { line-height: 140%; }  @media (min-width: 320px) {   p { line-height: calc( 140% + 1vw - 3.2px ); } }  @media (min-width: 960px) {   p { line-height: calc( 140% + 6.4px ); } }<\/code><\/pre>\n<p>  <b>\u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e:<\/b> \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e <code>180%<\/code>, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u043d\u0430\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0447\u0430\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u0431\u0430\u0437\u043e\u0432\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e. \u0415\u0441\u043b\u0438 \u0432\u0437\u044f\u0442\u044c <code>180%<\/code>, \u0442\u043e \u043f\u0440\u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0448\u0440\u0438\u0444\u0442\u0430 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442.<\/p>\n<p>  \u041f\u043e\u0441\u0442\u0440\u043e\u0438\u043c \u0433\u0440\u0430\u0444\u0438\u043a \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445 font-size.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/a4c\/357\/6c6\/a4c3576c6f834b1c9d727aa8cb219744.png\"\/><\/p>\n<p>  \u0421\u0438\u043d\u044f\u044f \u043b\u0438\u043d\u0438\u044f: font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 16 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c.<br \/>  \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f: font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c. <\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0448\u0430 \u0444\u043e\u0440\u043c\u0443\u043b\u0430 <code>line-height<\/code> \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 font-size \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u0444\u043e\u0440\u043c\u0443\u043b\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 <a href=\"https:\/\/fvsch.com\/code\/css-locks\/demo2\">\u044d\u0442\u043e\u043c \u0434\u0435\u043c\u043e<\/a> \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444 \u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c \u043a\u0430\u043a:<\/p>\n<pre><code class=\"css\">.big {   font-size: 166%; }<\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043c\u0435\u043d\u044f\u0435\u0442 \u043d\u0430\u0448\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438:<\/p>\n<ul>\n<li><code>16 * 1.66 * 1.4 = 37.184<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043f\u0440\u0438 \u043d\u0438\u0436\u043d\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (<code>320px<\/code>)<\/li>\n<li><code>16 * 1.66 * 1.8 = 47.808<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043f\u0440\u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (<code>960px<\/code>)<\/li>\n<\/ul>\n<p>  \u041f\u0440\u043e\u0432\u0435\u0434\u0451\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443\u043b\u0443: <code>y\u2032 = 0.0166x - 5.312<\/code>. \u0417\u0430\u0442\u0435\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043c \u0432 CSS \u044d\u0442\u043e\u0442 \u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">p { line-height: 140%; } .big { font-size: 166%; }  @media (min-width: 320px) {   p    { line-height: calc( 140% + 1vw - 3.2px ); }   .big { line-height: calc( 140% + 1.66vw - 5.312px ); } }  @media (min-width: 960px) {   p    { line-height: calc( 140% + 6.4px ); }   .big { line-height: calc( 140% + 10.624px ); } }<\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0437\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043d\u0430 CSS. \u0420\u0430\u0437 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b line-heights, \u043a\u0430\u043a \u0434\u043b\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430, \u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043b\u0438\u0448\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 1,66:<\/p>\n<pre><code class=\"css\">p { line-height: 140%; } .big { font-size: 166%; }  @media (min-width: 320px) {   p    { line-height: calc( 140% + 1vw - 3.2px ); }   .big { line-height: calc( 140% + (1vw - 3.2px) * 1.66 ); } } @media (min-width: 960px) {   p    { line-height: calc( 140% + 6.4px ); }   .big { line-height: calc( 140% + 6.4px * 1.66 ); } }<\/code><\/pre>\n<p>  <\/p>\n<h3>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0448\u043b\u044e\u0437\u043e\u0432 font-size \u0438 line-height<\/h3>\n<p>  \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0451 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u043e\u0435\u0434\u0438\u043d\u043e. \u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439: \u0435\u0441\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439\u0441\u044f \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 (fluid column) \u0441 H1 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430\u043c\u0438. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c font-size \u0438 line-height, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n<table>\n<tr>\n<td><b>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/b><\/td>\n<td><b>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 320px<\/b><\/td>\n<td><b>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 960px<\/b><\/td>\n<\/tr>\n<tr>\n<td>H1 font-size<\/td>\n<td>24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f<\/td>\n<td>40 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439<\/td>\n<\/tr>\n<tr>\n<td>H1 line-height<\/td>\n<td>133,33%<\/td>\n<td>120%<\/td>\n<\/tr>\n<tr>\n<td>P font-size<\/td>\n<td>15 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439<\/td>\n<td>18 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439<\/td>\n<\/tr>\n<tr>\n<td>P line-height<\/td>\n<td>150%<\/td>\n<td>166,67%<\/td>\n<\/tr>\n<\/table>\n<p>  \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0441 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0434\u0432\u0435 \u0432\u0435\u0449\u0438. \u0415\u0441\u0442\u044c \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e: \u043a\u043e\u0433\u0434\u0430 \u0442\u0435\u043a\u0441\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0432\u044b\u0441\u043e\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c, \u0430 \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0448\u0438\u0440\u0435 \u2014 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c. \u041d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043e\u0431\u0435 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0430\u0449\u0438\u0435 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443! \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u044b:<\/p>\n<ul>\n<li>\u0414\u043b\u044f H1 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 font-size \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u0435\u0435, \u0447\u0435\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0441\u0442\u043e\u043b\u0431\u0446\u0430.<\/li>\n<li>\u0414\u043b\u044f \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u043e\u0432 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u0435\u0435, \u0447\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 font-size.<\/li>\n<\/ul>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u0434\u0432\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u2014 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 320 \u0438 960 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0448\u043b\u044e\u0437\u0430 \u0434\u043b\u044f font-size:<\/p>\n<pre><code class=\"css\">h1 { font-size: 1.5rem; } \/* .9375rem = 15px \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e *\/ p { font-size: .9375rem; }  @media (min-width: 320px) {   h1 { font-size: calc( 1.5rem + 2.5vw - 8px ); }   \/* .46875vw - 1.5px \u0440\u0430\u0432\u043d\u043e \u043e\u0442 0 \u0434\u043e 3px *\/   p { font-size: calc( .9375rem + .46875vw - 1.5px ); } } @media (min-width: 960px) {   h1 { font-size: calc(1.5rem + 16px); }   p { font-size: calc( .9375rem + 3px ); } }<\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e, \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0448\u043b\u044e\u0437\u044b \u0434\u043b\u044f <code>line-height<\/code>. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u0443\u0434\u0430 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437.<\/p>\n<p>  \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 H1. \u0414\u043b\u044f <code>line-height<\/code> \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u2014 120%. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443 \u043d\u0430\u0441 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c, \u0442\u043e \u044d\u0442\u0438 120% \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0438 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c\u043e\u0435 \u0434\u0432\u0443\u043c\u044f \u0442\u043e\u0447\u043a\u0430\u043c\u0438:<\/p>\n<ul>\n<li><code>24 \u00d7 1.2 = 28.8px<\/code> \u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435,<\/li>\n<li><code>40 \u00d7 1.2 = 48px<\/code> \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435.<\/li>\n<\/ul>\n<p>  \u0412 \u043d\u0438\u0436\u043d\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>line-height<\/code>, \u0440\u0430\u0432\u043d\u043e\u0435 133,33%, \u044d\u0442\u043e \u043e\u043a\u043e\u043b\u043e 32 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.<\/p>\n<p>  \u041d\u0430\u0439\u0434\u0451\u043c \u043b\u0438\u043d\u0435\u0439\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0443\u044e \u00ab\u0442\u043e, \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u0431\u0430\u0437\u043e\u0432\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e 120%\u00bb. \u0415\u0441\u043b\u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u044d\u0442\u0438 120%, \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0434\u0432\u0430 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li><code>24 \u00d7 (1.3333 - 1.2) = 3.2px<\/code> \u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435,<\/li>\n<li><code>40 \u00d7 (1.2 - 1.2) = 0px<\/code> \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435.<\/li>\n<\/ul>\n<p>  \u0414\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u043a\u043b\u043e\u043d. <\/p>\n<pre><code class=\"css\">m = (y\u20322 - y\u20321) \/ (x2 - x1) m = (0 - 3.2) \/ (960 - 320) m = -3.2 \/ 640 m = -0.005  b\u2032 = y\u2032 - mx b\u2032 = y\u20321 - (-0.005 \u00d7 x1) b\u2032 = 3.2 + 0.005 \u00d7 320 b\u2032 = 4.8  y\u2032 = -0.005x + 4.8<\/code><\/pre>\n<p>  \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0432 CSS:<\/p>\n<pre><code class=\"css\">h1 {   line-height: calc( 120% - .5vw + 4.8px ); }<\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ab3\/6d4\/ab7\/ab36d4ab713a40b48844be4e28b75704.png\"\/><\/p>\n<p>  \u0421\u0438\u043d\u044f\u044f \u043b\u0438\u043d\u0438\u044f: \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 line-height.<br \/>  \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f: \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 line-height (120% font-size \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430).<br \/>  \u041f\u0443\u0440\u043f\u0443\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f: \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f line-height. <\/p>\n<p>  \u041d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 (\u043f\u0443\u0440\u043f\u0443\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f) \u0440\u0430\u0432\u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e 120% \u043f\u043b\u044e\u0441 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u0441\u0442\u0440\u043e\u043a\u0438 (\u0441\u0438\u043d\u044f\u044f \u043b\u0438\u043d\u0438\u044f). \u041c\u043e\u0436\u0435\u0442\u0435 \u0441\u0430\u043c\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043d\u0430 <a href=\"http:\/\/www.graphsketch.com\/?eqn1_color=2&amp;eqn1_eqn=%2816%20%2B%200.025x%29*1.2&amp;eqn2_color=1&amp;eqn2_eqn=-0.005x%20%2B%204.8&amp;eqn3_color=5&amp;eqn3_eqn=%2816%20%2B%200.025x%29*1.2%20%2B%20%28-0.005x%20%2B%204.8%29&amp;eqn4_color=6&amp;eqn4_eqn=&amp;eqn5_color=6&amp;eqn5_eqn=&amp;eqn6_color=6&amp;eqn6_eqn=&amp;x_min=-80&amp;x_max=1200&amp;y_min=-10&amp;y_max=65&amp;x_tick=80&amp;y_tick=5&amp;x_label_freq=4&amp;y_label_freq=2&amp;do_grid=0&amp;do_grid=1&amp;bold_labeled_lines=0&amp;line_width=3&amp;image_w=1200&amp;image_h=800\">GraphSketch.com<\/a>.<\/p>\n<p>  \u0414\u043b\u044f \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u043e\u0432 \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>150%<\/code>. \u0423\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 line-height:<\/p>\n<p>  <code>(1.75 - 1.5) \u00d7 18 = 4.5px.<\/code><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ccb\/9d2\/50f\/ccb9d250f21a4ae4894315d0e2d3f42c.png\"\/><\/p>\n<p>  <a href=\"http:\/\/acqualia.com\/soulver\/\">\u041c\u043e\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440<\/a> \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0430\u044f:<\/p>\n<p>  <code>y\u2032 = 0.00703125x - 2.25<\/code><\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 CSS-\u043a\u043e\u0434, \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 <a href=\"https:\/\/fvsch.com\/code\/css-locks\/demo3\">\u0434\u0435\u043c\u043a\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b font-size \u0438 line-height<\/a>. \u0418\u0437\u043c\u0435\u043d\u044f\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u0432\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442 \u0435\u0441\u0442\u044c, \u0445\u043e\u0442\u044c \u0438 \u0441\u043b\u0430\u0431\u044b\u0439.<\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0434\u0435\u043c\u043a\u0443, \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f line-height \u0431\u0443\u0434\u0443\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u043c\u0438, \u043d\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u043c\u0438. \u041d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e line-height \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<h3>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439<\/h3>\n<p>  \u0413\u043e\u0442\u043e\u0432\u044f \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b, \u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b \u0432\u0441\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043b\u0438\u0431\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 Soulver. \u041d\u043e \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0440\u0443\u0434\u043e\u0451\u043c\u043a\u043e, \u0438 \u0432\u044b\u0441\u043e\u043a\u0430 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a. \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0439 \u0444\u0430\u043a\u0442\u043e\u0440, \u0445\u043e\u0440\u043e\u0448\u043e \u0431\u044b \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<p>  \u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u2014 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432\u0441\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432 CSS. \u042d\u0442\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0444\u043e\u0440\u043c\u0443\u043b\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0441 font-size, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"css\">@media (min-width: 320px) and (max-width: 959px) {   h1 {     font-size: calc(       \/* y1 *\/       1.5rem       \/* + m \u00d7 x *\/       + ((40 - 24) \/ (960 - 320)) * 100vw       \/* - m \u00d7 x1 *\/        - ((40 - 24) \/ (960 - 320)) * 320px     );   } }<\/code><\/pre>\n<p>  \u041d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0431\u0443\u043a\u0432, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u0435\u0439:<\/p>\n<pre><code class=\"css\">@media (min-width: 320px) and (max-width: 959px) {   h1 {     font-size: calc( 1.5rem + 16 * (100vw - 320px) \/ (960 - 320) );   } }<\/code><\/pre>\n<p>  \u0422\u0430\u043a \u0441\u043e\u0432\u043f\u0430\u043b\u043e, \u0447\u0442\u043e \u044d\u0442\u0443 \u0444\u043e\u0440\u043c\u0443\u043b\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0422\u0438\u043c \u0411\u0440\u0430\u0443\u043d \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"http:\/\/blog.typekit.com\/2016\/08\/17\/flexible-typography-with-css-locks\/\">Flexible typography with CSS locks<\/a>, \u043f\u0440\u0430\u0432\u0434\u0430, \u0441 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c\u0438 \u0432\u043c\u0435\u0441\u0442\u043e <code>em<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439. \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0451\u043d\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0441 font-size \u0438 line-height, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u0441\u0442\u043e\u043b\u044c \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043d\u0430\u043a\u043b\u043e\u043d\u0435.<\/p>\n<pre><code class=\"css\">@media (min-width: 320px) and (max-width: 959px) {   h1 {     font-size: calc( 1.5rem + 16 * (100vw - 320px) \/ (960 - 320) );     \/* \u041f\u0440\u0438 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043d\u0430\u043a\u043b\u043e\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 *\/     line-height: calc( 120% + 3.2 * (100vw - 960px) \/ (320 - 960) );   } }<\/code><\/pre>\n<p>  \u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u2014 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 Sass \u0438\u043b\u0438 PostCSS mixin. <\/p>\n<h1>CSS-\u0448\u043b\u044e\u0437\u044b \u0441 em-\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438<\/h1>\n<p>  <\/p>\n<h3>\u041d\u043e\u0432\u044b\u0435 \u0434\u0435\u043c\u043a\u0438<\/h3>\n<p>  \u042f \u0432\u0437\u044f\u043b \u0442\u0440\u0438 \u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u0435\u043c\u043a\u0438 \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a \u0438 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0439 \u0432\u0441\u0442\u0430\u0432\u0438\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <code>rem<\/code>.<\/p>\n<ul>\n<li><a href=\"https:\/\/fvsch.com\/code\/css-locks\/demo5\">CSS calc lock for font-size (rem+rem, em MQ)<\/a><\/li>\n<li><a href=\"https:\/\/fvsch.com\/code\/css-locks\/demo6\">CSS calc lock for line-height (%+rem, px MQ)<\/a><\/li>\n<li><a href=\"https:\/\/fvsch.com\/code\/css-locks\/demo7\">Combined font-size and line-height lock (em\/rem-based)<\/a><\/li>\n<\/ul>\n<p>  \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0432 \u044d\u0442\u0438\u0445 \u0434\u0435\u043c\u043a\u0430\u0445.<\/p>\n<h3>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 m \u00d7 100vw \u0434\u043b\u044f media-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 em \u2014 \u043d\u0435 \u043b\u0443\u0447\u0448\u0430\u044f \u0438\u0434\u0435\u044f<\/h3>\n<p>  \u0412\u044b\u0448\u0435 \u043c\u044b \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 <code>m \u00d7 100vw<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0434\u0435\u0441\u044c<code> calc(base + 2.5vw)<\/code>). \u0415\u0433\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 media-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <code>em<\/code>.<\/p>\n<p>  \u0412\u0441\u0451 \u0434\u0435\u043b\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 media-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u0415\u0434\u0438\u043d\u0438\u0446\u044b <code>em<\/code> \u0438 <code>rem<\/code> \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435: \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0432 User Agent. \u0410 \u043e\u043d, \u043a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0432\u0438\u0434\u0435\u043b\u0438, \u043e\u0431\u044b\u0447\u043d\u043e \u0440\u0430\u0432\u0435\u043d 16 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c, \u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u043e\u0435. \u041f\u043e\u0447\u0435\u043c\u0443?<\/p>\n<ol>\n<li>\u041f\u043e \u0432\u043e\u043b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438\u043b\u0438 \u041e\u0421 (\u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0432\u0440\u043e\u0434\u0435 \u0422\u0412-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u0447\u0438\u0442\u0430\u043b\u043e\u043a).<\/li>\n<li>\u041f\u043e \u0432\u043e\u043b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/li>\n<\/ol>\n<p>  \u0422\u0430\u043a \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 <code>20em<\/code> \u0438 <code>60em<\/code>, \u0442\u043e \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 CSS-\u0448\u0438\u0440\u0438\u043d\u0435:<\/p>\n<ul>\n<li>320 \u0438 960 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u0440\u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0448\u0440\u0438\u0444\u0442\u0430 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439,<\/li>\n<li>480 \u0438 1440 \u2014 \u043f\u0440\u0438 24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0438 \u0442. \u0434.<\/li>\n<\/ul>\n<p>  (\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044d\u0442\u043e <b>CSS-\u043f\u0438\u043a\u0441\u0435\u043b\u0438<\/b>, \u0430 \u043d\u0435 <b>\u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438<\/b>. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043d\u0430\u0448\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f.)<\/p>\n<p>  \u0412\u044b\u0448\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b\u0438\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0435 \u0442\u0430\u043a\u043e\u0433\u043e:<\/p>\n<p>  <code>font-size: calc( 3.125vw + .625rem );<\/code><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432 \u044d\u0442\u043e\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>em<\/code>, \u043f\u0440\u0438\u043d\u044f\u0432, \u0447\u0442\u043e \u0432 media-\u0437\u0430\u043f\u0440\u043e\u0441\u0435 1 em \u0440\u0430\u0432\u0435\u043d 16 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f:<\/p>\n<pre><code class=\"css\">h1 { font-size: 1.25rem; }  \/* \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a :((( *\/ @media (min-width: 20em) {   h1 { font-size: calc( 1.25rem + 3.125vw - 10px ); } }  \/* \u0418\u043b\u0438 \u0442\u0430\u043a. *\/ @media (min-width: 60em) {   h1 { font-size: calc( 1.25rem + 20px ); } }<\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0435\u0441\u043b\u0438 \u041e\u0421, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0410 \u0438\u043d\u0430\u0447\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043b\u043e\u0445\u043e:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/74a\/96b\/9ad\/74a96b9ade504fffaf9bff000b0ad9f0.png\"\/><\/p>\n<p>  \u0421\u0438\u043d\u044f\u044f \u043b\u0438\u043d\u0438\u044f: font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 16 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c.<br \/>  \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f: font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c. <\/p>\n<p>  \u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442? \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 font-size, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <code>em<\/code> \u0441\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u0438\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0435\u0440\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a \u0431\u0443\u0434\u0435\u0442 <code>3.125vw - 10px<\/code>!<\/p>\n<ul>\n<li>\u041f\u0440\u0438 320 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 <code>3.125vw - 10px<\/code> \u0440\u0430\u0432\u043d\u043e 0 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c, \u043a\u0430\u043a \u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c.<\/li>\n<li>\u041f\u0440\u0438 480 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 <code>3.125vw - 10px<\/code> \u0440\u0430\u0432\u043d\u043e 5 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c.<\/li>\n<\/ul>\n<p>  \u041d\u0430 \u0432\u044b\u0441\u043e\u043a\u0438\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0445 \u0442\u043e\u0447\u043a\u0430\u0445 \u0435\u0449\u0451 \u0445\u0443\u0436\u0435:<\/p>\n<ul>\n<li>\u041f\u0440\u0438 960 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 <code>3.125vw - 10px<\/code> \u0440\u0430\u0432\u043d\u043e 20 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c, \u043a\u0430\u043a \u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c.<\/li>\n<li>\u041f\u0440\u0438 1440 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 <code>3.125vw - 10px<\/code> \u0440\u0430\u0432\u043d\u043e 35 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c (\u043d\u0430 15 \u0431\u043e\u043b\u044c\u0448\u0435).<\/li>\n<\/ul>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <code>em<\/code>, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0430\u0447\u0435.<\/p>\n<h3>\u0421\u043d\u043e\u0432\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0440\u0430\u0441\u0447\u0451\u0442\u044b<\/h3>\n<p>  \u042d\u0442\u0430 \u043c\u0435\u0442\u043e\u0434\u0438\u043a\u0430 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432 <a href=\"http:\/\/blog.typekit.com\/2016\/08\/17\/flexible-typography-with-css-locks\/\">\u0441\u0442\u0430\u0442\u044c\u0435 \u0422\u0438\u043c\u0430 \u0411\u0440\u0430\u0443\u043d\u0430<\/a>. \u041e\u043d\u0430 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432 CSS \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0432\u0443\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li><code>100vw<\/code> \u2014 \u0448\u0438\u0440\u0438\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430;<\/li>\n<li>\u043d\u0438\u0436\u043d\u044f\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430, \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u043d\u0430\u044f \u0432 <code>rem<\/code>.<\/li>\n<\/ul>\n<p>  \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0444\u043e\u0440\u043c\u0443\u043b\u043e\u0439:<\/p>\n<p>  <code>y = m \u00d7 (x - x1) \/ (x2 - x1)<\/code><\/p>\n<p>  \u041f\u043e\u0447\u0435\u043c\u0443 \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0435\u0439? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u043e \u0448\u0430\u0433\u0430\u043c. \u0412\u044b\u0448\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438, \u0447\u0442\u043e font-size \u0438 line-height \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439:<\/p>\n<p>  <code>y = mx + b<\/code><\/p>\n<p>  \u0412 CSS \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 <code>x<\/code> (\u044d\u0442\u043e <code>100vw<\/code>). \u041d\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0437\u0430\u0434\u0430\u0442\u044c <code>m<\/code> \u0438 <code>b<\/code> \u0442\u043e\u0447\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0438\u043b\u0438 <code>vw<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b, \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u043d\u044b\u0435 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u0438 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043f\u0443\u0442\u0430\u0442\u044c \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438, \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0432 <code>em<\/code>, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>  \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c <code>m<\/code> \u0438 <code>b<\/code> \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e <code>(x1,y1)<\/code> \u0438 <code>(x2,y2)<\/code>.<\/p>\n<p>  \u041d\u0430\u0445\u043e\u0434\u0438\u043c <code>b<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u0430\u0440\u044b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442: <\/p>\n<pre><code class=\"css\">b = y - mx b = y1 - m \u00d7 x1<\/code><\/pre>\n<p>  \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0451 \u0432\u043c\u0435\u0441\u0442\u0435:<\/p>\n<pre><code class=\"css\">y = mx + b y = mx + y1 - m \u00d7 x1<\/code><\/pre>\n<p>  \u041c\u044b \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u043b\u0438 <code>b<\/code> \u0438\u0437 \u0444\u043e\u0440\u043c\u0443\u043b\u044b!<\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0432\u044b\u0448\u0435 \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438, \u0447\u0442\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>font-size<\/code> \u0438\u043b\u0438 <code>line-height<\/code>, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e <b>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/b>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a <b>\u0431\u0430\u0437\u043e\u0432\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e<\/b>. \u041c\u044b \u043d\u0430\u0437\u0432\u0430\u043b\u0438 \u0435\u0451 <code>y\u2032<\/code> \u0438 \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">y  = y1 + y\u2032 y\u2032 = y - y1<\/code><\/pre>\n<p>  \u0417\u0430\u043c\u0435\u043d\u0438\u043c <code>y<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430:<\/p>\n<pre><code class=\"css\">y\u2032 = mx + y1 - m \u00d7 x1 - y1 y\u2032 = mx + y1 - m \u00d7 x1 - y1<\/code><\/pre>\n<p>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043a\u0443\u0441\u043a\u043e\u0432 <code>+ y1<\/code> \u0438 <code>- y1<\/code>!<\/p>\n<pre><code class=\"css\">y\u2032 = m \u00d7 x - m \u00d7 x1 y\u2032 = m \u00d7 (x - x1)<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c <code>m<\/code> \u0443\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438:<\/p>\n<p>  <code>m = (y2 - y1) \/ (x2 - x1)<\/code><\/p>\n<p>  \u0422\u043e\u0433\u0434\u0430:<\/p>\n<p>  <code>y\u2032 = (y2 - y1) \/ (x2 - x1) \u00d7 (x - x1)<\/code><\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <code>y\u2032 = max_value_increase \u00d7 (x - x1) \/ (x2 - x1)<\/code><\/p>\n<h3>\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 CSS<\/h3>\n<p>  \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 CSS. \u0412\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043e\u043f\u044f\u0442\u044c \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u00ab\u043e\u0442 20 \u0434\u043e 40 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439\u00bb:<\/p>\n<pre><code class=\"css\">@media (min-width: 20em) and (max-width: 60em) {   h1 {     \/* \u0412\u041d\u0418\u041c\u0410\u041d\u0418\u0415: \u044d\u0442\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442! *\/     font-size: calc(       1.25rem \/* \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 *\/       + 20px \/* \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 *\/       * (100vw - 20rem) \/* x - x1 *\/       \/ (60rem - 20rem) \/* x2 - x1 *\/     );   } }<\/code><\/pre>\n<p>  \u041a\u043e\u0434 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043e\u043d \u043c\u043e\u0433 \u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u043e <code>calc()<\/code> \u0432 CSS \u0438\u043c\u0435\u0435\u0442 \u0440\u044f\u0434 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0445\u0441\u044f \u043a \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u044e \u0438 \u0434\u0435\u043b\u0435\u043d\u0438\u044e.<\/p>\n<p>  \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 <code>100vw - 20rem<\/code>. \u042d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0435\u0441\u0442\u044c \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u2014 600 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0432\u0435\u043d 280 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c (<code>600 - 20 \u00d7 15<\/code>). \u0415\u0441\u043b\u0438 font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f, \u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u2014 600 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0432\u0435\u043d 120 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c (<code>600 - 20 \u00d7 24<\/code>). <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/fd0\/517\/82c\/fd051782ced047da88e4216d47ffad9e.png\"\/><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u043b\u044f \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0438\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0434\u0438\u043d\u0438\u0446\u0443 <code>rem<\/code>. \u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 <code>em<\/code>? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 CSS-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 <code>em<\/code> \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f <b>\u043d\u0435<\/b> \u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 font-size, \u0430 \u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 font-size \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0432 \u043e\u0431\u0449\u0435\u043c) \u043b\u0438\u0431\u043e \u043d\u0430 \u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 font-size (\u043a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>font-size<\/code>).<\/p>\n<p>  \u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 CSS \u2014 \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f, \u0441\u0441\u044b\u043b\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041d\u043e \u0442\u0430\u043a\u043e\u0439 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442. \u0421\u0430\u043c\u043e\u0435 \u0431\u043b\u0438\u0437\u043a\u043e\u0435 \u2014 \u044d\u0442\u043e <code>rem<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 font-size, \u0442\u043e\u043b\u044c\u043a\u043e <b>\u0435\u0441\u043b\u0438 \u043e\u043d \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0441\u044f<\/b>.<\/p>\n<p>  \u0422\u043e \u0435\u0441\u0442\u044c \u0432 \u043d\u0430\u0448\u0435\u043c CSS \u043d\u0438 \u0432 \u043a\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"css\">\/* \u041f\u043b\u043e\u0445\u043e *\/ html { font-size: 10px; }  \/* \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043b\u043e\u0445\u043e *\/ :root { font-size: 16px; }  \/* \u0423\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435    \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0442\u043e\u0447\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 20rem\/1.25,    40em\/1.25 \u0438 \u0442. \u0434. *\/ :root { font-size: 125%; }<\/code><\/pre>\n<p>  <\/p>\n<h3>\u0411\u0435\u0437\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u044b\u0435 \u0437\u043d\u0430\u043c\u0435\u043d\u0430\u0442\u0435\u043b\u0438 \u0438 \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u0438 calc <\/h3>\n<p>  \u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 <code>60rem - 20rem<\/code> \u043a \u0448\u0438\u0440\u0438\u043d\u0435 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u043b\u043e \u0431\u044b, \u0447\u0442\u043e \u0434\u0440\u043e\u0431\u044c <code>(x - x1) \/ (x2 - x1)<\/code> \u0434\u0430\u0432\u0430\u043b\u0430 \u0431\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u043e\u0442 0 \u0434\u043e 1. \u041d\u0430\u0437\u043e\u0432\u0451\u043c \u0435\u0433\u043e <code>n<\/code>.<\/p>\n<p>  \u041f\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0438 \u0448\u0438\u0440\u0438\u043d\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0432 600 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c:<\/p>\n<pre><code class=\"css\">n = (x - x1) \/ (x2 - x1) n = (600 - 320) \/ (960 - 320) n = 280 \/ 640 n = 0.475<\/code><\/pre>\n<p>  \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u043e.<\/p>\n<p>  \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0432 <code>calc()<\/code> \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u043c\u0435\u043d\u0430\u0442\u0435\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0438\u043b\u0438 \u043a\u0430\u043a\u0443\u044e-\u043b\u0438\u0431\u043e CSS-\u0435\u0434\u0438\u043d\u0438\u0446\u0443. \u0412\u0435\u043b\u0438\u0447\u0438\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0431\u0435\u0437\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0439. \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u043c \u0434\u0435\u043b\u0430\u0442\u044c?<\/p>\n<p>  \u0410 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0431\u0440\u0430\u0442\u044c \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0432 \u0437\u043d\u0430\u043c\u0435\u043d\u0430\u0442\u0435\u043b\u0435? \u041a\u0430\u043a\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f <code>calc((100vw - 20rem)\/(60 - 20))<\/code>?<\/p>\n<table>\n<tr>\n<td colspan=\"3\"><b>\u0420\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430<\/b><\/td>\n<td><b>\u0414\u0435\u043b\u0435\u043d\u0438\u0435 \u0432 CSS<\/b><\/td>\n<td><b>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/b><\/td>\n<\/tr>\n<tr>\n<td>20em (320px)<\/td>\n<td>(320px \u2013 16px \u00d7 20) \/ (60 \u2013 20)<\/td>\n<td>= 0px<\/td>\n<\/tr>\n<tr>\n<td>40em (640px)<\/td>\n<td>(640px \u2013 16px \u00d7 20) \/ (60 \u2013 20)<\/td>\n<td>= 8px<\/td>\n<\/tr>\n<tr>\n<td>60em (960px)<\/td>\n<td>(960px \u2013 16px \u00d7 20) \/ (60 \u2013 20)<\/td>\n<td>= 16px<\/td>\n<\/tr>\n<tr>\n<td colspan=\"3\"><b>\u0420\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430<\/b><\/td>\n<td><b>\u0414\u0435\u043b\u0435\u043d\u0438\u0435 \u0432 CSS<\/b><\/td>\n<td><b>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/b><\/td>\n<\/tr>\n<tr>\n<td>20em (480px)<\/td>\n<td>(480px \u2013 24px \u00d7 20) \/ (60 \u2013 20)<\/td>\n<td>= 0px<\/td>\n<\/tr>\n<tr>\n<td>40em (960px)<\/td>\n<td>(960px \u2013 24px \u00d7 20) \/ (60 \u2013 20)<\/td>\n<td>= 12px<\/td>\n<\/tr>\n<tr>\n<td>60em (1440px)<\/td>\n<td>(1440px \u2013 24px \u00d7 20) \/ (60 \u2013 20)<\/td>\n<td>= 24px<\/td>\n<\/tr>\n<\/table>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 (\u043e\u0442 <code>20em<\/code> \u0434\u043e <code>60em<\/code>) \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0442 <code>0rem<\/code> \u0434\u043e <code>1rem<\/code>. \u0413\u043e\u0434\u0438\u0442\u0441\u044f!<\/p>\n<p>  \u041f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0448 CSS \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c <code>20px<\/code>. \u041d\u0430\u0434\u043e \u0435\u0433\u043e \u0432\u044b\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u044c.<\/p>\n<p>  \u041a\u043e\u0434 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0438:<\/p>\n<p>  <code>font-size: calc( 1.25rem + 20px * n );<\/code><\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c <code>n<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u043b\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0442 0 \u0434\u043e 1. \u041d\u043e \u0438\u0437-\u0437\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432 <code>calc()<\/code> \u043c\u044b \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u0442 0 \u0434\u043e 1.<\/p>\n<p>  \u0422\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442 \u0434\u043b\u044f \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 <code>0rem \u2014 1rem<\/code>; \u043d\u0430\u0437\u043e\u0432\u0451\u043c \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>r<\/code>.<\/p>\n<p>  \u0414\u0440\u0443\u0433\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 <code>calc()<\/code> \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u044e. \u0415\u0441\u043b\u0438 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c <code>calc(a * b)<\/code>, \u0442\u043e <code>a<\/code> \u0438\u043b\u0438 <code>b<\/code> \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0431\u0435\u0437\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u044b\u043c \u0447\u0438\u0441\u043b\u043e\u043c. <\/p>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 <code>r<\/code> \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u044c (\u044d\u0442\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0438), \u0442\u043e \u0431\u0435\u0437\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u044b\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c.<\/p>\n<p>  \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043d\u0430 20 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435. 20 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u2014 \u044d\u0442\u043e <code>1.25rem<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 <code>1.25<\/code>:<\/p>\n<p>  <code>font-size: calc( 1.25rem + 1.25 * r );<\/code><\/p>\n<p>  \u0414\u043e\u043b\u0436\u043d\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041d\u043e \u0438\u043c\u0435\u0439\u0442\u0435 \u0432 \u0432\u0438\u0434\u0443, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>r<\/code> \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:<\/p>\n<ul>\n<li>16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439: <code>1.25 * r<\/code> \u0440\u0430\u0432\u043d\u043e \u043e\u0442 0 \u0434\u043e 20 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.<\/li>\n<li>24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f: <code>1.25 * r<\/code> \u0440\u0430\u0432\u043d\u043e \u043e\u0442 0 \u0434\u043e 30 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.<\/li>\n<\/ul>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0432\u0435\u0441\u044c CSS-\u0448\u043b\u044e\u0437 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0441 media-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438, \u0432\u0435\u0440\u0445\u043d\u0438\u043c \u0438 \u043d\u0438\u0436\u043d\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438:<\/p>\n<pre><code class=\"css\">h1 {   font-size: 1.25rem; }  @media (min-width: 20em) {   \/* \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 (100vw - 20rem) \/ (60 - 20) \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 0-1rem,       \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (\u043e\u0442 20em \u0434\u043e 60em). *\/   h1 {     font-size: calc( 1.25rem + 1.25 * (100vw - 20rem) \/ (60 - 20) );   } }  @media (min-width: 60em) {   \/* \u041f\u0440\u0430\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0414\u041e\u041b\u0416\u041d\u0410 \u0431\u044b\u0442\u044c rem.       \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u041c\u041e\u0416\u0415\u041c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0451 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435      \u043d\u0430 font-size: 2.5rem, \u043d\u043e \u0435\u0441\u043b\u0438 \u043d\u0430\u0448\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435      \u0432\u044b\u0440\u0430\u0436\u0430\u043b\u043e\u0441\u044c \u043d\u0435 \u0432 rem, \u0442\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c calc. *\/   h1 {     font-size: calc( 1.25rem + 1.25 * 1rem );   } }<\/code><\/pre>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0448\u043b\u044e\u0437\u0430 font-size, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0430 50%, \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0442\u043e\u0436\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 50%: \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438. \u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d 30\u201460 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e 20\u201440.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ba4\/530\/acd\/ba4530acd1074909acabca6b3fc9b7bf.png\"\/><\/p>\n<p>  \u0421\u0438\u043d\u044f\u044f \u043b\u0438\u043d\u0438\u044f: font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 16 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c.<br \/>  \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f: font-size \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 24 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c. <\/p>\n<p>  \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0432 <a href=\"https:\/\/fvsch.com\/code\/css-locks\/demo5\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0434\u0435\u043c\u043a\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0435\u0439 em<\/a>.<\/p>\n<h3>\u0428\u043b\u044e\u0437\u044b line-height c em\/rem<\/h3>\n<p>  \u0412 \u043d\u0430\u0448\u0435\u0439 \u0432\u0442\u043e\u0440\u043e\u0439 \u0434\u0435\u043c\u043a\u0435 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043c <code>line-height<\/code> \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430 \u0441\u043e 140% \u0434\u043e 180%. \u0411\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>140%<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0430 \u0432 \u0440\u043e\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0432\u044b\u0441\u0442\u0443\u043f\u0438\u0442 \u0442\u0430 \u0436\u0435 \u0444\u043e\u0440\u043c\u0443\u043b\u0430, \u0447\u0442\u043e \u0438 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 <code>font-size<\/code>.<\/p>\n<pre><code class=\"css\">p {   line-height: 140%; } @media (min-width: 20em) {   p {     line-height: calc( 140% + .4 * (100vw - 20rem) \/ (60 - 20) );   } } @media (min-width: 60em) {   p {     line-height: calc( 140% + .4 * 1rem );   } }<\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 <code>line-height<\/code> \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e rem-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>(100vw - 20rem) \/ (60 - 20)<\/code> \u0434\u0430\u0451\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u043e\u0442 <code>0rem<\/code> \u0434\u043e <code>1rem<\/code>.<\/p>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>font-size<\/code> \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0440\u0430\u0432\u0435\u043d <code>1rem<\/code>, \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u0441\u0442\u0440\u043e\u043a\u0438 \u0435\u0449\u0451 \u043d\u0430 <code>40%<\/code> \u0440\u0430\u0432\u043d\u043e <code>.4rem<\/code>. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0434\u0432\u0443\u0445 <code>calc()<\/code>-\u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u0438\u0437 <a href=\"https:\/\/fvsch.com\/code\/css-locks\/demo7\">\u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u0434\u0435\u043c\u043a\u0438<\/a> \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 <code>line-height<\/code>. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e <b>\u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c<\/b> <code>line-height<\/code> H1 \u0441\u043e 133,33% \u0434\u043e 120%. \u0418 \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f <code>font-size<\/code>.<\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u044b \u0443\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u043b\u0438, \u0447\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u0441\u0442\u0440\u043e\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0432\u0443\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a:<\/p>\n<ul>\n<li><code>24 \u00d7 (1.3333 - 1.2) = 3.2px<\/code> \u043f\u0440\u0438 \u043d\u0438\u0436\u043d\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438,<\/li>\n<li><code>40 \u00d7 (1.2 - 1.2) = 0px<\/code> \u043f\u0440\u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/li>\n<\/ul>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u044c\u043c\u0451\u043c <code>120%<\/code>, \u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442 3,2 \u0434\u043e 0 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 16 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c, \u0442\u043e 3,2 \u043f\u0438\u043a\u0441\u0435\u043b\u044f <code>= 0.2rem<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c \u0440\u0430\u0432\u0435\u043d <code>.2<\/code>.<\/p>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0440\u0430\u0432\u043d\u0430 \u043d\u0443\u043b\u044e \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0442\u043e\u0447\u043a\u0435, \u043d\u0443\u0436\u043d\u043e \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0444\u043e\u0440\u043c\u0443\u043b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438:<\/p>\n<pre><code class=\"css\">h1 {   line-height: calc( 120% + 0.2 * 1rem ); } @media (min-width: 20em) {   h1 {     line-height: calc( 120% + 0.2 * (100vw - 60rem) \/ (20 - 60) );   } } @media (min-width: 60em) {   h1 {     line-height: 120%;   } }<\/code><\/pre>\n<p>  \u0414\u0432\u0430 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f:<\/p>\n<ol>\n<li>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>.2rem<\/code> \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0435\u0440\u043d\u043e\u0435, \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0448\u043b\u044e\u0437 font-size \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u043e\u0442 24 \u0434\u043e 40 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0417\u0434\u0435\u0441\u044c \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043d\u043e \u0435\u0441\u0442\u044c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u0434\u0435\u043c\u043a\u0438.<\/li>\n<li>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a, \u043e\u0431\u0435 \u0447\u0430\u0441\u0442\u0438 \u0434\u0440\u043e\u0431\u0438 <code>(100vw - 60rem) \/ (20 - 60)<\/code> \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0448\u0438\u0440\u0438\u043d \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u0435\u043d\u044c\u0448\u0435 <code>60em<\/code> \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 <code>20em<\/code> (\u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e). \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u043c <code>-640px \/ -40<\/code>. \u0410 \u0435\u0441\u043b\u0438 \u0432 \u0434\u0440\u043e\u0431\u0438 \u0437\u043d\u0430\u043c\u0435\u043d\u0430\u0442\u0435\u043b\u044c \u0438 \u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435, \u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u043a \u043f\u0435\u0440\u0435\u0434 \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u0435\u043c <code>0.2<\/code>.<\/li>\n<\/ol>\n<p>  <\/p>\n<h1>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h1>\n<p>  \u041a\u0440\u0430\u0442\u043a\u0438\u0435 \u0438\u0442\u043e\u0433\u0438. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0434\u0432\u0435 \u0444\u043e\u0440\u043c\u044b CSS-\u0448\u043b\u044e\u0437\u043e\u0432:<\/p>\n<ul>\n<li>\u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438,<\/li>\n<li>\u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0434\u043b\u044f <code>font-size<\/code> \u0438 <code>line-height<\/code>,<\/li>\n<li>\u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a, \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u043c\u044b\u0445 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0438 <code>em<\/code>.<\/li>\n<\/ul>\n<p>  \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0439 \u0444\u0430\u043a\u0442\u043e\u0440 \u2014 \u0442\u0438\u043f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438. \u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0442\u043e\u0447\u043a\u0438, \u0441\u043a\u0430\u0436\u0435\u043c, \u0434\u043b\u044f \u0448\u043b\u044e\u0437\u0430 <code>font-size<\/code> \u0438 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432. \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438\u043b\u0438 \u0432\u0430\u0448\u0435\u0439 \u043f\u0440\u0438\u0432\u044b\u0447\u043a\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u0440\u044f\u0442\u044c\u0441\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0438\u043b\u0438 <code>em<\/code>. \u041b\u0438\u0447\u043d\u043e \u044f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u043f\u0438\u043a\u0441\u0435\u043b\u0438, \u043d\u043e \u043e\u0431\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430. <\/p>\n<p>  \u041d\u0430\u043f\u043e\u043c\u043d\u044e: \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u0434\u0435\u043b\u043e \u0441 media-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u0432 <code>em<\/code>, \u0442\u043e \u0438\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0435\u0439 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 <b>\u043d\u0435\u043b\u044c\u0437\u044f<\/b> \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 <code>font-size<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443 CSS-\u0448\u043b\u044e\u0437\u0430:<\/p>\n<pre><code class=\"css\">@media (min-width: 20em) and (max-width: 60em) {   selector {     property: calc(       baseline_value +       multiplier *       (100vw - 20rem) \/ (60 - 20)     );   } }<\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c <code>multiplier<\/code> \u2014 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u043e\u0431\u0449\u0435\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u043d\u043e\u0435 \u0432 <code>rem<\/code>, \u043d\u043e \u0431\u0435\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: 0.75 \u0434\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043d\u0430 <code>0.75rem<\/code>.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 media-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u0442\u043e \u0432\u044b <b>\u043c\u043e\u0436\u0435\u0442\u0435<\/b> \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 <code>font-size<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041d\u043e \u0442\u043e\u0433\u0434\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0432\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b CSS-\u0448\u043b\u044e\u0437\u043e\u0432. \u041f\u0435\u0440\u0432\u0430\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430 <code>em\/rem<\/code>-\u0448\u043b\u044e\u0437\u0443, \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445:<\/p>\n<pre><code class=\"css\">@media (min-width: 320px) and (max-width: 960px) {   selector {     property: calc(       baseline_value +       multiplier *       (100vw - 320px) \/ (960 - 320)     );   } }<\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c <code>multiplier<\/code> \u2014 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u043e\u0431\u0449\u0435\u0435 <b>\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/b>, \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u043d\u043e\u0435 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u043d\u043e \u0431\u0435\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <code>12<\/code> \u0434\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043d\u0430 <code>12px<\/code>.<\/p>\n<p>  \u0412\u0442\u043e\u0440\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0448\u043b\u044e\u0437\u0430 \u043f\u0440\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0438 \u043d\u0435 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0412\u0441\u0451, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e, \u043c\u044b \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443:<\/p>\n<pre><code class=\"css\">@media (min-width: 320px) and (max-width: 960px) {   selector {     property: calc(       baseline_value + 0.25vw - 10px;     );   } }<\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>0.25vw<\/code> \u0438 <code>-10px<\/code> \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Sass \u0438\u043b\u0438 PostCSS.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0444\u043e\u0440\u043c\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (\u0435\u0441\u043b\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c mixin), \u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0431\u043e\u043b\u0435\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0443.<br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habrahabr.ru\/post\/315196\/\"> https:\/\/habrahabr.ru\/post\/315196\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/b15\/4e3\/f69\/b154e3f690cf4709957005f22f02b096.png\" \/><\/div>\n<p>  CSS-\u0448\u043b\u044e\u0437\u043e\u043c (CSS-lock) \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u0438\u043a\u0430 \u0438\u0437 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u043d\u0435 \u043f\u0435\u0440\u0435\u043f\u0440\u044b\u0433\u0438\u0432\u0430\u0442\u044c \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443, \u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043b\u0430\u0432\u043d\u043e, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (viewport). \u0418\u0434\u0435\u044e \u0438 \u043e\u0434\u043d\u0443 \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b \u0422\u0438\u043c \u0411\u0440\u0430\u0443\u043d \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"http:\/\/blog.typekit.com\/2016\/08\/17\/flexible-typography-with-css-locks\/\">Flexible typography with CSS locks<\/a>. \u041a\u043e\u0433\u0434\u0430 \u044f \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b, \u043c\u043d\u0435 \u0441 \u0442\u0440\u0443\u0434\u043e\u043c \u0443\u0434\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u042f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u043c\u043d\u043e\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0438 \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u0432\u0441\u044e \u044d\u0442\u0443 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443.<\/p>\n<p>  \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043e\u043f\u0438\u0448\u0443 \u0441\u0430\u043c\u0443 \u043c\u0435\u0442\u043e\u0434\u0438\u043a\u0443, \u0435\u0451 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0438 \u043b\u0435\u0436\u0430\u0449\u0443\u044e \u0432 \u0435\u0451 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443. \u041d\u0435 \u0432\u043e\u043b\u043d\u0443\u0439\u0442\u0435\u0441\u044c: \u0442\u0430\u043c \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043e\u0434\u043d\u0438 \u0441\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u044f. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u0432\u0441\u0451 \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043d\u0430 \u044d\u0442\u0430\u043f\u044b \u0438 \u0443\u043a\u0440\u0430\u0441\u0438\u043b \u0438\u0445 \u0433\u0440\u0430\u0444\u0438\u043a\u0430\u043c\u0438.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-281044","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/281044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=281044"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/281044\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=281044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=281044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=281044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}