راهنمای واحدهای نسبی در CSS

در این پست قصد داریم واحدهای اندازه گیری نسبی یا relative را در css معرفی کنیم. برخلاف واحدهای مطلق، ماند پیکسل px، واحدهای اندازه گیری نسبی: relative units نسبت به یک چیز دیگر اندازه را مشخص می کنند. این چیزی که واحدهای نسبی بر اساس آن ارائه می شوند می تواند فونت سایز المان والد باشد، یا عرض div والد باشد یا ارتفاع viewport باشد.

واژه length در هر دو نوع واحدهای نسبی و مطلق مشترک است اما در واقع واحد length به چه معناست؟ فونت سایزهای نسبی یا relative font-size مانند rem و em بر اساس خواص المنت سایز فونت را تعیین می کنند. همچنین واحدهایی داریم که نسبت به viewport سایزشان مشخص می شود. مانند vh, vw

یکی دیگر از واحدهای نسبی در CSS درصد یا % می باشد. واحدهای نسبی یا Relative Units در css زمانی کاربرد فراوانی دارند که قالب وب سایت بصورت شناور یا Fluid باشد. یعنی بر اساس عرض صفحه نمایش، عرض یا width قالب نیز افزایش می یابد. در اینگونه طراحی ها بهتر است از واحدهای نسبی برای فونت سایزها و سایر خواص css استفاده کنید.

بنابراین سایز المان ها در وب سایت ممکن است در هنگام اجرا یا run-time نسبت به سایز container تغییر کند. مثلا در گوشی موبایل یا تبلت اگر اسکرین دستگاه را بچرخانیم و عمودی یا افقی کنیم، سایز اسکرین تغییر می کند و به نسبت آن سایز المان ها مانند فونت متون بزرگ و کوچک خواهد شد.

واحدهای نسبی یا Relative Units در CSS:

ابتدا نگاهی به رایج ترین فونت سایزهای نسبی در CSS بیاندازیم. یعنی em و rem

واحد em در css:

مرورگر واحدهای em را بر اساس فونت سایز فعلی عنصر به px تبدیل می کند. به مثال زیر دقت کنید:

کد html:

<h2>Hello</h2>
<h3>World</h3>

کد css:

h2 {
  font-size: 20px;
  margin-top: 2em;
}
h3 {
  margin-top: 2.5em;
}

مقدار خاصیت margin-top برای المنت h2 چیست؟ ابزار DevTools مرورگر کروم را باز کنید. تگ h2 را انتخاب کنید و در تب computed مشاهده می شود که مقدار margin-top این المان برابر 40 پیکسل است:

این مقدار از کجا آمده است؟ فرمول محاسبه خاصیت margin-top برای المان h2 بصورت زیر است:

مقدار خاصیت font-size که 20px است در عدد 2 ضرب شده و حاصل عدد 40 شده است: margin-top: 2*20px=40px

اما مقدار margin-top المان h3 چگونه بدست آمده است؟ همانطور که در تصویر زیر مشاهده می کنید، مقدارش 46.8px می باشد.

این مقدار از کجا آمده است؟! ما که مقداری برای فونت سایز h3 تعریف نکردیم! اینجاست که یکی از ویژگی های css پا به میدان می گذارد. هر المان مقادیری را بصورت مشتق شده و پیش فرض دارد.

همانطور که میبینید، المان h3 دارای خاصیت فونت سایز پیشفرض با مقدار 1.17em می باشد. و واحدش پیکسل نیست. پس ما باید پیمایش المان ها را به سمت المان والد ادامه دهیم تا به یک مقدار پیکسلی برسیم.

به کمک ابزار DevTools در مرورگر متوجه می شویم که المان body یک فونت سایز مطلق 16 پیکسلی دارد.

اگر مقداری را برای خاصیت font-size المان body در css تعریف نکنیم، مرورگرها مقدار 16px را برای آن در نظر می گیرند. با این تفاسیر می توانیم مقدار 46.8px را به صورت 2.5 * 1.17 * 16 = 46.8px بدست آوریم.

در مثال بعدی مشخص می شود که واحد em تنها محدود به استفاده در المان های متنی نمی باشد. بلکه برعکس، em می تواند برای هر المنتی که واحدهای اندازه گیری دارد استفاده شود. در ابتدا ممکن است استفاده از واحد نسبی em برای المنت های غیر تکستی کمی عجیب باشد اما هیچ مشکلی ندارد و کاملا استاندارد است.

