{"id":6158,"date":"2014-11-13T20:28:31","date_gmt":"2014-11-13T17:28:31","guid":{"rendered":"http:\/\/www.fwasl.com\/?p=6158"},"modified":"2025-09-02T16:08:18","modified_gmt":"2025-09-02T13:08:18","slug":"9-basic-principles-of-responsive-web-design","status":"publish","type":"post","link":"https:\/\/tjarb.com\/fwasl\/9-basic-principles-of-responsive-web-design\/","title":{"rendered":"9 \u0645\u0628\u0627\u062f\u0626 \u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0645\u062a\u062c\u0627\u0648\u0628\u0629 (responsive)"},"content":{"rendered":"<p>\t\t\t\t<![CDATA[\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0645\u0633\u062a\u062c\u064a\u0628\u0629 (responsive) \u064a\u0639\u062f \u062d\u0644\u0627 \u0631\u0627\u0626\u0639 \u0644\u0645\u0634\u0627\u0643\u0644 \u062a\u0639\u062f\u062f \u0627\u0644\u0634\u0627\u0634\u0627\u062a\u060c \u0648\u0644\u0643\u0646 \u0645\u0646 \u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0637\u0628\u0627\u0639\u0629 \u062a\u0639\u062f \u0627\u0645\u0631 \u0635\u0639\u0628. \u0641\u062d\u062c\u0645 \u0627\u0644\u0635\u0641\u062d\u0629 \u063a\u064a\u0631 \u062b\u0627\u0628\u062a. \u00a0\u0644\u0630\u0644\u0643\u060c \u062f\u0639\u0648\u0646\u0627 \u0646\u0648\u0636\u062d \u0628\u0639\u0636 \u0627\u0644\u0645\u0628\u0627\u062f\u0626 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0645\u062a\u062c\u0627\u0648\u0628 (responsive). \u0648\u0644\u062c\u0639\u0644 \u0627\u0644\u0623\u0645\u0631 \u0628\u0633\u064a\u0637 \u0633\u0646\u0642\u0648\u0645 \u0628\u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0639\u0644\u064a \u0627\u0644\u062a\u062e\u0637\u064a\u0637\u0627\u062a (layouts).\n\n[divider] [\/divider]\n\n\n<h2>\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0645\u0633\u062a\u062c\u064a\u0628 (Responsive) \u0636\u062f \u0627\u0644\u0645\u062a\u0643\u064a\u0641 (Adaptive)<\/h2>\n\n\n\u0642\u062f \u064a\u0628\u062f\u0648\u0627 \u0627\u0646\u0647\u0645 \u0645\u062a\u0634\u0627\u0628\u0647\u064a\u0646 \u0648\u0644\u0643\u0646 \u0627\u0644\u0623\u0645\u0631 \u0644\u064a\u0633 \u0643\u0630\u0644\u0643. \u0641\u0643\u0644\u0627 \u0627\u0644\u0623\u0633\u0644\u0648\u0628\u064a\u0646 \u064a\u0643\u0645\u0644 \u0643\u0644 \u0645\u0646\u0647\u0645\u0627 \u0627\u0644\u0622\u062e\u0631\u060c \u0644\u0630\u0644\u0643 \u0644\u0627 \u062a\u0648\u062c\u062f\u00a0\u0637\u0631\u064a\u0642\u0629 \u0635\u062d\u064a\u062d\u0629 \u0623\u0648 \u062e\u0627\u0637\u0626\u0629 \u0644\u0644\u0642\u064a\u0627\u0645 \u0628\u0630\u0644\u0643. \u0641\u062f\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u064a \u064a\u0642\u0631\u0631.\n\n<img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-6161\" src=\"http:\/\/www.fwasl.com\/wp-content\/uploads\/01_Responsive-vs-Adaptive.gif\" alt=\"01_Responsive-vs-Adaptive\" width=\"800\" height=\"291\" \/>\n\n[divider] [\/divider]\n\n\n<h2>\u0627\u0644\u062a\u062f\u0641\u0642 (The flow)<\/h2>\n\n\n\u0639\u0646\u062f\u0645\u0627 \u062a\u0635\u0628\u062d \u0623\u062d\u062c\u0627\u0645 \u0627\u0644\u0634\u0627\u0634\u0629 \u0623\u0635\u063a\u0631\u060c \u0627\u0644\u0645\u062d\u062a\u0648\u064a \u064a\u0628\u062f\u0627 \u0628\u0627\u062e\u0630 \u0645\u0633\u0627\u062d\u0629 \u0639\u0645\u0648\u062f\u064a\u0629 \u0623\u0643\u062b\u0631 \u0648\u0627\u064a \u0634\u0626 \u0623\u0633\u0641\u0644\u0647 \u0633\u064a\u062f\u0641\u0639 \u0644\u0644\u0623\u0633\u0641\u0644\u060c \u0648\u0647\u0630\u0627 \u064a\u062f\u0639\u064a \u0627\u0644\u062a\u062f\u0641\u0642 (the flow). \u0642\u062f \u064a\u0643\u0648\u0646 \u0645\u0646 \u0627\u0644\u0635\u0639\u0628 \u0627\u0644\u0641\u0647\u0645 \u0627\u0630\u0627 \u0643\u0646\u062a \u062a\u0635\u0645\u0645 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0628\u0643\u0633\u0644 \u0648\u0627\u0644\u0646\u0642\u0627\u0637 (pixels , points).\n\n<img decoding=\"async\" class=\"alignnone wp-image-6164\" src=\"http:\/\/www.fwasl.com\/wp-content\/uploads\/04_Flow-vs-Static-2.gif\" alt=\"04_Flow-vs-Static-2\" width=\"800\" height=\"291\" \/>\n\n[divider] [\/divider]\n\n\n<h2>\u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0627\u0644\u0646\u0633\u0628\u064a\u0629 (Relative units)<\/h2>\n\n\n\u0627\u0644\u0640(canvas) \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u0643\u0648\u0646 \u0634\u0627\u0634\u0629 \u0633\u0637\u062d \u0645\u0643\u062a\u0628 \u0623\u0648 \u0645\u0648\u0628\u0627\u064a\u0644 \u0623\u0648 \u0623\u064a \u0634\u0626 \u0628\u064a\u0646\u0647\u0645\u0627. \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0628\u0643\u0633\u0644 \u064a\u0645\u0643\u0646 \u0623\u0646 \u062a\u062e\u062a\u0644\u0641 \u0623\u064a\u0636\u0627\u060c \u0644\u0630\u0644\u0643 \u0646\u062d\u0646 \u0628\u062d\u0627\u062c\u0629 \u0644\u0648\u062d\u062f\u0627\u062a \u062a\u062a\u0633\u0645 \u0628\u0627\u0644\u0645\u0631\u0648\u0646\u0629 \u0648\u062a\u0639\u0645\u0644 \u0641\u064a \u0643\u0644 \u0645\u0643\u0627\u0646. \u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0627\u0644\u0646\u0633\u0628\u064a\u0629 \u0645\u062b\u0644 \u0627\u0644\u0646\u0633\u0628 \u0627\u0644\u0645\u0626\u0648\u064a\u0629 \u062a\u0643\u0648\u0646 \u0639\u0645\u0644\u064a\u0629 \u0648\u0641\u0639\u0627\u0644\u0629. \u0644\u0630\u0644\u0643 \u0627\u0646\u0634\u0627\u0621 \u0634\u0626 \u0639\u0631\u0636\u0647 50% \u064a\u0639\u0646\u064a \u0627\u0646\u0647\u0627 \u0633\u062a\u0627\u062e\u0630 \u062f\u0627\u0626\u0645\u0627 \u0646\u0635\u0641 \u0627\u0644\u0634\u0627\u0634\u0629 ( \u0646\u0635\u0641 \u0625\u0637\u0627\u0631 \u0627\u0644\u0631\u0624\u064a\u0629).\n\n<a href=\"http:\/\/www.fwasl.com\/wp-content\/uploads\/02_Relative-Units-vs-Static-Units-1.gif\"><img decoding=\"async\" class=\"alignnone wp-image-6166\" src=\"http:\/\/www.fwasl.com\/wp-content\/uploads\/02_Relative-Units-vs-Static-Units-1.gif\" alt=\"02_Relative-Units-vs-Static-Units-1\" width=\"800\" height=\"291\" \/><\/a>\n\n&nbsp;\n\n[divider] [\/divider]\n\n\n<h2>\u0646\u0642\u0627\u0637 \u0627\u0644\u062a\u0648\u0642\u0641 (Breakpoints)<\/h2>\n\n\n\u0646\u0642\u0627\u0637 \u0627\u0644\u062a\u0648\u0642\u0641 (Breakpoints) \u062a\u0633\u0645\u062d \u0644\u0644\u062a\u0635\u0645\u064a\u0645 \u0628\u0627\u0644\u062a\u063a\u064a\u0631 \u0641\u064a \u0646\u0642\u0627\u0637 \u0645\u062d\u062f\u062f\u0629 \u0645\u0633\u0628\u0642\u0627\u060c \u0639\u0644\u064a \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644 \u0641\u064a \u0633\u0637\u062d \u0627\u0644\u0645\u0643\u062a\u0628 \u064a\u0648\u062c\u062f 3 \u0623\u0639\u0645\u062f\u0629 \u060c \u0648\u0644\u0643\u0646\u00a0\u0639\u0644\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 \u064a\u0638\u0647\u0631 \u0639\u0645\u0648\u062f \u0648\u0627\u062d\u062f \u0641\u0642\u0637.\u00a0\u064a\u0645\u0643\u0646 \u062a\u063a\u064a\u064a\u0631 \u062e\u0635\u0627\u0626\u0635 \u0627\u0644 CSS \u0645\u0646 \u0646\u0642\u0637\u0629 \u0625\u0644\u064a \u0623\u062e\u0631\u064a. \u062a\u062d\u062f\u064a\u062f \u0645\u0643\u0627\u0646 \u0646\u0642\u0627\u0637 \u0627\u0644\u062a\u0648\u0642\u0641 \u0639\u0627\u062f\u0629 \u0645\u0627 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u064a \u0627\u0644\u0645\u062d\u062a\u0648\u064a.\n\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6168\" src=\"http:\/\/www.fwasl.com\/wp-content\/uploads\/03_With-Breakpoints-vs-Without-Breakpoints-1.gif\" alt=\"03_With-Breakpoints-vs-Without-Breakpoints-1\" width=\"800\" height=\"291\" \/>\n\n[divider] [\/divider]\n\n\u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u0623\u0642\u0635\u064a \u0648\u0627\u0644\u0623\u062f\u0646\u064a (Max ,\u00a0Min)\n\n\u0623\u062d\u064a\u0627\u0646\u0627 \u0645\u0646 \u0627\u0644\u062c\u064a\u062f \u0623\u0646 \u064a\u0623\u062e\u0630 \u0627\u0644\u0645\u062d\u062a\u0648\u064a \u0639\u0631\u0636 \u0627\u0644\u0634\u0627\u0634\u0629 \u0643\u0627\u0645\u0644\u0627\u060c \u0643\u0645\u0627 \u0639\u0644\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644\u060c \u0648\u0644\u0643\u0646 \u0648\u062c\u0648\u062f \u0646\u0641\u0633 \u0627\u0644\u0645\u062d\u062a\u0648\u064a \u0627\u0644\u0645\u062a\u0645\u062f\u062f\u00a0\u0628\u0639\u0631\u0636 \u0627\u0644\u0634\u0627\u0634\u0629 \u0643\u0627\u0645\u0644\u0627 \u0639\u0627\u062f\u0629 \u0645\u0627 \u064a\u0643\u0648\u0646\u0627\u0642\u0644 \u0635\u0648\u0627\u0628\u0627\u064b. \u0641\u0647\u0630\u0627 \u0647\u0648 \u0633\u0628\u0628 \u0642\u062f\u0631\u0629 \u0642\u064a\u0645 \u0627\u0644 (Min\/Max) \u0639\u0644\u064a \u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629. \u0639\u0644\u064a \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644 \u0648\u062c\u0648\u062f \u0639\u0631\u0636 (100% width) \u00a0\u0648 \u0639\u0631\u0636 \u0623\u0642\u0635\u064a ( Max width of 1000px) \u0641\u0647\u0630\u0627 \u064a\u0639\u0646\u064a \u0623\u0646 \u0627\u0644\u0645\u062d\u062a\u0648\u064a \u0633\u0648\u0641 \u064a\u0645\u0644\u0623\u00a0\u0627\u0644\u0634\u0627\u0634\u0629\u060c \u0648\u0644\u0643\u0646 \u0644\u0646\u00a0\u064a\u062a\u062e\u0637\u064a \u0627\u0644\u0640 1000px.\n\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6170\" src=\"http:\/\/www.fwasl.com\/wp-content\/uploads\/07_Max-width-vx-No-max-width-1.gif\" alt=\"07_Max-width-vx-No-max-width-1\" width=\"800\" height=\"291\" \/>\n\n[divider] [\/divider]\n\n\n<h2>\u0627\u0644\u0643\u0627\u0626\u0646\u0627\u062a \u0627\u0644\u0645\u062a\u062f\u0627\u062e\u0644\u0629 (Nested objects)<\/h2>\n\n\n\u0633\u064a\u0643\u0648\u0646 \u0635\u0639\u0628 \u0627\u0644\u062a\u062d\u0643\u0645 \u0628\u0647\u0645\u060c \u0648\u0628\u0627\u0644\u062a\u0627\u0644\u064a \u062a\u063a\u0644\u064a\u0641 (wrapping) \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0641\u064a \u0648\u0639\u0627\u0621 (container) \u064a\u0628\u0642\u064a\u0647\u0645 \u0623\u0643\u062b\u0631 \u0642\u0627\u0628\u0644\u064a\u0629 \u0644\u0644\u0641\u0647\u0645\u060c \u0646\u0638\u064a\u0641 \u0648\u0645\u0631\u062a\u0628\u064a\u0646. \u0648\u0647\u0630\u0627 \u062d\u064a\u062b \u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0627\u0644\u062b\u0627\u0628\u062a\u0629 \u0645\u062b\u0644 \u0627\u0644\u0628\u0643\u0633\u0644 \u064a\u0645\u0643\u0646 \u0623\u0646 \u062a\u0633\u0627\u0639\u062f. \u0648\u0647\u064a \u0645\u0641\u064a\u062f\u0629 \u0644\u0644\u0645\u062d\u062a\u0648\u064a \u0627\u0644\u0630\u064a \u0644\u0627 \u062a\u0631\u064a\u062f\u062f\u0647 \u0623\u0646 \u064a\u062a\u0648\u0633\u0639(scale)\u060c \u0645\u062b\u0644 \u0627\u0644\u0634\u0639\u0627\u0631\u0627\u062a \u0648\u0627\u0644\u0623\u0632\u0631\u0627\u0631.\n\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6171\" src=\"http:\/\/www.fwasl.com\/wp-content\/uploads\/05_Nested-vs-Not-Nested-1.gif\" alt=\"05_Nested-vs-Not-Nested-1\" width=\"800\" height=\"291\" \/>\n\n[divider] [\/divider]\n\n\n<h2>\u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 (Mobile ) \u0623\u0645 \u0633\u0637\u062d \u0627\u0644\u0645\u0643\u062a\u0628 (Desktop) \u0623\u0648\u0644\u0627<\/h2>\n\n\n\u0645\u0646 \u0627\u0644\u0646\u0627\u062d\u064a\u0629 \u0627\u0644\u062a\u0646\u0642\u064a\u0629 \u0644\u0627 \u064a\u0648\u062c\u062f \u0627\u0644\u0643\u062b\u064a\u0631 \u0645\u0646 \u0627\u0644\u0627\u062e\u062a\u0644\u0627\u0641 \u0627\u0630\u0627 \u0628\u062f\u0623\u062a \u0645\u0634\u0631\u0648\u0639\u0643\u00a0\u0645\u0646 \u0634\u0627\u0634\u0629 \u0635\u063a\u064a\u0631\u0629 \u0625\u0644\u064a \u0634\u0627\u0634\u0629 \u0643\u0628\u064a\u0631\u0629 (\u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 \u0623\u0648\u0644\u0627) \u0623\u0648 (\u0633\u0637\u062d \u0627\u0644\u0645\u0643\u062a\u0628 \u0623\u0648\u0644\u0627). \u0627\u0644\u0627 \u0627\u0646 \u0627\u0644\u0628\u062f\u0623 \u0628\u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 \u0623\u0648\u0644\u0627\u064b \u064a\u0636\u064a\u0641 \u0642\u064a\u0648\u062f\u0627 \u0625\u0636\u0627\u0641\u064a\u0629 \u0648\u064a\u0633\u0627\u0639\u062f\u0643 \u0639\u0644\u064a \u0627\u062a\u062e\u0627\u0630 \u0627\u0644\u0642\u0631\u0627\u0631 . \u063a\u0627\u0644\u0628\u0627 \u0645\u0627 \u064a\u0628\u062f\u0623 \u0627\u0644\u0646\u0627\u0633 \u0628\u0627\u0644\u0627\u062b\u0646\u064a\u0646 \u0641\u064a \u0648\u0642\u062a \u0648\u0627\u062d\u062f\u060c \u0644\u0630\u0644\u0643 \u0642\u0645 \u0628\u0639\u0645\u0644 \u0645\u0627 \u064a\u0646\u0627\u0633\u0628\u0643.\n\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6172\" src=\"http:\/\/www.fwasl.com\/wp-content\/uploads\/08_Desktop-first-vs-Mobile-first-3.gif\" alt=\"08_Desktop-first-vs-Mobile-first-3\" width=\"800\" height=\"291\" \/>\n\n[divider] [\/divider]\n\n\n<h2>\u062e\u0637\u0648\u0637 \u0627\u0644\u0648\u064a\u0628 \u0645\u0642\u0627\u0628\u0644 \u062e\u0637\u0648\u0637 \u0627\u0644\u0646\u0638\u0627\u0645 (Web Fonts vs System fonts)<\/h2>\n\n\n\u062e\u0637\u0648\u0637 \u0627\u0644\u0648\u064a\u0628 \u062a\u0628\u062f\u0648 \u0631\u0627\u0626\u0639\u0629 \u062c\u062f\u0627\u060c \u0648\u0644\u0643\u0646 \u062a\u0630\u0643\u0631 \u0627\u0646\u0647 \u064a\u062a\u0645 \u062a\u062d\u0645\u0644\u064a\u0647\u0627 \u0639\u0646\u062f \u0641\u062a\u062d \u0627\u0644\u0645\u0648\u0642\u0639\u060c \u0648\u0643\u0644\u0645\u0627 \u0642\u0645\u062a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0637\u0648\u0637 \u0623\u0643\u062b\u0631 \u0643\u0644\u0645\u0627 \u0632\u0627\u062f \u0648\u0642\u062a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629.\u00a0\u0645\u0646 \u0646\u0627\u062d\u064a\u0629 \u0623\u062e\u0631\u064a \u062e\u0637\u0648\u0637 \u0627\u0644\u0646\u0638\u0627\u0645 (System fonts) \u0633\u0631\u064a\u0639\u0629 \u062c\u062f\u0627 \u0641\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0641\u0647\u064a \u062a\u0643\u0648\u0646 \u0645\u062a\u0648\u0627\u062c\u062f\u0629 \u0628\u0627\u0644\u0641\u0639\u0644 \u0641\u064a \u062c\u0647\u0627\u0632 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0648\u0641\u064a \u062d\u0627\u0644 \u0639\u062f\u0645 \u0648\u062c\u0648\u062f\u0647\u0627 \u0633\u064a\u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u062e\u0637 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a.\n\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6174\" src=\"http:\/\/www.fwasl.com\/wp-content\/uploads\/06_System-fonts-vs-Webfonts-1.gif\" alt=\"06_System-fonts-vs-Webfonts-1\" width=\"800\" height=\"291\" \/>\n\n[divider] [\/divider]\n\n\n<h2>\u0627\u0644\u0635\u0648\u0631 \u0627\u0644\u0646\u0642\u0637\u064a\u0629 \u0645\u0642\u0627\u0628\u0644\u00a0\u0627\u0644\u0645\u062a\u062c\u0647\u0629 (Bitmap images vs Vectors)<\/h2>\n\n\n\u0647\u0644 \u062a\u0633\u062a\u062e\u062f\u0645 \u0623\u064a\u0642\u0648\u0646\u0627\u062a \u0628\u0647\u0627 \u062a\u0641\u0627\u0635\u064a\u0644 \u0643\u062b\u064a\u0631\u0629 \u0648\u0628\u0647\u0627 \u0628\u0639\u0636 \u0627\u0644\u062a\u0623\u062b\u064a\u0631\u0627\u062a \u061f \u0627\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u062c\u0648\u0627\u0628 \u0646\u0639\u0645\u060c \u0641\u0642\u0645 \u0628\u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0635\u0648\u0631 \u0627\u0644\u0646\u0642\u0637\u064a\u0629 (bitmap). \u0627\u0630\u0627 \u0643\u0627\u0646 \u0644\u0627\u060c \u0641\u0639\u0644\u064a\u0643 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0635\u0648\u0631 \u0627\u0644\u0641\u064a\u0643\u0648\u0631 (vector). \u0644\u0644\u0635\u0648\u0631 \u0627\u0644\u0646\u0642\u0637\u064a\u0629 (bitmap) \u0627\u0633\u062a\u062e\u062f\u0645 ( jpg, png, gif)\u060c \u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u0644\u0641\u064a\u0643\u062a\u0648\u0631 \u00a0(vectors) \u0627\u0644\u062e\u064a\u0627\u0631 \u0627\u0644\u0623\u0641\u0636\u0644 \u0633\u064a\u0643\u0648\u0646 (SVG) \u0623\u0648 (icon font). \u0643\u0644 \u0645\u0646\u0647\u0645\u0627 \u0644\u062f\u064a\u0647 \u0628\u0639\u0636 \u0627\u0644\u0645\u0632\u0627\u064a\u0627 \u0648\u0627\u0644\u0639\u064a\u0648\u0628 \u0648\u0642\u062f \u062a\u0643\u0644\u0645\u0646\u0627 \u0641\u064a \u0645\u0642\u0627\u0644 \u0633\u0627\u0628\u0642 \u0639\u0646<a href=\"http:\/\/www.fwasl.com\/font-icons-vs-svgs\/\"> \u0627\u0644\u0645\u0632\u0627\u064a\u0627 \u0648\u0627\u0644\u0639\u064a\u0648\u0628<\/a>. \u0644\u0643\u0646 \u0636\u0639 \u0641\u064a \u0627\u0644\u0627\u0639\u062a\u0628\u0627\u0631 \u0627\u0644\u062d\u062c\u0645 &#8211; \u064a\u062c\u0628 \u0623\u0644\u0627 \u062a\u0631\u0641\u0639 \u0635\u0648\u0631\u0629 \u0639\u0644\u064a \u0627\u0644\u0627\u0646\u062a\u0631\u0646\u062a \u0628\u062f\u0648\u0646 \u062a\u062d\u0633\u064a\u0646(optimization). \u00a0\u0645\u0646 \u0646\u0627\u062d\u064a\u0629 \u0623\u062e\u0631\u064a \u0627\u0644\u0641\u064a\u0643\u062a\u0648\u0631 (Vectors) \u064a\u0643\u0648\u0646 \u062d\u062c\u0645\u0647\u0627 \u0635\u063a\u064a\u0631\u060c \u0648\u0644\u0643\u0646 \u0628\u0639\u0636 \u0627\u0644\u0645\u062a\u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0642\u062f\u064a\u0645\u0629 \u0644\u0627 \u062a\u062f\u0639\u0645\u0647\u0627.\n\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6175\" src=\"http:\/\/www.fwasl.com\/wp-content\/uploads\/09_Vectors-vs-Images-1.gif\" alt=\"09_Vectors-vs-Images-1\" width=\"800\" height=\"291\" \/>\n\n&nbsp;\n\n<a href=\"http:\/\/blog.froont.com\/\" target=\"_blank\">\u00a0\u0627\u0644\u0645\u0635\u062f\u0631<\/a>]]>\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\t\t\t\t<![CDATA[]]>\t\t<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[49,17,149,214],"class_list":["post-6158","post","type-post","status-publish","format-standard","hentry","category-design","tag-responsive","tag-responsive-design","tag-responsive-web-design","tag-214"],"_links":{"self":[{"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/posts\/6158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/comments?post=6158"}],"version-history":[{"count":1,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/posts\/6158\/revisions"}],"predecessor-version":[{"id":10250,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/posts\/6158\/revisions\/10250"}],"wp:attachment":[{"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/media?parent=6158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/categories?post=6158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/tags?post=6158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}