تا حالا شده به آن فکر کردن و اندیشیدن کردن و اندیشیدن کنید که بهتر می باشد از کدام یک از واحدهای CSS جهت نوشتن media query ها بهره بری و استفاده کنید؟ جهت من خیلی پیش آمده می باشد. ولی دائما تنبلی و همچنین پشت گوش انداختن موضوع باعث می شد تا کاری در موردش انجام ندهم. ولی باید توجه داشت دائما می دانستم که یک مشکلاتی مثلا با px وجود داشته می باشد و همچنین em آن هم معظلات و مسائل و مشکلات را ندارد.

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

پیشنیازها

مواد مورد بهره بری و استفاده و نیاز ضروری و همچنین طرح آزمایش

( یاد آزمایشگاه های دانشگاه بخیر چقدر گریز و فرار می کردیم…… :))) ……….. آها ببخشید منظورم اینه چقدر لذت داشت انجام آزمایش و همچنین پی بردن به نتایج زیبای علمی )

در اینجا سه عنصر جهت آزمایش, زیر هم قرار می دهیم و همچنین به هر کدام یک رنگ پس باره خاص می دهیم. عناصر را به ترتیب جهت بررسی کردن px و همچنین em و همچنین rem در نظر می گیریم:

.pixel  background: red; 
.em  background: green; 
.rem  background: blue; 

حال جهت هر یک از عناصر یک مدیا کوئری آزمایشی با واحد مخصوص به خود می نویسیم. در اینجا عرض مورد آزمایش را ۴۰۰px در نظر می گیریم:

زیرا و به درستی که شرایط ایده آل می باشد پس ۱em و همچنین ۱rem هر دو برابر با ۱۶px خواهند بود پس با خیال راحت:

.pixel 
background: red;  
@media (min-width: 400px) 
opacity: 0.5



.em 
background: green;  
/* ۴۰۰ ÷ ۱۶ = ۲۵ */
@media (min-width: 25em) 
opacity: 0.5



.rem 
background: blue;  
/* ۴۰۰ ÷ ۱۶ = ۲۵ */
@media (min-width: 25rem) 
opacity: 0.5

به عنوان آزمایش پایه بایستی و حتما ببینیم تا مقدار و اندازه و میزان شفافیت هر سه عنصر در زمانی که عرض نرم افزار مرورگر اینترنتی به ۴۰۰ پیکسل می رسد کم می می شود یا نه؟

از آنجایی که تمام عناصر تغییر شفافیت را در عرض ۴۰۰ پیکسل داشتند پس مطمئن می شویم که شرایط ایده آل می باشد و همچنین مقادیر واحدهای نسبی درست در نظر گرفته شده بودند.

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

شرایط غیر ایده آل چیست؟

1. font-size عنصر ریشه یا آن هم html تغییر کند.
2. کاربر نرم افزار مرورگر اینترنتی خود را zoom کند.
3. کاربر از طریق تنظیمات هسته نرم افزار مرورگر اینترنتی مقدار و اندازه متن را تغییر دهد ( چطوری؟ )

 
حال به بررسی کردن آزمایش مطرح شده در هر یک از آن شرایط می پردازیم:

تغییر font-size عنصر html

آن سناریو خیلی رایج می باشد پس به عنوان اولین آزمایش آن هم را بررسی کردن می کنیم. در اینجا مقدار و اندازه فونت عنصر html را به %۲۰۰ افزایش می دهیم:

html  
/* مشخص کردن مقدار و اندازه فونت مبنا */
font-size: 200% 

بنابراین در حال حاظر ۱em و همچنین ۱rem برابر با ۳۲px خواهند بود, پس در صورتی که آن بحث و داستان بر روی شرط مدیا کوئری نیز تاثیر بگذارد بایستی و حتما تغییر شفافیت عناصر در مقدار و اندازه صفحه ۸۰۰ پیسکل اتفاق بیافتد. ولی…

تست زیر مرتبط به کروم, فایرفاکس و همچنین اینترنت اکسپلورر ۱۱ می باشد:
 

 

همانطور که دیدن می کنیم تغییر شفافیت در آن هم ۴۰۰ پیسکل اتفاق افتاد. دلیل آن امر هم واضح می باشد:

