{"id":8007,"date":"2026-09-23T09:00:00","date_gmt":"2026-09-23T09:00:00","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=8007"},"modified":"2026-09-25T15:33:52","modified_gmt":"2026-09-25T15:33:52","slug":"sozdanie-adaptivnogo-sajta","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/sozdanie-adaptivnogo-sajta\/","title":{"rendered":"\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0430\u0439\u0442: viewport, \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b, Flexbox, Grid \u0438 srcset"},"content":{"rendered":"

\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0430\u0439\u0442<\/strong> — \u044d\u0442\u043e \u0441\u0430\u0439\u0442, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u0434\u043d\u0430 \u0438 \u0442\u0430 \u0436\u0435 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0443 \u043f\u043e\u0434 \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430: \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u0431\u043b\u043e\u043a\u0438 \u0438\u0434\u0443\u0442 \u0432 \u043e\u0434\u043d\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0443, \u043d\u0430 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0435 \u0432 \u0434\u0432\u0435, \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0432 \u0442\u0440\u0438-\u0447\u0435\u0442\u044b\u0440\u0435, \u0438 \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 HTML \u0438 CSS, \u0431\u0435\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u041d\u0438\u0436\u0435 — \u043f\u043e\u043b\u043d\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0437\u0431\u043e\u0440 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u0438\u0435\u043c\u0430, \u0442\u0438\u043f\u043e\u0432\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438.<\/p>\n

\n

\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/strong><\/p>\n

    \n
  1. \u041c\u0438\u043d\u0438-\u0441\u043b\u043e\u0432\u0430\u0440\u044c: \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0442\u0435\u0440\u043c\u0438\u043d\u044b<\/a><\/li>\n
  2. \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><\/li>\n
  3. \u0420\u0430\u0437\u0431\u043e\u0440 \u043f\u043e \u043f\u0440\u0438\u0435\u043c\u0430\u043c<\/a><\/li>\n
  4. \u0422\u0438\u043f\u043e\u0432\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430: \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430<\/a><\/li>\n
  5. \u041a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/a><\/li>\n
  6. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/a><\/li>\n
  7. \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u0434\u0430<\/a><\/li>\n
  8. \u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/li>\n
  9. \u0413\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \/ \u0441\u0432\u044f\u0437\u044c \u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439<\/a><\/li>\n
  10. FAQ<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u044b \u0432 Google Chrome 153 (\u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044c 2026) \u0441 \u044d\u043c\u0443\u043b\u044f\u0446\u0438\u0435\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 375 px, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0430 768 px \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 1280 px. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u043d\u0438\u0436\u0435, \u0432\u0437\u044f\u0442\u044b \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u043e\u043d\u0430.<\/p>\n

    \u041c\u0438\u043d\u0438-\u0441\u043b\u043e\u0432\u0430\u0440\u044c: \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0442\u0435\u0440\u043c\u0438\u043d\u044b<\/h2>\n\n\n\n\n\n\n\n\n\n
    \u0422\u0435\u0440\u043c\u0438\u043d<\/th>\n\u0427\u0442\u043e \u044d\u0442\u043e<\/th>\n\u0413\u0434\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f<\/th>\n<\/tr>\n<\/thead>\n
    Viewport<\/td>\n\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043e\u043a\u043d\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0432 CSS-\u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/td>\n<meta name=\"viewport\"><\/code><\/td>\n<\/tr>\n
    CSS-\u043f\u0438\u043a\u0441\u0435\u043b\u044c<\/td>\n\u0415\u0434\u0438\u043d\u0438\u0446\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0438; \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441 \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c\u044e 3x \u043e\u0434\u0438\u043d CSS-\u043f\u0438\u043a\u0441\u0435\u043b\u044c = 3×3 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0442\u043e\u0447\u043a\u0438<\/td>\npx<\/code>, devicePixelRatio<\/code><\/td>\n<\/tr>\n
    \u041c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441<\/td>\n\u0423\u0441\u043b\u043e\u0432\u0438\u0435 \u0432 CSS: \u00ab\u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 >= N\u00bb<\/td>\n@media<\/code><\/td>\n<\/tr>\n
    \u0411\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442<\/td>\n\u0428\u0438\u0440\u0438\u043d\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f<\/td>\n\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u0435<\/td>\n<\/tr>\n
    \u0420\u0435\u0437\u0438\u043d\u043e\u0432\u0430\u044f \u0441\u0435\u0442\u043a\u0430<\/td>\n\u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0432 \u0434\u043e\u043b\u044f\u0445 (%<\/code>, fr<\/code>) \u0438 \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435\u043c max-width<\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u0436\u0435\u0441\u0442\u043a\u0438\u0445 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439<\/td>\nFlexbox, Grid<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u0422\u0435\u0440\u043c\u0438\u043d\u044b \u00ab\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439\u00bb \u0438 \u00ab\u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439\u00bb (responsive) \u0432 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043a\u0430\u043a \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u044b. \u0412 \u0441\u0442\u0440\u043e\u0433\u043e\u043c \u0441\u043c\u044b\u0441\u043b\u0435 adaptive design — \u044d\u0442\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u043d\u043d\u044b\u0445 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432, \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f, \u0430 responsive — \u043f\u043b\u0430\u0432\u043d\u0430\u044f \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u044f\u043d\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u0430\u043c\u0438. \u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0438\u0436\u0435 — \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u0435\u0433\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u043e\u0439.<\/p>\n

    \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h2>\n

    \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b index.html<\/code> \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0417\u0430\u0442\u0435\u043c \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0440\u0435\u0436\u0438\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 DevTools (F12, \u0437\u043d\u0430\u0447\u043e\u043a \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430) \u0438 \u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0448\u0438\u0440\u0438\u043d\u0443.<\/p>\n

    <!DOCTYPE html><\/span>\n<<\/span>html<\/span> lang<\/span>=<\/span>\"ru\"<\/span>><\/span>\n<<\/span>head<\/span>><\/span>\n  <<\/span>meta<\/span> charset<\/span>=<\/span>\"utf-8\"<\/span>><\/span>\n  <<\/span>meta<\/span> name<\/span>=<\/span>\"viewport\"<\/span> content<\/span>=<\/span>\"width=device-width, initial-scale=1\"<\/span>><\/span>\n  <<\/span>title<\/span>><\/span>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/<\/span>title<\/span>><\/span>\n  <<\/span>style<\/span>><\/span>\n    <\/span>*,<\/span> <\/span>*<\/span>::<\/span>before<\/span>,<\/span> <\/span>*<\/span>::<\/span>after<\/span> { <\/span>box-sizing<\/span>: <\/span>border-box<\/span>; }<\/span>\n    <\/span>body<\/span> { <\/span>margin<\/span>: <\/span>0<\/span>; <\/span>font-family<\/span>: <\/span>system-ui<\/span>, <\/span>sans-serif<\/span>; <\/span>line-height<\/span>: <\/span>1.5<\/span>; }<\/span>\n    <\/span>img<\/span> { <\/span>max-width<\/span>: <\/span>100<\/span>%<\/span>; <\/span>height<\/span>: <\/span>auto<\/span>; <\/span>display<\/span>: <\/span>block<\/span>; }<\/span>\n\n    .<\/span>container<\/span> { <\/span>width<\/span>: <\/span>100<\/span>%<\/span>; <\/span>max-width<\/span>: <\/span>1100<\/span>px<\/span>; <\/span>margin<\/span>: <\/span>0<\/span> <\/span>auto<\/span>; <\/span>padding<\/span>: <\/span>0<\/span> <\/span>16<\/span>px<\/span>; }<\/span>\n\n    .<\/span>header<\/span> { <\/span>display<\/span>: <\/span>flex<\/span>; <\/span>flex-wrap<\/span>: <\/span>wrap<\/span>; <\/span>align-items<\/span>: <\/span>center<\/span>;<\/span>\n              <\/span>justify-content<\/span>: <\/span>space-between<\/span>; <\/span>gap<\/span>: <\/span>12<\/span>px<\/span>; <\/span>padding<\/span>: <\/span>12<\/span>px<\/span> <\/span>0<\/span>; }<\/span>\n    .<\/span>nav<\/span> { <\/span>display<\/span>: <\/span>flex<\/span>; <\/span>flex-direction<\/span>: <\/span>column<\/span>; <\/span>gap<\/span>: <\/span>8<\/span>px<\/span>; <\/span>width<\/span>: <\/span>100<\/span>%<\/span>; }<\/span>\n\n    .<\/span>cards<\/span> { <\/span>display<\/span>: <\/span>grid<\/span>; <\/span>gap<\/span>: <\/span>16<\/span>px<\/span>;<\/span>\n             <\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>auto<\/span>-fit<\/span>, <\/span>minmax<\/span>(<\/span>240<\/span>px<\/span>, <\/span>1<\/span>fr<\/span>)); }<\/span>\n    .<\/span>card<\/span> { <\/span>border<\/span>: <\/span>1<\/span>px<\/span> <\/span>solid<\/span> <\/span>#ddd<\/span>; <\/span>border-radius<\/span>: <\/span>8<\/span>px<\/span>; <\/span>padding<\/span>: <\/span>16<\/span>px<\/span>; }<\/span>\n\n    <\/span>h1<\/span> { <\/span>font-size<\/span>: <\/span>clamp<\/span>(<\/span>1.5<\/span>rem<\/span>, <\/span>1<\/span>rem<\/span> <\/span>+<\/span> <\/span>2.5<\/span>vw<\/span>, <\/span>2.5<\/span>rem<\/span>); }<\/span>\n\n    @<\/span>media<\/span> <\/span>(<\/span>min-width<\/span>:<\/span> <\/span>768px<\/span>)<\/span> {<\/span>\n      .<\/span>nav<\/span> { <\/span>flex-direction<\/span>: <\/span>row<\/span>; <\/span>width<\/span>: <\/span>auto<\/span>; }<\/span>\n    }<\/span>\n  <\/<\/span>style<\/span>><\/span>\n<\/<\/span>head<\/span>><\/span>\n<<\/span>body<\/span>><\/span>\n  <<\/span>div<\/span> class<\/span>=<\/span>\"container\"<\/span>><\/span>\n    <<\/span>header<\/span> class<\/span>=<\/span>\"header\"<\/span>><\/span>\n      <<\/span>a<\/span> href<\/span>=<\/span>\"\/\"<\/span> class<\/span>=<\/span>\"logo\"<\/span>><\/span>\u041b\u043e\u0433\u043e\u0442\u0438\u043f<\/<\/span>a<\/span>><\/span>\n      <<\/span>nav<\/span> class<\/span>=<\/span>\"nav\"<\/span>><\/span>\n        <<\/span>a<\/span> href<\/span>=<\/span>\"#\"<\/span>><\/span>\u041a\u0443\u0440\u0441\u044b<\/<\/span>a<\/span>><<\/span>a<\/span> href<\/span>=<\/span>\"#\"<\/span>><\/span>\u0411\u043b\u043e\u0433<\/<\/span>a<\/span>><<\/span>a<\/span> href<\/span>=<\/span>\"#\"<\/span>><\/span>\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b<\/<\/span>a<\/span>><\/span>\n      <\/<\/span>nav<\/span>><\/span>\n    <\/<\/span>header<\/span>><\/span>\n    <<\/span>h1<\/span>><\/span>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/<\/span>h1<\/span>><\/span>\n    <<\/span>section<\/span> class<\/span>=<\/span>\"cards\"<\/span>><\/span>\n      <<\/span>article<\/span> class<\/span>=<\/span>\"card\"<\/span>><\/span>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 1<\/<\/span>article<\/span>><\/span>\n      <<\/span>article<\/span> class<\/span>=<\/span>\"card\"<\/span>><\/span>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 2<\/<\/span>article<\/span>><\/span>\n      <<\/span>article<\/span> class<\/span>=<\/span>\"card\"<\/span>><\/span>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 3<\/<\/span>article<\/span>><\/span>\n      <<\/span>article<\/span> class<\/span>=<\/span>\"card\"<\/span>><\/span>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 4<\/<\/span>article<\/span>><\/span>\n    <\/<\/span>section<\/span>><\/span>\n  <\/<\/span>div<\/span>><\/span>\n<\/<\/span>body<\/span>><\/span>\n<\/<\/span>html<\/span>><\/span><\/code><\/pre>\n
    \u0427\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043d\u0430 \u0442\u0440\u0435\u0445 \u0448\u0438\u0440\u0438\u043d\u0430\u0445 (\u0437\u0430\u043c\u0435\u0440 \u0432 Chrome 153):<\/p>\n
    \u0448\u0438\u0440\u0438\u043d\u0430  \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a  \u043c\u0435\u043d\u044e        \u0440\u0430\u0437\u043c\u0435\u0440 h1  \u0448\u0438\u0440\u0438\u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\n375     1                 \u0441\u0442\u043e\u043b\u0431\u0438\u043a\u043e\u043c   25.375px   375 (\u0431\u0435\u0437 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438)\n768     2                 \u0432 \u0441\u0442\u0440\u043e\u043a\u0443    35.2px     768\n1280    4                 \u0432 \u0441\u0442\u0440\u043e\u043a\u0443    40px       1280\n<\/code><\/pre>\n
    \u041c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d — \u043e\u043d \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043c\u0435\u043d\u044e. \u0427\u0438\u0441\u043b\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0431\u0435\u0437 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432: \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 Grid.<\/p>\n
    \u0420\u0430\u0437\u0431\u043e\u0440 \u043f\u043e \u043f\u0440\u0438\u0435\u043c\u0430\u043c<\/h2>\n
    1. Meta viewport<\/h3>\n
    \u0421\u0442\u0440\u043e\u043a\u0430 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><\/code> \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443: \u00ab\u0440\u0430\u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 CSS-\u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445\u00bb. \u0411\u0435\u0437 \u043d\u0435\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0447\u0438\u0442\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434 \u043d\u0438\u043c \u0441\u0430\u0439\u0442 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430, \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u043d\u0430 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u043e\u043a\u043e\u043b\u043e 980 px \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0446\u0435\u043b\u0438\u043a\u043e\u043c.<\/p>\n
    \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430: \u0442\u0430 \u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0435\u0437 meta viewport \u043d\u0430 \u044d\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 375 px \u0434\u0430\u043b\u0430 \u0448\u0438\u0440\u0438\u043d\u0443 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0438 981 px, \u043c\u0430\u0441\u0448\u0442\u0430\u0431 0.38, \u0442\u0440\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0438 \u043c\u0435\u043d\u044e \u0432 \u0441\u0442\u0440\u043e\u043a\u0443. \u041c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0447\u0435\u0441\u0442\u043d\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 — \u043d\u043e \u0434\u043b\u044f \u0448\u0438\u0440\u0438\u043d\u044b 980, \u0430 \u043d\u0435 375. \u0422\u0435\u043a\u0441\u0442 \u0441\u0442\u0430\u043b \u043c\u0435\u043b\u043a\u0438\u043c, \u043a\u0430\u043a \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430.<\/p>\n
    \u041d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 user-scalable=no<\/code> \u0438 maximum-scale=1<\/code>: \u043e\u043d\u0438 \u043c\u0435\u0448\u0430\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u044d\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438.<\/p>\n
    2. \u0420\u0435\u0437\u0438\u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u043c\u0435\u0441\u0442\u043e \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b<\/h3>\n
    .container<\/code> \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 100% \u0448\u0438\u0440\u0438\u043d\u044b, \u043d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 1100 px, \u0438 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f margin: 0 auto<\/code>. \u041e\u0442\u0441\u0442\u0443\u043f padding: 0 16px<\/code> \u043d\u0435 \u0434\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0443 \u043f\u0440\u0438\u043b\u0438\u043f\u043d\u0443\u0442\u044c \u043a \u043a\u0440\u0430\u044e \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430. box-sizing: border-box<\/code> \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 padding \u0432 \u0448\u0438\u0440\u0438\u043d\u0443, \u0438\u043d\u0430\u0447\u0435 width: 100%<\/code> \u043f\u043b\u044e\u0441 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432\u044b\u043b\u0435\u0437\u0443\u0442 \u0437\u0430 \u044d\u043a\u0440\u0430\u043d.<\/p>\n
    3. Flexbox \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u043a, Grid \u0434\u043b\u044f \u0441\u0435\u0442\u043e\u043a<\/h3>\n
    \u0428\u0430\u043f\u043a\u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u043d\u0430 Flexbox: justify-content: space-between<\/code> \u0440\u0430\u0437\u043d\u043e\u0441\u0438\u0442 \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0438 \u043c\u0435\u043d\u044e \u043f\u043e \u043a\u0440\u0430\u044f\u043c, flex-wrap: wrap<\/code> \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442 \u043c\u0435\u043d\u044e \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u0435\u0441\u043b\u0438 \u043c\u0435\u0441\u0442\u0430 \u043c\u0430\u043b\u043e. \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 — \u043d\u0430 Grid: repeat(auto-fit, minmax(240px, 1fr))<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u00ab\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043b\u0435\u0437\u0435\u0442 \u043f\u0440\u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 240 px, \u043e\u0441\u0442\u0430\u0442\u043e\u043a \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u0440\u043e\u0432\u043d\u0443\u00bb.<\/p>\n\n\n\n\n\n\n\n\n
    \u0417\u0430\u0434\u0430\u0447\u0430<\/th>\n\u0427\u0442\u043e \u0432\u0437\u044f\u0442\u044c<\/th>\n\u041f\u043e\u0447\u0435\u043c\u0443<\/th>\n<\/tr>\n<\/thead>\n
    \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u043e\u0434\u043d\u0443 \u043b\u0438\u043d\u0438\u044e \u0441 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u043c (\u0448\u0430\u043f\u043a\u0430, \u043a\u043d\u043e\u043f\u043a\u0438, \u0442\u0435\u0433\u0438)<\/td>\nFlexbox<\/td>\n\u0420\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0430 \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u043e\u0441\u0438, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e<\/td>\n<\/tr>\n
    \u0421\u0435\u0442\u043a\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a, \u0433\u0430\u043b\u0435\u0440\u0435\u044f<\/td>\nGrid \u0441 auto-fit<\/code> + minmax<\/code><\/td>\n\u041a\u043e\u043b\u043e\u043d\u043a\u0438 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0431\u0435\u0437 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/td>\n<\/tr>\n
    \u041c\u0430\u043a\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b: \u0448\u0430\u043f\u043a\u0430, \u0441\u0430\u0439\u0434\u0431\u0430\u0440, \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043f\u043e\u0434\u0432\u0430\u043b<\/td>\nGrid \u0441 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u043c\u0438 (grid-template-areas<\/code>)<\/td>\n\u0414\u0432\u0435 \u043e\u0441\u0438 \u0441\u0440\u0430\u0437\u0443, \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0431\u043b\u043e\u043a\u043e\u0432 \u0432 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u0435<\/td>\n<\/tr>\n
    \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u0441\u0432\u043e\u0435\u0433\u043e \u0431\u043b\u043e\u043a\u0430, \u0430 \u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430<\/td>\nContainer queries (@container<\/code>)<\/td>\n\u041e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0432 \u0443\u0437\u043a\u043e\u0439 \u0438 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    4. \u041c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u044b<\/h3>\n
    \/* \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e - \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0443\u0437\u043a\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 *\/<\/span>\n.<\/span>nav<\/span> { <\/span>flex-direction<\/span>: <\/span>column<\/span>; }<\/span>\n\n\/* \u043e\u0442 768px \u0438 \u0448\u0438\u0440\u0435 *\/<\/span>\n@<\/span>media<\/span> <\/span>(<\/span>min-width<\/span>:<\/span> <\/span>768px<\/span>)<\/span> {<\/span>\n  .<\/span>nav<\/span> { <\/span>flex-direction<\/span>: <\/span>row<\/span>; }<\/span>\n}<\/span><\/code><\/pre>\n
    \u0411\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 \u043f\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443, \u0430 \u043d\u0435 \u043f\u043e \u0441\u043f\u0438\u0441\u043a\u0443 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043e\u0432: \u0441\u0443\u0436\u0430\u0439\u0442\u0435 \u043e\u043a\u043d\u043e \u0438 \u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442 \u0442\u0430\u043c, \u0433\u0434\u0435 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043b\u043e\u043c\u0430\u0442\u044c\u0441\u044f. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0438\u0436\u0435 — \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440, \u0430 \u043d\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442.<\/p>\n\n\n\n\n\n\n\n
    \u0414\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0448\u0438\u0440\u0438\u043d\u044b<\/th>\n\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430<\/th>\n<\/tr>\n<\/thead>\n
    \u0434\u043e 767 px<\/td>\n\u0442\u0435\u043b\u0435\u0444\u043e\u043d\u044b<\/td>\n<\/tr>\n
    768-1023 px<\/td>\n\u043f\u043b\u0430\u043d\u0448\u0435\u0442\u044b, \u0443\u0437\u043a\u0438\u0435 \u043e\u043a\u043d\u0430<\/td>\n<\/tr>\n
    \u043e\u0442 1024 px<\/td>\n\u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0438 \u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u044b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u041a\u0440\u043e\u043c\u0435 min-width<\/code> \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u043e\u043c: @media (width >= 768px)<\/code>. \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b, \u043d\u0430\u0434\u0435\u0436\u043d\u0435\u0435 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0444\u043e\u0440\u043c\u0430.<\/p>\n
    5. \u0413\u0438\u0431\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442\u0430<\/h3>\n
    font-size: clamp(1.5rem, 1rem + 2.5vw, 2.5rem)<\/code> \u0437\u0430\u0434\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u0442\u0435\u0442 \u0441 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u044d\u043a\u0440\u0430\u043d\u0430, \u043d\u043e \u043d\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 1.5rem \u0438 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 2.5rem. \u0412 \u043f\u0440\u043e\u0433\u043e\u043d\u0435 \u044d\u0442\u043e 25.375px \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u0438 40px \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u0435\u043a\u0441\u0442 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0432 rem<\/code>, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n
    6. \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: srcset \u0438 sizes<\/h3>\n
    max-width: 100%; height: auto<\/code> \u043d\u0435 \u0434\u0430\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0432\u044b\u043b\u0435\u0437\u0442\u0438 \u0437\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u041d\u043e \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0443 \u043d\u0435\u0437\u0430\u0447\u0435\u043c \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0448\u0438\u0440\u0438\u043d\u043e\u0439 1600 px — \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c srcset<\/code>:<\/p>\n
    <<\/span>img<\/span>\n  src<\/span>=<\/span>\"photo-800.png\"<\/span>\n  srcset<\/span>=<\/span>\"photo-480.png 480w, photo-800.png 800w, photo-1200.png 1200w, photo-1600.png 1600w\"<\/span>\n  sizes<\/span>=<\/span>\"(min-width: 1100px) 1068px, calc(100vw - 32px)\"<\/span>\n  width<\/span>=<\/span>\"1600\"<\/span> height<\/span>=<\/span>\"900\"<\/span>\n  alt<\/span>=<\/span>\"\u0421\u0445\u0435\u043c\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0438\"<\/span>\n  loading<\/span>=<\/span>\"lazy\"<\/span>><\/span><\/code><\/pre>\n
    srcset<\/code> \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u0438 \u0438\u0445 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 (w<\/code>), sizes<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443, \u043a\u0430\u043a\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0430\u043c \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0444\u0430\u0439\u043b \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430. \u0412 \u043f\u0440\u043e\u0433\u043e\u043d\u0435 Chrome 153: \u0442\u0435\u043b\u0435\u0444\u043e\u043d 375 px \u0441 \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c\u044e 3x \u0432\u0437\u044f\u043b photo-1200.png<\/code> (\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 343 CSS px = \u043e\u043a\u043e\u043b\u043e 1029 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0442\u043e\u0447\u0435\u043a), \u0434\u0435\u0441\u043a\u0442\u043e\u043f 1280 px \u0441 \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c\u044e 1x — \u0442\u043e\u0436\u0435 photo-1200.png<\/code> (1068 px). \u0412\u044b\u0431\u043e\u0440 — \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442 \u0435\u043c\u0443 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0435\u0448 \u0438 \u0441\u0435\u0442\u044c, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0444\u0430\u0439\u043b \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f.<\/p>\n
    \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b width<\/code> \u0438 height<\/code> \u0437\u0430\u0434\u0430\u044e\u0442 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044e, \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u0443\u0435\u0442 \u043c\u0435\u0441\u0442\u043e \u0434\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 — \u0442\u0435\u043a\u0441\u0442 \u043d\u0435 \u043f\u0440\u044b\u0433\u0430\u0435\u0442. loading=\"lazy\"<\/code> \u043d\u0435 \u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430: \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0441\u0440\u0430\u0437\u0443. \u0415\u0441\u043b\u0438 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u043d\u0443\u0436\u043d\u0430 \u0434\u0440\u0443\u0433\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044e (\u043a\u0430\u0434\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f), \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 <picture><\/code> \u0441 <source media=\"...\"><\/code>.<\/p>\n
    \u0422\u0438\u043f\u043e\u0432\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430: \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430<\/h2>\n
    \u041d\u0435\u0432\u0435\u0440\u043d\u043e — \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u0436\u0435\u0441\u0442\u043a\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439, \u043a\u0430\u043a \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u043f\u043e\u0434 \u0434\u0435\u0441\u043a\u0442\u043e\u043f:<\/p>\n
    .<\/span>container<\/span> { <\/span>width<\/span>: <\/span>960<\/span>px<\/span>; <\/span>margin<\/span>: <\/span>0<\/span> <\/span>auto<\/span>; <\/span>padding<\/span>: <\/span>0<\/span> <\/span>16<\/span>px<\/span>; }<\/span><\/code><\/pre>\n
    \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 375 px (\u0437\u0430\u043c\u0435\u0440 \u0432 Chrome 153): \u0448\u0438\u0440\u0438\u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 960 px \u043f\u0440\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 375 px — \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430, \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0432 \u0442\u0440\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438. \u041d\u0430 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0435 768 px — \u0442\u0430 \u0436\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430.<\/p>\n
    \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 — \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0432\u0435\u0440\u0445\u0443, \u0430 \u043d\u0435 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c:<\/p>\n
    .<\/span>container<\/span> { <\/span>width<\/span>: <\/span>100<\/span>%<\/span>; <\/span>max-width<\/span>: <\/span>1100<\/span>px<\/span>; <\/span>margin<\/span>: <\/span>0<\/span> <\/span>auto<\/span>; <\/span>padding<\/span>: <\/span>0<\/span> <\/span>16<\/span>px<\/span>; }<\/span><\/code><\/pre>\n
    \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043c\u0435\u043d\u044b \u0448\u0438\u0440\u0438\u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u043d\u0430 \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0445 \u0448\u0438\u0440\u0438\u043d\u0430\u0445.<\/p>\n
    \u041a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h2>\n
      \n
    1. DevTools \u0432 Chrome, Firefox \u0438\u043b\u0438 Safari: \u0440\u0435\u0436\u0438\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u0448\u0438\u0440\u0438\u043d\u044b 320, 375, 768, 1024, 1280 \u0438 \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u0441\u0443\u0436\u0435\u043d\u0438\u0435 \u043e\u043a\u043d\u0430.<\/li>\n
    2. \u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d: \u044d\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u043d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442 \u0432\u0441\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 (\u043f\u0430\u043d\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u044f\u0447\u0443\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435, \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430, \u043a\u0430\u0441\u0430\u043d\u0438\u044f).<\/li>\n
    3. Lighthouse \u0432 DevTools: \u043e\u043d \u043e\u0442\u043c\u0435\u0442\u0438\u0442 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 viewport, \u043c\u0435\u043b\u043a\u0438\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u0438 \u0441\u0434\u0432\u0438\u0433\u0438 \u043c\u0430\u043a\u0435\u0442\u0430.<\/li>\n
    4. \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b: \u043d\u0435\u0442 \u043b\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u0442\u0435\u043a\u0441\u0442 \u0431\u0435\u0437 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f, \u043d\u0430\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u043b\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043f\u0430\u043b\u044c\u0446\u0435\u043c.<\/li>\n<\/ol>\n
      \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/h2>\n\n\n\n\n\n\n\n\n\n
      \u0421\u0438\u043c\u043f\u0442\u043e\u043c<\/th>\n\u0412\u0435\u0440\u043e\u044f\u0442\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430<\/th>\n\u0427\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c<\/th>\n<\/tr>\n<\/thead>\n
      \u041d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u0441\u0430\u0439\u0442 \u043c\u0435\u043b\u043a\u0438\u0439, \u043a\u0430\u043a \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442<\/td>\n\u041d\u0435\u0442 meta viewport<\/td>\n\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432 <head><\/code><\/td>\n<\/tr>\n
      \u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430<\/td>\n\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0432 px, \u0434\u043b\u0438\u043d\u043d\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u0438\u043b\u0438 URL, \u0442\u0430\u0431\u043b\u0438\u0446\u0430<\/td>\n\u041d\u0430\u0439\u0442\u0438 \u0432 DevTools \u0441\u0430\u043c\u044b\u0439 \u0448\u0438\u0440\u043e\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442; max-width: 100%<\/code>, overflow-wrap: anywhere<\/code>, \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u0431\u043b\u043e\u043a \u0441 overflow-x: auto<\/code><\/td>\n<\/tr>\n
      \u041c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442<\/td>\n\u041e\u043f\u0435\u0447\u0430\u0442\u043a\u0430, \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043d\u0438\u0436\u0435 \u043f\u043e \u043a\u043e\u0434\u0443 \u043f\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u0435\u0442, \u0432\u044b\u0448\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c<\/td>\n\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Styles, \u043a\u0430\u043a\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0437\u0430\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u043e<\/td>\n<\/tr>\n
      \u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u0442\u0430 \u0438\u043b\u0438 \u0441\u043f\u043b\u044e\u0449\u0435\u043d\u0430<\/td>\n\u0417\u0430\u0434\u0430\u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430<\/td>\nheight: auto<\/code> \u0438\u043b\u0438 aspect-ratio<\/code> + object-fit: cover<\/code><\/td>\n<\/tr>\n
      \u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u044b\u0433\u0430\u0435\u0442 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435<\/td>\n\u0423 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0435\u0442 width<\/code> \u0438 height<\/code><\/td>\n\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044f\u043c\u0438<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u0434\u0430<\/h2>\n
      \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0431\u0435\u0437 \u0440\u0443\u0447\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430\u0445 \u0441\u0430\u0439\u0442\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 Tilda: \u0442\u0430\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u0443\u0436\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0443 \u043f\u0440\u0430\u0432\u044f\u0442 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435. Adobe Muse \u0438\u0437 \u043f\u0440\u0435\u0436\u043d\u0438\u0445 \u043f\u043e\u0434\u0431\u043e\u0440\u043e\u043a \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f — Adobe \u043f\u0440\u0435\u043a\u0440\u0430\u0442\u0438\u043b\u0430 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0432 2020 \u0433\u043e\u0434\u0443. \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0442\u0438\u043f\u043e\u0432\u043e\u043c \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0435, \u043d\u043e \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0430, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043e\u0434\u0430 \u0442\u0430\u043c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b. \u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 viewport, Flexbox, Grid \u0438 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u0438 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 — \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u043b\u043e\u043a \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435.<\/p>\n
      \u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n