ڕێگا زۆرە بۆ کردنی ئەو کارە، هەم بە PHP و هەمیش بە CSS.

یەکێک لە ڕێگاکانی ئەم کارە بەکارهێنانی میدیا کوێرییە CSS ـە، کە ڕێگەت پێدەدات ستایلە جیاوازەکان بۆ ئامێرە جیاوازەکان یان قەبارەی شاشە جیاوازەکان بەکاربهێنیت.

لێرەدا نموونەیەک دەخەینەڕوو لە میدیا کوێری کە ستایلە جیاوازەکان بۆ شاشەکانی بچووکتر لە 600px جێبەجێ دەکات (دەتوانی بۆ قەبارەکانی تریش هەمان کار بکەیت):

@media (max-width: 600px) {
/* ستایلەکان بۆ شاشە بچووکەکان لە خوارەوە یان یەکسان بە 600px */

/* نموونەی ستایلەکان*/
  body {
    background-color: lightblue;
  }

  h1 {
    color: white;
  }

 /* بەپێی پێویست ستایلی تر زیاد بکە */
}

لەناو کەوانە لوولەکاندا، دەتوانیت هەر یاسایەکی CSS کە بتەوێت زیاد بکەیت؛ وەک گۆڕینی قەبارەی فۆنتەکان یان شاردنەوەی ئەو ئێڵەمێنتانەی کە زۆر گەورەن بۆ شاشە بچووکەکان.

ڕێگەیەکی دیکە بۆ ئەوەی پەڕگەکەت ڕیسپۆنسڤ بێت، بەکارهێنانی یەکە نەرمەکانی CSS ـە وەک ڕێژەی سەدی و یەکەکانی ڕێژەیی viewport وەک vw و vh.

لێرەدا چەند نموونەیەک دەخەینەڕوو:

div {
  width: 100%;
  font-size: 4vw;
  height: 50vh;
}

بەم شێوەیە دەتوانیت لە ڕێی CSS، پەڕگەیەکی تەواو ڕیسپۆنسڤ دروست بکەیت کە لەسەر هەر ئامێرێک یان قەبارەی شاشەیەک نایاب دەربکەوێت، بێگومان ڕێگەی تریش هەیە بەڵام ئەمە سادەترینیانە.

هەروەها ئەم مێتا تاگەی HTML یش هەمان کارت بۆ دەکات، لە بەشێکی پەڕگەکەت زیادی بکە و تاقی بکەرەوە، بۆ هەموو قەبارە و دووریەک دەبێت.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

سوپاس