زمانی که می گوییم em و همچنین rem از عناصر پدرشان و همچنین html تاثیر می پذیرند به آن خاطر می باشد که آن واحدها را در ویژگی های متنوع و گوناگون و مختلف CSS و همچنین یا در خود font-size یک عنصری که زیر مجموعه عناصر دیگر و همچنین html می باشد, بهره بری و استفاده می کنیم. پس طبیعی می باشد که em و همچنین rem در آن هم جایگاه از تغییر عناصر اجداد تاثیر بپذیرند. ولی باید توجه داشت هنگام و زمانی که از em و همچنین rem در شرط مدیا کوئری بهره بری و استفاده می کنیم, آیا منطقی می باشد که از مقدار و اندازه فونت عنصری تاثیر قبول کند؟ آیا مدیا کوئری فرزند عنصری دیگر می باشد؟

نه

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

ولی باید توجه داشت زمانی که همین آزمایش در نرم افزار مرورگر اینترنتی سافاری و همچنین ورژن و نسخه گوشی موبایل آن هم انجام شد پس نتیجه آن می شود که چیز غیره ای بود:

همانطور که دیدن می کنیم در مورد rem, عنصر در مقدار و اندازه نرم افزار مرورگر اینترنتی ۸۰۰ پیسکل عکس العمل نشان داد

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

zoom کردن نرم افزار مرورگر اینترنتی

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

در آن آزمایش بعد از zoom کردن نرم افزار مرورگر اینترنتی, شروع به تغییر مقدار و اندازه نرم افزار مرورگر اینترنتی می کنیم تا پس نتیجه آن می شود که را دیدن کنیم. پس نتیجه آن می شود که زیر مرتبط به مرورگرهای کروم, فایرفاکس و همچنین اینترنت اکسپلورر می باشد:
 

 

ولی باید توجه داشت متاسفانه بار دیگر سافاری پس نتیجه آن می شود که مطلوب را نشان نمی دهد:

پس در پس نتیجه آن می شود که بهره بری و استفاده از px نیز در شرطهای مدیا کوئری مناسب نیست, مگر آنکه سافاری را پشتیبانی نکنید.

به آزمایش آخر رسیدیم…

تغییر مقدار و اندازه فونت نرم افزار مرورگر اینترنتی از طریق تنظیمات آن هم

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

با تغییر مقدار و اندازه فونت از طریق تنظیمات یک بار دیگر آزمایش بر روی مرورگرهای پرکاربرد انجام شده و همچنین پس نتیجه آن می شود که در تمام مرورگرها بصورت زیر می باشد:

بله در آن مورد تمام مرورگرها جهت هر سه واحد به صورت صحیح عکس العمل نشان دادند. البته همانطور که در تصویر دیدن می کنید عنصر مرتبط به px در آن هم ۴۰۰px تغییر شفافیت را داشت ولی باید توجه داشت عناصر مرتبط به em و همچنین rem بعد از ۴۰۰ پیکسل. و همچنین با توجه به بحث هایی که تا در حال حاظر نقل شده دلیل آن اتفاق واضح می باشد: زیرا و به درستی که px از نوع واحدهای مطلق می باشد از چیزی تاثیر نمی پذیرد ولی باید توجه داشت با پهناور و بزرگ کردن مقدار و اندازه فونت نرم افزار مرورگر اینترنتی, em و همچنین rem دیگر ۱۶ پیکسل نخواهند بود و همچنین در عرض بیشتری عکس العمل نشان دادند که دقیقا هردوی آن رفتارها صحیح می باشند.

پس نتیجه آن می شود که آزمایش

همانطور که دیدن کردیم تنها واحدی که به درستی در شرایط و همچنین مرورگرهای متنوع و گوناگون و مختلف پس نتیجه آن می شود که داد, EM بود. البته REM هم تفاوت بسیاری نداشت به غیر از باگی که در سافاری وجود داشت.

در صورتی که باز هم سافاری را نادیده بگیریم تنها مشکلی که پیکسل داشت در آزمایش آخر بود که با توجه به آن مطلب بهتر می باشد px را جهت مدیا کوئری بهره بری و استفاده نکنیم.

پس بهترین انتخاب em خواهد بود.

توجه داشته باشید که Bootstrap جهت مدیا کوئری از px بهره بری و استفاده می کند و همچنین Foundation از em بهره می برد.

 
 
(به گفته کار آزمایشگاهتون رو جلسه بعد یادتون نره )