کار با واحد نسبی em

خوب است که گاهی نگاهی به مستندات CSS در سایت W3C بیاندازیم. در تصویر زیر مشاهده می کنید که خاصیت font-size از المان های والد به ارث برده می شود.

بنابراین استفاده از واحد em می تواند چالش انگیز باشد:

هر المان در html خاصیت font-size را از المان های والدش ارث بری می کند.
اگر یک فونت سایز بصورت em برای المان روت html تعریف شده باشد، مقدار پیش فرض مرورگر به واحد پیکسل خواهد بود. برخی از مرورگرها امکان تعریف مقادیر پیش فرض را به کاربر می دهند. در اینحالت، از مقادیر سفارشی کاربر استفاده خواهد شد.

اما این قضیه می تواند منجر به نتایج ناخواسته و غیرقابل پیش بینی در مقادیر em شود. به مثال زیر در پلتفرم codepen دقت کنید:

See the Pen CSS Units by Ehsan Safari

در این مثال همانطور که در تب Result مشاهده می کنید، فونت سایز المان های فرزند از المان های والد بزرگتر شده است.

اما چرا اینگونه شده است؟

فونت سایز li سطح اول یا level 1 برابر 14px است. نحوه محاسبه:

li { font-size: 1.4em; } ==> یعنی عدد 1.4 را باید در فونت سایز پیش فرض بادی (10 = 16 * 62.5%) ضرب کنیم. پس خروجی عدد 1.4 * 10 = 14px خواهد شد.

فونت سایز المان li سطح دوم یا level 2 برابر 19.6px می باشد. نحوه محاسبه:

li { font-size: 1.4em; } ==> یعنی عدد 1.4 را باید در فونت سایز پیش فرض المان والد یعنی li سطح اول (14px) ضرب کنیم. پس خروجی عدد 1.4 * 14 = 19.6px خواهد شد.

فونت سایز المان li سطح سوم یا level 3 برابر است با 27.44px نحوه محاسبه:

li { font-size: 1.4em; } ==> یعنی عدد 1.4 را باید در فونت سایز پیش فرض المان والد یعنی li سطح دوم (19.6px) ضرب کنیم. پس خروجی عدد 1.4 * 19.6 = 27.44px خواهد شد.

برای رفع این مشکل و کسب اطمینان از اینکه تمام li های هم سطح دارای فونت سایز یکسانی باشند می توانیم یک سلکتور دیگر بصورت زیر تعریف کنیم:

li li { font-size: 1em; };

با این تفاسیر پیشنهاد می کنیم در اینگونه سناریوها، یعنی فونت سایز المان های هم سطح یا sibling از واحد rem بجای em استفاده کنید.

واحد rem در css:

واحد اندازه گیری نسبی rem که برای تعیین فونت سایز بکار می رود مخفف عبارت root em می باشد. روش اندازه گیری آن به این شکل است که نسبت به فونت سایز المان روت فونت سایز مشخص می شود. در واقع باید برای تبدیل واحد rem به px مقدار rem را در فونت سایز پیکسلی المان html مرورگر ضرب کنید.

مثال زیر را در نظر بگیرید:

کد html:

<h2>Hello</h2>
<h3>World</h3>

کد css:

h2 {
  font-size: 20px;
  margin-top: 2rem;
}
h3 {
  margin-top: 2.5rem;
}

مقدار خاصیت margin-top المان h2 برابر 2rem است. پس باید عدد 2 را در مقدار فونت سایز المان html صفحه یعنی 16px ضرب کنیم که حاصل برابر 32px می شود.

در اکثر مرورگرهای دسکتاپ مقدار پیش فرض font-size برای المان های html و body برابر 16px است. اما برای اینکه مطمئن شوید روی صفحه وب موردنظر راست کلیک کرده و گزینه inspect را انتخاب کنید. مطابق شکل زیر در تب computed مشاهده می کنید که font-size المان html برابر 16px می باشد.

بنابراین می توانید با خیال راحت از واحد نسبی rem برای فونت سایز استفاده کنید.

کار با واحد rem:

