{"id":9348,"date":"2026-09-23T09:00:00","date_gmt":"2026-09-23T09:00:00","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=9348"},"modified":"2026-09-25T15:33:46","modified_gmt":"2026-09-25T15:33:46","slug":"mobile-first-opisanie-i-osobennosti-realizacii","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/mobile-first-opisanie-i-osobennosti-realizacii\/","title":{"rendered":"Mobile-first: \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438 \u043a\u0430\u043a \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u043e\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430"},"content":{"rendered":"

Mobile-first<\/strong> — \u044d\u0442\u043e \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0435\u0440\u0441\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u0443\u0437\u043a\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0443 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0448\u0438\u0440\u0435. \u0412 CSS \u044d\u0442\u043e \u0432\u044b\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e: \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0434\u043b\u044f \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u0430 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0441 min-width<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0443 \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0443.<\/p>\n

\n

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

    \n
  1. \u0422\u0440\u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0443\u0442\u0430\u044e\u0442<\/a><\/li>\n
  2. \u041f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u043f\u043e\u0434\u0445\u043e\u0434\u0430<\/a><\/li>\n
  3. \u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430<\/a><\/li>\n
  4. Mobile-first \u0438 desktop-first: \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435, \u043d\u043e \u0440\u0430\u0437\u043d\u043e\u0439 \u0446\u0435\u043d\u043e\u0439<\/a><\/li>\n
  5. \u041e\u0448\u0438\u0431\u043a\u0430 1: \u0437\u0430\u0431\u044b\u043b\u0438 \u043c\u0435\u0442\u0430-\u0442\u0435\u0433 viewport<\/a><\/li>\n
  6. \u041e\u0448\u0438\u0431\u043a\u0430 2: \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b min-width \u043d\u0435 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443<\/a><\/li>\n
  7. \u0427\u0442\u043e \u0435\u0449\u0435 \u0432\u0445\u043e\u0434\u0438\u0442 \u0432 mobile-first, \u043a\u0440\u043e\u043c\u0435 CSS<\/a><\/li>\n
  8. \u041a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/a><\/li>\n
  9. \u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/li>\n
  10. \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
  11. FAQ<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u041d\u0438\u0436\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c, \u0447\u0435\u043c mobile-first \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0438 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u0434\u0432\u0435 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0433\u043e\u043d\u0435 \u0438 \u0447\u0435\u043a-\u043b\u0438\u0441\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438.<\/p>\n

    \u0422\u0440\u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0443\u0442\u0430\u044e\u0442<\/h2>\n

    Mobile-first \u0447\u0430\u0441\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u00ab\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u043e\u0439\u00bb, \u043d\u043e \u044d\u0442\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u0443\u0440\u043e\u0432\u043d\u0438. \u041e\u0434\u0438\u043d \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u00ab\u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u043c\u0430\u043a\u0435\u0442\u00bb, \u0434\u0440\u0443\u0433\u043e\u0439 — \u00ab\u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u044e\u0442\u00bb.<\/p>\n\n\n\n\n\n\n\n\n
    \u0422\u0435\u0440\u043c\u0438\u043d<\/th>\n\u0427\u0442\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442<\/th>\n\u041a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u043a\u043e\u0434\u0435<\/th>\n<\/tr>\n<\/thead>\n
    \u041e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d (responsive)<\/td>\n\u041e\u0434\u0438\u043d \u0433\u0438\u0431\u043a\u0438\u0439 \u043c\u0430\u043a\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u044f\u043d\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u043b\u044e\u0431\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443<\/td>\n\u0420\u0435\u0437\u0438\u043d\u043e\u0432\u0430\u044f \u0441\u0435\u0442\u043a\u0430, %<\/code>\/fr<\/code>, \u0433\u0438\u0431\u043a\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/td>\n<\/tr>\n
    \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d (adaptive)<\/td>\n\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u043f\u043e\u0434 \u0442\u0438\u043f\u043e\u0432\u044b\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0438\u043b\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430<\/td>\n\u0424\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0438 \u043d\u0430 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u0430\u0445, \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u044b\u0431\u043e\u0440 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/td>\n<\/tr>\n
    Mobile-first<\/td>\n\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f: \u043e\u0442 \u0443\u0437\u043a\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043a \u0448\u0438\u0440\u043e\u043a\u043e\u043c\u0443<\/td>\n\u0411\u0430\u0437\u0430 \u0431\u0435\u0437 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 + @media (min-width: ...)<\/code><\/td>\n<\/tr>\n
    Desktop-first<\/td>\n\u041e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a: \u043e\u0442 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 \u043a \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0443<\/td>\n\u0411\u0430\u0437\u0430 \u0434\u043b\u044f \u0448\u0438\u0440\u043e\u043a\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 + @media (max-width: ...)<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u041e\u0442\u0441\u044e\u0434\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0435: \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u0441\u0430\u0439\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u043d \u0438 \u043a\u0430\u043a mobile-first, \u0438 \u043a\u0430\u043a desktop-first. Mobile-first — \u044d\u0442\u043e \u043d\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434 \u043c\u0430\u043a\u0435\u0442\u0430, \u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u0430\u043a\u0435\u0442 \u043d\u0430\u0440\u0430\u0449\u0438\u0432\u0430\u044e\u0442.<\/p>\n

    \u0415\u0449\u0435 \u043e\u0434\u043d\u0430 \u0447\u0430\u0441\u0442\u0430\u044f \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0430 — mobile-first indexing<\/strong> \u0432 Google. \u042d\u0442\u043e \u043d\u0435 \u043c\u0435\u0442\u043e\u0434 \u0432\u0435\u0440\u0441\u0442\u043a\u0438, \u0430 \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0439 \u0440\u043e\u0431\u043e\u0442 \u0434\u043b\u044f \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0421\u0432\u044f\u0437\u044c \u043f\u0440\u044f\u043c\u0430\u044f: \u0435\u0441\u043b\u0438 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0443\u0440\u0435\u0437\u0430\u043d, \u0432 \u0438\u043d\u0434\u0435\u043a\u0441 \u043f\u043e\u043f\u0430\u0434\u0435\u0442 \u0443\u0440\u0435\u0437\u0430\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u041d\u043e \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043f\u043e\u0434\u0445\u043e\u0434 mobile-first \u043d\u0435 \u0434\u0430\u0435\u0442 \u0431\u043e\u043d\u0443\u0441\u0430 \u043a \u043f\u043e\u0437\u0438\u0446\u0438\u044f\u043c.<\/p>\n

    \u041f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u043f\u043e\u0434\u0445\u043e\u0434\u0430<\/h2>\n

    \u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e mobile-first \u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u043d\u0430 \u0442\u0440\u0435\u0445 \u0438\u0434\u0435\u044f\u0445. \u0423\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u0431\u0438\u0437\u043d\u0435\u0441\u0430, \u0430 \u043d\u0435 \u043a\u0430\u043a \u0436\u0435\u0441\u0442\u043a\u0438\u0439 \u0440\u0435\u0433\u043b\u0430\u043c\u0435\u043d\u0442.<\/p>\n

      \n
    1. \u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/strong> \u041d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 360-400 CSS-\u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u043b\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0448\u0430\u044e\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0443\u0436\u043d\u043e \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c: \u0446\u0435\u043d\u0430, \u043a\u043d\u043e\u043f\u043a\u0430 \u0437\u0430\u043f\u0438\u0441\u0438, \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u044b. \u0412\u0441\u0435 \u0432\u0442\u043e\u0440\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u0435 \u0443\u0445\u043e\u0434\u0438\u0442 \u043d\u0438\u0436\u0435 \u0438\u043b\u0438 \u0432 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0431\u043b\u043e\u043a\u0438, \u043d\u043e \u043d\u0435 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f.<\/li>\n
    2. \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435.<\/strong> \u0411\u0430\u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435, \u0430 \u0431\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u044b \u0438 \u0442\u043e\u0447\u043d\u044b\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 (\u043c\u044b\u0448\u044c) \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438: \u0432\u0442\u043e\u0440\u0443\u044e \u043a\u043e\u043b\u043e\u043d\u043a\u0443, \u0431\u043e\u043a\u043e\u0432\u043e\u0435 \u043c\u0435\u043d\u044e, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438.<\/li>\n
    3. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f.<\/strong> \u0421\u0435\u043d\u0441\u043e\u0440\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u044d\u043a\u0440\u0430\u043d \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443, \u0430 \u043d\u0435 \u00ab\u043f\u043e\u0442\u043e\u043c \u0434\u043e\u043f\u0438\u043b\u0438\u043c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e\u00bb.<\/li>\n<\/ol>\n

      \u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430<\/h2>\n

      \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043b\u043d\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u043f\u043e\u0442\u043e\u043c \u0440\u0430\u0437\u0431\u043e\u0440. \u042d\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u043c\u0435\u043d\u044e \u0438 \u0442\u0440\u0435\u043c\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438. \u041d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\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 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043a\u043e\u0432\u043e\u0435 \u043c\u0435\u043d\u044e \u0438 \u0442\u0440\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438.<\/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>Mobile-first: \u043a\u0430\u0442\u0430\u043b\u043e\u0433<\/<\/span>title<\/span>><\/span>\n  <<\/span>link<\/span> rel<\/span>=<\/span>\"stylesheet\"<\/span> href<\/span>=<\/span>\"style.css\"<\/span>><\/span>\n<\/<\/span>head<\/span>><\/span>\n<<\/span>body<\/span>><\/span>\n  <<\/span>div<\/span> class<\/span>=<\/span>\"layout\"<\/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> <<\/span>a<\/span> href<\/span>=<\/span>\"#\"<\/span>><\/span>\u0412\u0435\u0431\u0438\u043d\u0430\u0440\u044b<\/<\/span>a<\/span>><\/span> <<\/span>a<\/span> href<\/span>=<\/span>\"#\"<\/span>><\/span>\u0411\u043b\u043e\u0433<\/<\/span>a<\/span>><\/span>\n    <\/<\/span>nav<\/span>><\/span>\n    <<\/span>main<\/span> class<\/span>=<\/span>\"cards\"<\/span>><\/span>\n      <<\/span>article<\/span> class<\/span>=<\/span>\"card\"<\/span>><<\/span>h2<\/span>><\/span>HTML\/CSS<\/<\/span>h2<\/span>><<\/span>a<\/span> class<\/span>=<\/span>\"btn\"<\/span> href<\/span>=<\/span>\"#\"<\/span>><\/span>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435<\/<\/span>a<\/span>><\/<\/span>article<\/span>><\/span>\n      <<\/span>article<\/span> class<\/span>=<\/span>\"card\"<\/span>><<\/span>h2<\/span>><\/span>JavaScript<\/<\/span>h2<\/span>><<\/span>a<\/span> class<\/span>=<\/span>\"btn\"<\/span> href<\/span>=<\/span>\"#\"<\/span>><\/span>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435<\/<\/span>a<\/span>><\/<\/span>article<\/span>><\/span>\n      <<\/span>article<\/span> class<\/span>=<\/span>\"card\"<\/span>><<\/span>h2<\/span>><\/span>React<\/<\/span>h2<\/span>><<\/span>a<\/span> class<\/span>=<\/span>\"btn\"<\/span> href<\/span>=<\/span>\"#\"<\/span>><\/span>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435<\/<\/span>a<\/span>><\/<\/span>article<\/span>><\/span>\n    <\/<\/span>main<\/span>><\/span>\n  <\/<\/span>div<\/span>><\/span>\n<\/<\/span>body<\/span>><\/span>\n<\/<\/span>html<\/span>><\/span><\/code><\/pre>\n
      \/* \u0411\u0430\u0437\u0430: \u0443\u0437\u043a\u0438\u0439 \u044d\u043a\u0440\u0430\u043d, \u0431\u0435\u0437 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 *\/<\/span>\n*,<\/span> <\/span>*<\/span>::<\/span>before<\/span>,<\/span> <\/span>*<\/span>::<\/span>after<\/span> { <\/span>box-sizing<\/span>: <\/span>border-box<\/span>; }<\/span>\nbody<\/span> { <\/span>margin<\/span>: <\/span>0<\/span>; <\/span>font<\/span>: <\/span>1<\/span>rem<\/span>\/<\/span>1.5<\/span> <\/span>system-ui<\/span>, <\/span>sans-serif<\/span>; }<\/span>\n.<\/span>layout<\/span> { <\/span>display<\/span>: <\/span>grid<\/span>; <\/span>gap<\/span>: <\/span>1<\/span>rem<\/span>; <\/span>padding<\/span>: <\/span>1<\/span>rem<\/span>; }<\/span>\n.<\/span>nav<\/span> { <\/span>display<\/span>: <\/span>flex<\/span>; <\/span>gap<\/span>: <\/span>1<\/span>rem<\/span>; <\/span>overflow-x<\/span>: <\/span>auto<\/span>; }<\/span>\n.<\/span>cards<\/span> { <\/span>display<\/span>: <\/span>grid<\/span>; <\/span>grid-template-columns<\/span>: <\/span>1<\/span>fr<\/span>; <\/span>gap<\/span>: <\/span>1<\/span>rem<\/span>; }<\/span>\n.<\/span>btn<\/span> { <\/span>display<\/span>: <\/span>inline-flex<\/span>; <\/span>align-items<\/span>: <\/span>center<\/span>; <\/span>min-height<\/span>: <\/span>44<\/span>px<\/span>; <\/span>padding<\/span>: <\/span>0<\/span> <\/span>1<\/span>rem<\/span>; }<\/span>\n\n\/* \u0428\u0438\u0440\u0435 40em (640px \u043f\u0440\u0438 \u0448\u0440\u0438\u0444\u0442\u0435 16px): \u0434\u0432\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a *\/<\/span>\n@<\/span>media<\/span> <\/span>(<\/span>min-width<\/span>:<\/span> <\/span>40em<\/span>)<\/span> {<\/span>\n  .<\/span>cards<\/span> { <\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>2<\/span>, <\/span>1<\/span>fr<\/span>); }<\/span>\n}<\/span>\n\n\/* \u0428\u0438\u0440\u0435 64em (1024px): \u0431\u043e\u043a\u043e\u0432\u043e\u0435 \u043c\u0435\u043d\u044e \u0438 \u0442\u0440\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 *\/<\/span>\n@<\/span>media<\/span> <\/span>(<\/span>min-width<\/span>:<\/span> <\/span>64em<\/span>)<\/span> {<\/span>\n  .<\/span>layout<\/span> { <\/span>grid-template-columns<\/span>: <\/span>14<\/span>rem<\/span> <\/span>1<\/span>fr<\/span>; }<\/span>\n  .<\/span>nav<\/span> { <\/span>flex-direction<\/span>: <\/span>column<\/span>; }<\/span>\n  .<\/span>cards<\/span> { <\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>3<\/span>, <\/span>1<\/span>fr<\/span>); }<\/span>\n}<\/span>\n\n\/* \u041d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 - \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043c, \u0433\u0434\u0435 \u0435\u0441\u0442\u044c \u0442\u043e\u0447\u043d\u044b\u0439 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c *\/<\/span>\n@<\/span>media<\/span> <\/span>(<\/span>hover<\/span>:<\/span> <\/span>hover<\/span>)<\/span> <\/span>and<\/span> <\/span>(<\/span>pointer<\/span>:<\/span> <\/span>fine<\/span>)<\/span> {<\/span>\n  .<\/span>btn<\/span>:<\/span>hover<\/span> { <\/span>text-decoration<\/span>: <\/span>underline<\/span>; }<\/span>\n}<\/span><\/code><\/pre>\n
      \u0421\u043e\u0445\u0440\u0430\u043d\u0438 \u0444\u0430\u0439\u043b\u044b \u043a\u0430\u043a index.html<\/code> \u0438 style.css<\/code> \u0440\u044f\u0434\u043e\u043c \u0438 \u043e\u0442\u043a\u0440\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043c\u0435\u043d\u044f\u044f \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u043a\u043d\u0430. \u042f \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 Chromium 148 \u0447\u0435\u0440\u0435\u0437 Playwright \u0441 \u044d\u043c\u0443\u043b\u044f\u0446\u0438\u0435\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 \u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n
      \u0448\u0438\u0440\u0438\u043d\u0430 375, \u0442\u0435\u043b\u0435\u0444\u043e\u043d  -> \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0432 \u0440\u044f\u0434: 1, \u043c\u0435\u043d\u044e: row,    hover: False\n\u0448\u0438\u0440\u0438\u043d\u0430 768, \u043f\u043b\u0430\u043d\u0448\u0435\u0442  -> \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0432 \u0440\u044f\u0434: 2, \u043c\u0435\u043d\u044e: row,    hover: False\n\u0448\u0438\u0440\u0438\u043d\u0430 1280, \u0434\u0435\u0441\u043a\u0442\u043e\u043f -> \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0432 \u0440\u044f\u0434: 3, \u043c\u0435\u043d\u044e: column, hover: True\n<\/code><\/pre>\n
      \u0420\u0430\u0437\u0431\u043e\u0440 \u043f\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c<\/h3>\n