واحدهای CSS
دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 18 بهمن 1399واحدهای CSS به مقادیری که خصوصیات قبول می کنند اطلاق می شود. خصوصیات طیف وسیعی از ارزش مانند درصد را می گیرند: واحدهای نسبی قابل انعطاف و واحدهای مطلق مانند پیکسل ها که همیشه یکسان هستند.
استفاده از واحدهای CSS مطلق و نسبی
واحدهای CSS به مقادیری که خصوصیات قبول می کنند اطلاق می شود. خصوصیات طیف وسیعی از ارزش مانند درصد را می گیرند: واحدهای نسبی قابل انعطاف و واحدهای مطلق مانند پیکسل ها که همیشه یکسان هستند.
استفاده از واحدهای CSS
اکثر خصوصیات CSS مقادیر خاصی مانند درصد ، پیکسل ، سانتی متر یا سایر واحدها را می پذیرند. درصد با توجه به عنصر والد ، اندازه قلم ، عرض یا ویژگی دیگری را محاسبه می کند. بعلاوه ، برخی از عناصر به واحدهای CSS ، فقط به اعداد (به عنوان مثال تیرگی) نیاز ندارند.
طول های نسبی
واحدهای طول نسبی مانند نسبت به سایر عناصر یا تنظیمات. به عنوان مثال ، CSS em نسبت به اندازه قلم عنصر والد است.
چنین واحدهایی برای اطمینان از مقیاس بندی عناصر خاص با سایر اجزای یک صفحه مفید هستند. برای کنترل ارتفاع و عرض نیز می توانید از واحدهای نسبی استفاده کنید.
| Description | Unit |
| نسبت به اندازه قلم عنصر والد (3em یعنی 3 برابر اندازه قلم فعلی) | em |
| نسبت به ارتفاع x قلم فعلی (به ندرت استفاده می شود) | ex |
| نسبت به عرض 0 (صفر) | ch |
| نسبت به اندازه قلم عنصر ریشه (html) | rem |
| نسبت به نمای دید * عرض 1٪ | vw |
| نسبت به نمای نمای * 1٪ ارتفاع | vh |
| تقریباً به ابعاد کوچکتر 1٪ ویوپورت | vmin |
| نسبت به 1٪ بعد بزرگتر viewport | vmax |
طول های مطلق
واحدهای CSS مطلق به واحدهایی گفته می شود که همیشه یکسان باشند. آن ها نسبت به سایر عناصر یا اجزای یک صفحه نیستند.
| Description | Unit |
| سانتی متر | cm |
| میلی متر | mm |
| اینچ (2.54 سانتی متر = 96 پیکسل = 1 اینچ) | in |
| پیکسل (1 / 96th of 1in = 1px) | *px |
| امتیاز (1/72 از 1 اینچ = 1 واحد) | pt |
| پیکاس (12 عدد = 1 عدد) | pc |
Em در مقابل rem
CSS em و rem دو واحد نسبی هستند که می توانید برای اندازه گیری عناصر استفاده کنید. تفاوت اصلی این دو واحد در نسبت آن ها با یکدیگر است. em نسبت به اندازه قلم والدین و re نسبت به اندازه قلم ریشه است.
بنابراین ، Rem اندازه پیکسل را با توجه به عنصر <html> تعیین می کند. اندازه عنصر با rem در عدد متصل به واحد ضرب می شود.
هنگام تبدیل CSS به مقدار px ، اندازه نهایی در اندازه قلم عنصر والد ضرب می شود.
توجه: تبدیل از px به rem مانند این اتفاق می افتد – 20px 1.25rem است (وقتی اندازه قلم root 16px باشد). وقتی px را به واحد em تبدیل کنیم ، می توانیم عنصر والد را با اندازه قلم 15px در نظر بگیریم. سپس ، 20px 1.333em خواهد بود.
در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.
این مقاله چقدر براتون مفید بود؟