محاسبه مقدار نهایی برای واحدهای rem ساده است. فقط کافیست مقدار rem را در واحد px المان html ضرب کنید. در ابزار DevTools مرورگر کروم، در تب Computed می توانید مقدار نهایی فونت سایز المان موردنظر را مشاهده کنید.

در بخش زیر، نحوه محاسبه مقدار پیکسلی المان html را بیان کرده ایم:

اگر یک مقدار px سفارشی برای المان html تعریف نکرده اید، مقدار پیکسلی این المان از مقادیر پیش فرض مرورگر گرفته می شود. که معمولا 16px است.
اگر مقداری سفارشی با واحد px برای فونت سایز html تعریف کرده اید، در محاسبات فونت سایز rem از این فونت سایز استفاده خواهد شد.
اگر فونت سایز المان html را با واحد em یا % تعریف کرده اید، مقدار نهایی px مربوط به فونت سایز html با توجه به مقدار پیش فرض مرورگر تنظیم خواهد شد.
اگر اندازه فونت المان html را بر اساس واحد rem تعریف کرده اید، مقدار پیکسلی المان html برابر با حاصل ضرب عدد rem در مقدار پیش فرض px مرورگر.

ار عواقب استفاده از واحد rem می توان به این مورد اشاره کرد که مقدار فونت سایز المان html در مرورگر بر روی مقادیر نهایی rem تاثیر گذار است. از ویژگی های دیگر واحد rem اینست که مشکلات ارث بری فونت سایز وجود ندارد. همانطور که در توضیحات واحد em بیان کردیم، مشکلاتی در استفاده از em برای المان های هم سطح پیش خواهد آمد. اما واحد rem این مشکل را نخواهد داشت.

در این زمینه به مثال زیر در codepen توجه کنید:

See the Pen CSS Units by Ehsan Safari

در این سناریو، تعریف استایل font-size برای المان والد بی فایده و بلا استفاده است. زیرا مقادیر rem نسبت به مقدار پیکسلی المان html محاسبه می شوند.

چه مواقعی باید از rem یا em استفاده کرد؟

انتخاب بین واحدهای نسبی em و rem در مبحث طراحی سایت همیشه چالش انگیز بوده است.

از مزایای rem می توان به عدم وابستگی آن به ارث بری فونت سایز اشاره کرد. یعنی مقدار نهایی rem بر اساس فونت سایز المان html صفحات محاسبه می شود و ربطی به مقدار فونت سایز المان والدش ندارد.

از دیگر مزایای فونت سایزهای rem اینست که به فونت سایزهای سفارشی کاربر واکنش نشان می دهد. وقتی کاربر سایز فونت را افزایش می دهد با استفاده از rem این امکان را دارید که یکپارچگی طرح و فونت را حفظ کنید. یعنی فونت سایز المان ها با توجه به فونت سایز سفارشی کاربر تغییر می کند.

اما واحد em یکی از ابزارهای قدرتمند طراحان حرفه ای سایت است. قاعده واحد em به این شکل است که خواص المان ها مانند margin و width را بر اساس فونت سایز المان های والد تعریف می کند. بنابراین به فونت سایز المان روت یعنی html وابسته نخواهد بود.

پس یکی از قابلیت های اصلی em برقراری ارتباط بین ابعاد المان و فونت سایز متن داخل آنست. در مثال زیر یک دکمه یا button را خواهیم دید. این قضیه در طراحی ریسپانسیو بسیار کاربرد خواهد داشت.

به مثال زیر در codepen دقت کنید:

See the Pen CSS Units by Ehsan Safari

در مثال فوق با سلکتور button به دکمه های این صفحه استایل داده شده است. و خواص padding و border و border-radius نسبت به مقدار فونت سایز تعیین می شود.

دکمه های سایزهای مختلف با کلاس های واضح، مانند size-l تعریف شده اند. از آنجائیکه font-size ها در این مثال بر اساس واحد em تعریف شده اند، مقادیر نهایی em نسبت به فونت سایز پیکسلی المان های footer و main بدست خواهد آمد.

بعنوان مثال دکمه Button L در سکشن main دارای فونت سایز 1.5em است. بدلیل اینکه فونت سایز main برابر 20px تعریف شده، فونت سایز Button L بصورت زیر محاسبه خواهد شد:

1.5 * 20 = 30px

به همین منوال برای دکمه Button S داریم: 0.8em ضرب در فونت سایز footer یعنی 14px که نهایتا 0.8*14 = 11.2px خواهد شد.

