رفتن به مطلب
برای استفاده از انجمن و عضـویت کلیک کنید.

پست های پیشنهاد شده

MicRo    51

پاسخگو و راهنما

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



 

برای ساختن کامپوننت های مستقل که دوباره قابل استفاده و یا اینکه به راحتی قابل ویرایش باشند, و اینکه بتوانیم با تغییرات کمی به طرح جدیدی از کامپوننت دست پیدا کنیم, به عنوان فقط یکی از نیازها باید از واحدهای نسبی (relative units) مناسب استفاده کنیم.

سوال اینجا است که از کدام یک باید استفاده کرد؟ این سوال چندین سال است که مورد بحث قرار می گیرد و طرفداران هریک از این واحدها به دنبال این هستند که یکی را بر دیگری غالب بدانند.

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

 

EM چیست؟

یک em یک واحد تایپوگرافی است که برابر با font-size کنونی تعیین شده می باشد.

یعنی چه؟ یعنی اگر عنصری دارای اندازه فونت 20px باشد پس 1em=20px است.


h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */

 

به عنوان نمونه برای عنصر h1 چون اندازه فونت 20 پیسکل تعیین شده است پس اگر برای این عنصر از واحد em برای تعیین برخی از ویژگی های آن استفاده کنیم هر em برابر با 20 پیکسل می باشد.
مثال:
 


h1 { 
  font-size: 20px; /* 1em = 20px */
  padding-right: 2em; /* 2em = 2*20 = 40px */
}

 

همانطور که دیدیم برای دانستن اندازه هر em در انتخابگر, به ویژگی font-size رجوع کردیم.
حال اگر این ویژگی برای انتخابگر تعیین نشده بود چه؟

کافی است به ویژگی font-size ***** آن عنصر رجوع کنیم و اگر آن عنصر هم این ویژگی برایش تعیین نشده بود همینطور به بالا حرکت می کنیم تا در اجدادش عنصری پیدا کنیم که ویژگی font-size دارد و اگر در نهایت عنصری پیدا نشد, به عنصر ریشه که همان html است می رسیم و بصورت پیشفرض font-size برای html برابر با 16px می باشد مگر اینکه کاربر از طریق تنظیمات مرورگر این عدد را تغییر دهد. و یا ما در CSS اندازه فونت html را تغییر دهیم.

معمولا کار جالبی نیست که اندازه فونت html را تغییر دهیم, چون با این کار یک حالت پیشفرض را برای مرورگر کاربر تغییر می دهیم. حالتی که شاید کاربر به آن خو گرفته باشد. بهتر است بدانیم اگر font-size را برای html تعیین نکنیم مقدار آن 100% می باشد که همان 16 پیکسل مربوط به تنظیمات مرورگر است.

از em برای تعیین اندازه ویژگی font-size هم می توان استفاده کرد.

h1 { 
  font-size: 2em;
}


اکنون اندازه حقیقی فونت برای انتخابگر h1 چند است؟
با توجه به بحثی که شد دوباره به اندازه فونت عناصر ***** رجوع می کنیم. این بار فرض کنید h1 فرزند header می باشد, داریم:
 


<header>
  <h1>HAVE FUN!</h1>
</header>

 


header {
  font-size: 18px;
}

header h1 { 
  font-size: 2em; /* 2*18 = 36px */
}


اکنون فرض کنید داخل عنصر h1 عنصری دیگر داریم که باید یک مقدار padding داشته باشد, محاسبه مقدار آن بصورت زیر است:
 


header {
  font-size: 18px;
}

header h1 { 
  font-size: 2em; /* 2*18 = 36px */
}

h1 span {
  padding-right: 0.5em; /* 0.5*36 = 18px */
}

همانطور که قبلا گفته شد چون عنصر span در حال حاضر font-size ندارد ما به font-size *****ش رجوع می کنیم.

(توجه داشته باشین که استفاده از نام تگ ها به عنوان انتخابگر روش مناسبی نمی باشد و در اینجا به منظور ساده تر بیان کردن موضوع به این صورت عمل می کنیم. دلیل این مورد هم واضح است چراکه ما اطمینان نداریم که در آینده تگ ها به همین صورت در پروژه بمانند شاید از تگ دیگری استفاده شد و غیره…, نباید استایل ما به این صورت شکننده باشد. ولی ما مطمئن هستیم که نام کلاس ها توسط هیچ تیم دیگری تغییر نخواهد کرد و اگر هم تغییر کند می دانند که باید در استایل هم آن نام را بروز کنند.)

اکثر افرادی که تازه با em آشنا می شوند, کمی برایشان اینکه 1em در مکان های مختلف عددی متفاوت است و باید دنبال حساب کردن آن باشند, گیج کننده و کمی خسته کننده است اما این فقط یک حس اولیه است. چرا که در خیلی مواقع شما نیاز به دانستن اینکه اندازه یک عنصر چند پیکسل است ندارید و مستقیم با خود em به ظاهری که می خواهید می رسید و نکته دیگر اینکه به دلیل فواید زیاد em در زمان پیاده سازی و نگه داری, همیشه با اشتیاق از آن استفاده خواهید کرد.

 