خوبی این روش، یعنی استفاده از واحد em، اینست که براحتی در کامپوننت های مختلف قابل استفاده است. برای تغییر اندازه فونت سایز، عرض، ضخامت border و… فقط کافیست مقدار پیکسلی فونت سایز المان های والد، در این مثال footer و main را تغییر دهیم.

واحد نسبی درصد % در css:

از درصد یا percent می توان برای تعریف length یا فونت سایز یا سایر خواص css بصورت درصدی استفاده کرد. مقدار نهایی در اینحالت به مقدار همین خاصیت، مثلا width، در المان والد بستگی دارد.

و این مقدار نهایی با واحد پیکسل px خواهد بود. به مثال ساده زیر توجه کنید:

main {
  width: 400px;
  height: 50%;
}

h1 {
  width: 50%;
}

<body>
  <main>
    <h1>hello world</h1>
  </main>
</body>

خاصیت width برای المان h1 برابر با 50% تعریف شده است. یعنی طولش 50 درصد المان والدش خواهد بود. و چون المان والدش یعنی main دارای width=400px است، طول h1 برابر 200px می شود.

حالا می خواهیم یک مثال پیچیده تر را در زمینه واحد درصدی در css بررسی کنیم. در این مثال، المان های div خاکستری رنگ والد یا parent المان های h2 با بک گراند آبی رنگ می باشند.

به ادیتور codepen زیر توجه نمایید:

See the Pen CSS Units by Ehsan Safari

رفتار پیش فرض یک المان با display=block اینست که طولش تمام فضای خالی افقی المان والد را بپوشاند. مانند demo 1

همانطور که تصویر demo 1 را مشاهده می کنید، خاصیت padding در المان h2 یعنی پس زمینه آبی تیره، به width کلی div اضافه نشده است.

در demo 2 خاصیت width: 100% تعریف شده است که باعث نمایش یک نوار اسکرول افقی شده است. بنظر شما چرا اسکرول دارد؟

در demo 1 که دارای width: auto می باشد، تمام خواص padding و border و margin در طول کلی div محاسبه شده است. پس اسکرول افقی یا horizontal scrollbar نخواهد داشت.

در demo 3 با اینکه المان h2 دارای خاصیت width: 100% می باشد، هیچ اسکرول افقی نداریم. به این دلیل که خواص border و padding المان فرزند به فضای افقی المان اضافه نمی شود. زیرا خاصیت box-sizing برابر با border-box تعریف شده است.

در سایت Mozilla بیشتر درباره خاصیت box-sizing بخوانید.

اما اگر بخواهیم خلاصه ای از کاربرد box-sizing را بیان کنیم به اینصورت است:

خاصیت box-sizing دو مقدار content-box و border-box می گیرد. مقدار پیش فرض این خاصیت content-box است. یعنی اگر فرض کنید width یک div را برابر 100px تعریف کنیم و خاصیت های padding یا border هم برای این div داشته باشیم، مقدار padding و border به width کلی div اضافه می شود و width نهایی آن بیشتر از 100 پیکسل خواهد شد.

اما اگر مقدار box-sizing را برابر با border-box تعریف کنیم، مقادیر padding و border در width المان div محاسبه می شوند. یعنی طول div از 100 پیکسل تجاوز نخواهد کرد. بطور کلی پیشنهاد می شود خاصیت box-sizing را در طراحی وب سایت برابر border-box تعریف شود. مگر اینکه بخواهیم در جای خاصی آن را تغییر دهیم.

در demo 4 و demo 5 مشاهده می کنید که width بصورت درصدی لزوما ارتباطی با المان والد مستقیمش ندارد. و ممکن است نسبت به المان والدهای سطوح بالاتر طولش مشخص شود.

واحدهای ViewPort (vh, vw):

واحدهای درصدی معمولا به المان والد یا parent بستگی دارند. اما واحدهای viewport درصدی از اندازه ویوپورت مرورگر می باشند. مقادیر viewport یا بر اساس طول ویوپورت یعنی viewport width اندازه گیری می شوند یا بر اساس ارتفاع ویوپورت یعنی viewport height.

مقدار vw و vh بین 1 تا 100 است:

– 1vw معادل یک درصد از عرض ویوپورت یا viewport width است. 1vh هم معادل یک درصد از ارتفاع ویوپورت یا viewport height است.

– 100vw معادل صد درصد عرض viewport و 100vh معادل صد در صد ارتفاع viewport می باشد.

کاربرد اصلی واحدهای viewport در container های سطح بالای سایت می باشد. جاهایی که می خواهیم فضای div موردنظر نسبت به عرض و ارتفاع ویوپورت دستگاه کاربران تعیین شود.

بر خلاف واحدهای درصدی در CSS، که نسبت به اندازه المنت والد یا parent اندازه گیری می شدند، واحدهای vh و vw هیچ وابستگی به استایل های المان والد ندارند و فقط بر اساس عرض و ارتفاع viewport کار می کنند.

بنابراین می توان از 100vw برای المان هایی استفاده کرد که می خواهیم تمام عرض viewport را پوشش دهند. اما نکاتی دارد که باید دقت کنید. در بخش زیر به آنها اشاره می کنیم:

در 100vw خواص margin و border لحاظ نمی شود. یعنی اگر المان موردنظرمان دارای margin یا border یا هر دوی آنها باشد، عرض المان بیشتر از 100vw خواهد شد که منجر به نمایش اسکرول افقی خواهد شد. همانطور که قبلا بیان کردیم، برای رفع این مشکل باید از خاصیت box-sizing: border-box استفاده کرد.

به مثال زیر در codepen توجه کنید:

See the Pen CSS Units by Ehsan Safari

در مثال فوق، المان header باعث شده در اسکرول افقی بیوفتد. اما در تگ article مشاهده می کنیم که این مشکل با تعریف استایل box-sizing: border-box حل شده است.

برای تگ main به روش دیگری جلوی نمایش اسکرول افقی گرفته شده است. توسط تابع calc() دو border چپ و راست و همچنین دو margin چپ و راست را از 100vw تفریق کرده ایم. استایل زیر:

width: calc(100vw - 2 * var(--border) - 2 * var(--gap));

اگر هدفتان تمام عرض یا full-width شدن یک container است، تعریف استایل کلاسیک width:100% می تواند راهگشا باشد. این استایل در مرورگرهای قدیمی نیز پشتیبانی می شود.

یکی دیگر از کاربردهای واحد ویو پورت تعیین ارتفاع یک container بر اساس ارتفاع viewport است. یعنی vh

اگر می خواهید ارتفاع یک div معادل درصدی از ارتفاع اسکرین باشد، استفاده از vh نسبت به واحد % بهتر است. زیرا همانطور که قبلا گفتیم اگر ارتفاع را بصورت درصدی تعریف کنیم، نسبت به ارتفاع المان والد یا parent element محاسبه می شود اما واحد vh مستقل از المان والد کار می کند و فقط بر اساس ارتفاع ویو پورت یا viewport height محاسبات را انجام می دهد.

در مثال زیر یک فوتر sticky داریم. یعنی با استفاده از واحد vh طوری استایل نویسی شده که المان footer به انتهای viewport بچسبد.

See the Pen CSS Units by Ehsan Safari

دو واحد دیگر بنام vmin و vmax داریم که با واحدهای viewport ارتباط دارند:

20vmin معادل 20vw و 20vh است: هر کدام کوچکتر باشد.
10vmax معاد ل 10vw و 10vh است: هر کدام بزرگتر باشد.

با یک مثال می خواهیم مقادیر vmin و vmax را توضیح دهیم:

در حالت portrait یا عمودی: 10vmax به معنی 10 درصد از عرض ویوپورت جاری یا viewport width می باشد.

در حالت landscape یا افقی: 10vmin به معنی 10 درصد از ارتفاع ویوپورت جاری یا viewport height می باشد.

تصویر زیر نشان می دهد که مقدار نهایی px چگونه در vmin و vmax محاسبه می شود:

اما سوالی که اینجا به ذهن می رسد اینست که واحدهای vmin و vmax کجاها کاربرد دارد؟

در برخی شرایط واحدهای vmin و vmax از مدیا کوئری ها بهتر عمل می کنند. در media query ها شما باید مدام به سایز مدیاها فکر کنید. یکی از کاربردهای vmin و vmax در کامپوننت های متنی می باشد. در مثال زیر، نشان دادیم که استفاده از vmin بجای vw عملکرد بهتری در حالت ریسپانسیو دارد.