REM چیست؟

rem یا Root EM متولد شده است تا آن محساباتی که در em وجود دارند را نداشته باشد. این واحد تایپوگرافی برابر با font-size ریشه است یعنی همیشه برابر با اندازه فونتی که برای html تعیین می شود می باشد.

پیچیده ترین مورد بالا را این بار با rem می نویسیم.

 


header {
  font-size: 18px;
}

header h1 { 
  font-size: 2rem; /* 2*16 = 32px */
}

h1 span {
  padding-right: 0.5rem; /* 0.5*16 = 8px */
}


همانطور که مشاهده می کنید rem همیشه 16px است, مهم نیست که کجا استفاده می شود و مهم نیست که در اینجا ***** این عناصر اندازه فونت 18px دارد, بلکه همیشه مقدار font-size عنصر html تعیین کننده خواهد بود, که بصورت پیشفرض این مقدار 16 پیکسل است مگر اینکه تغییرش بدهیم.

اگه در انجمن اشتباهی تاپیک بار کردم عذر خواهی میکنم انجمن مناسب تری نیافتم :)

به اشتراک گذاری این ارسال


لینک به ارسال

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری

  • مطالب مشابه

    • توسط zareiali400
      به نام خدا
      ..............
      در مطالب قبل به آبشاری بودن CSS اشاره کردیم در اینجا نحوه کارکرد این آبشار را می آموزیم.
      وظیفه این آبشار در نهایت این است که تعیین کند کدام یک از ویژگی های CSS بر روی یک عنصر HTML اعمال می شوند. شاید بگویید: “خب آنهایی که ما می نویسیم!”
      ولی جالب است بدانید غیر از دستوراتی که ما به عنوان طراح می نویسیم استایل های دیگری هم وجود دارند. که کار این آبشار تعیین اولویت بین این دستورات و در نهایت تعیین دستوری است که به عنصر HTML اعمال می شود.
      سه قدم برای انجام این عملیات وجود دارد که هر کدام از دیگر مفاهیم پایه ای سی اس اس می باشند که باید فرا گرفته شوند:
      1.اهمیت
      2.ارجحیت
      3.ترتیب
      ...........................
      اهمیت
      اهمیت یک دستور CSS به منبعی که از آن می آید بستگی دارد که برای CSS سه منبع متفاوت وجود دارد:
      1. عامل کاربر (user agent)
      یکی از این منابع استایل هایی هستند که مرورگر بصورت پیشفرض بر روی عناصر صفحه اعمال می کند. هر مرورگری استایل های پیشفرض مخصوص به خود را دارد و به همین دلیل است که اگر یک سایت را در مرورگرهای مختلف باز کنیم احتمال دارد تفاوت هایی را احساس کنیم.
      کاربر
      منبع دیگر استایل هایی هستند که کاربر از طریق مرورگرش تعیین می کند. کاربرهایی که خدایی نکرده مشکلات بینایی دارند و نیاز دارند تا فونت ها بزرگتر باشند و یا رنگ قسمت های خاصی متفاوت باشند.
    • توسط علیرضا آه مند
      سلام.
      در این تاپیک یک کتاب آماده کردم که به شما بصورت کامل سی اس اس رو آموزش میده.
      فقط باید بگم که مطالب کتاب فارسی نیست و انگلیسیه.
       
      CSS.pdf
    • توسط alireza.app
      سلام دوستان 
      چطوری قسمت با ما در تماس باشید عکس ها یکی یکی نمایش داده میشن 
      لطفا کد رو برام بفرستین 
       
      جشنواره تابستانی سون لرن
       

    • توسط aliwhawk
      درود.
      دنبال برنامه نویسی هستم که بتونه سایتی مثل پارسکدرز رو اجرا کنه.
      این پروژه درآمد بالایی داره...یعنی آینده داره.
      مثل همین سایتها که روزانه حداقل حداقل 500 هزارتومن درآمد دارن...
      من علی درویشی هستم از سایت آرمکده...ینی طراحی لوگو و یوآی رو خودم کاملا حرفه ای انجام میدم....
      فقط دنبال کسی هستم که قابل اعتماد باشه و بتونه اینکارو خیلی خوب برام انجام بده.
      فکر آیندشو بکنین که چقد درآمد داره.
      من مثل تیم های استارت آپ هستم...اولش بودجه ای ندارم واقعا...ولی درآمدش انقدی بالا هست که چند صد برابر این مبلغ برنامه نویسیو میده.
      ینی میخوام یه تیم تشکیل بدم.
      سپاس
  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

×