در codepen زیر مشاهده می کنیم که تکست نمایش بهتری در اسکرین landscape دارد:

See the Pen CSS Units by Ehsan Safari

اغلب مرورگرها نیز از vmin بخوبی پشتیبانی می کنند، حتی Internet Explorer 9

البته استفاده از واحد vmin و واحد vmax در دستگاه های موبایل ممکن است چالش انگیز باشد. زیرا برخی از مرورگرهای موبایل از آن پشتیبانی نمی کنند.

موارد استفاده واحدهای rem و em و vmin و vmax و vh و vw:

در بخش زیر، سناریوهایی را مطرح می کنیم که می توانید واحدهای فوق را مورد استفاده قرار داد و حتی با یکدیگر ترکیب کرد.

در codepen زیر، که نوشته آقای Chris Coyier است، استفاده از rem و em به کمک اسلایدر نمایش داده شده است.

این مثال نشان می دهد که چگونه می توان بوسیله واحدهای نسبی em و rem فونت سایز سفارشی کاربر را روی تمام متون یک صفحه وب اعمال کرد.

See the Pen CSS Units by chris coyier

این مثال با مثال ابتدای مقاله، که درباره سایز button و فونت آن بود، چند تفاوت دارد. استفاده از rem بجای px و عدم تعریف فونت سایز ثابت برای المان روت یا root element

نمایش یک بخش تمام صفحه در یک container:

حالتی را در نظر بگیرید که عرض بخش موردنظر کاملا تحت کنترل ما نیست و عرض parent این بخش محدود است.

در برخی از فریم ورک های css مانند بوت استرپ احتمالا از container برای بخش های مختلف قالب سایت استفاده می شود. از آنجا که container دارای width محدود است، اگر بخواهیم یک بخش تمام صفحه در container داشته باشیم چالش خواهیم داشت.

بعنوان مثال در تصویر زیر اسلایدر list item بصورت full width و سایر بخش ها در بخش محدود container قرار دارند:

مشاهده اسکریپت در codepen:

See the Pen CSS Units by Ehsan Safari

در این مثال به کمک vw توانستیم درون یک container با عرض محدود، یک div بصورت full width نمایش دهیم. سلکتور مهم این مثال .break-out است. در بخش زیر استایل این سلکتور را مشاهده می کنید:

.break-out {
  margin-left: calc(-100vw / 2 + 500px / 2); // 500px because of the max width of the container
  margin-left: calc(-50vw + 50%); // replace 500px with 100%
}

برای مطالعه بیشتر می توانید به وب سایت CSS-Tricks مراجعه کنید.

نشانگر سفارشی scroll توسط vh:

در مثال زیر می خواهیم با استفاده از واحدهای % و vh یک نشانگر یا indicator سفارشی برای اسکرول صفحه طراحی کنیم.

See the Pen CSS Units by Ehsan Safari

نتیجه گیری:

درک و فهم صحیح از واحدهای نسبی در css یا relative units در طراحی ریسپانسیو اهمیت فراوانی دارد. به ما کمک می کند تا طراحی ما برای هر سایز اسکرین و دستگاه واکنش گرا باشد.

تعریف فونت سایزهای نسبی ممکن است دراوایل کار کمی مبهم و عجیب باشد اما بتدریج با کسب تجربه در نحوه استفاده از واحدهای em, rem, vh, vw متوجه خواهید شد که نسبت به فونت سایزهای مطلق پیکسلی بسیار بهتر و کارآمدتر است.

واحدهای viewport به ویژه vh بسیار کاربردی و کار راه انداز هستند. اما باید بدانید که در چه مواقعی و چگونه از vh استفاده کنید و در چه مواردی بهتر است واحدها را بصورت % تعریف کنید.

علاوه بر یونیت هایی که در این مقاله معرفی شد، واحدهای نسبی یا relative دیگری هم وجود دارد که مرورگرها با آنها سازگاری ندارند و پشتیبانی نمی شوند. برای مطالعه بیشتر به سایت mozilla مراجعه شود.

از شما کاربران گرامی آکادمی محتوابان سپاس گزاریم که تا انتهای مقاله همراه ما بودین. لطفا اگر هنوز ابهامی در استفاده از واحدهای نسبی در css دارید سوالات خود را از روش های زیر با ما در میان بگذارید: