پیکسل ها در CSS باید اجتناب شود و من دلیل آن را توضیح خواهم داد

در توسعه وب، انتخاب واحدهای اندازه گیری برای اطمینان از کیفیت و انعطاف پذیری یک سایت یا برنامه بسیار مهم است. اگرچه پیکسل ها (px) مدت‌هاست که به عنوان واحد اندازه‌گیری استاندارد مورد استفاده قرار می‌گرفتند، امروزه بهتر است از جایگزین‌های انعطاف‌پذیرتر مانند واحدهای نسبی اجتناب شود.em، rem، %، vw، vh) یا واحدهای مدرن مانند ch و vmin. در این مقاله بررسی خواهیم کرد که چرا استفاده از پیکسل ها باید محدود باشد، از جمله مثال های عملی و توضیحات برای هر واحد اندازه گیری.

🔗 آیا Techlopment را دوست دارید؟ برای همه جزئیات به سایت مراجعه کنید!

1. مقیاس پذیری ضعیف در سراسر دستگاه ها

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

مثال عملی: فرض کنید یک ظرف با عرض تعریف شده در پیکسل داریم:

.container {
  width: 300px;
}

در یک صفحه نمایش کوچک، مانند تلفن هوشمند، این ظرف ممکن است خیلی بزرگ باشد. با استفاده از درصد % در عوض:

.container {
  width: 50%;
}

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

2. کاهش دسترسی

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

مثال عملی: تعریف کردن font-size در پیکسل:

p {
  font-size: 16px;
}

کاربران نمی توانند متن را با استفاده از تنظیمات مرورگر افزایش یا کاهش دهند. در عوض، با استفاده از rem:

p {
  font-size: 1rem;
}

rem بر اساس است font-size از ریشه html عنصر به عنوان مثال، اگر html عنصر دارای الف است font-size از 16px، سپس 1rem برابر با 16px است. این باعث می‌شود طراحی مقیاس‌پذیر باشد، زیرا زمانی که شما آن را تغییر می‌دهید font-size از html، تمام اندازه های تعریف شده در rem بر این اساس به روز می شوند.

html {
  font-size: 18px; /* By changing this value, all the text adapts */
}

p {
  font-size: 1rem; /* Equal to 18px in this case */
}

3. مسائل مربوط به تراکم پیکسلی (DPI).

دستگاه های مدرن، مانند گوشی های هوشمند با نمایشگرهای با چگالی بالا (شبکیه) پیکسل ها را متفاوت از نمایشگرهای سنتی نمایش می دهند. این می تواند عناصر تعریف شده با پیکسل را بسیار کوچک یا خواندن آنها را دشوار کند.

مثال عملی: یک دکمه تعریف شده در پیکسل:

button {
  width: 100px;
  height: 30px;
}

این ممکن است در یک دستگاه با تراکم پیکسل بالا کوچک به نظر برسد، بهتر است از آن استفاده کنید em:

button {
  width: 10em;
  height: 3em;
}

em یک واحد نسبی بر اساس اندازه فونت عنصر والد است. اگر font-size از عنصر والد 16 پیکسل است، سپس 1em برابر با 16 پیکسل است. با استفاده از em، اندازه دکمه به صورت پویا با زمینه ای که در آن قرار می گیرد تطبیق می یابد.

زمینه مثال:

.parent {
  font-size: 20px;
}

button {
  width: 10em; /* Equal to 200px (20px * 10) */
  height: 3em; /* Equal to 60px (20px * 3) */
}

4. عدم سیالیت در چیدمان های پاسخگو

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

یک مثال عملی: یک طرح با عرض ثابت:

.container {
  width: 800px;
}

در صفحه نمایش های کوچک بسیار عریض خواهد بود. در این موارد باید از واحدهای مبتنی بر viewport (پنجره قابل مشاهده مرورگر) مانند استفاده کنید vw:

.container {
  width: 80vw; /* 80% of the viewport width */
}

vw نشان دهنده 1٪ از عرض پنجره دید (پنجره قابل مشاهده مرورگر). به عنوان مثال، اگر عرض Viewport 1000px باشد، 1vw برابر با 10px است. این باعث می شود عناصر متناسب با عرض صفحه نمایش باشند.

5. پشتیبانی بهتر از طرح های تطبیقی ​​و روان

واحدهای نسبی به شما این امکان را می‌دهند که نسبت‌های ثابتی را حفظ کنید و طرح‌بندی‌هایی ایجاد کنید که به‌صورت پویا سازگار شوند.

یک مثال عملی: تعیین اندازه متن در پیکسل می تواند طراحی شما را ناسازگار کند:

h1 {
  font-size: 24px;
}

p {
  font-size: 16px;
}

اگر پایه font-size تغییرات، این ابعاد ثابت می ماند. با استفاده از rem در عوض:

h1 {
  font-size: 1.5rem; /* 1.5 times the size of the base font */
}

p {
  font-size: 1rem; /* Equal to the base font size */
}

با استفاده از واحدهای نسبی مانند rem، حتی با تغییر نسبت ها ثابت می ماند font-size از html عنصر

نمونه های ترکیبی از واحدهای انعطاف پذیر

برای یک چیدمان کاملاً تطبیقی، می‌توانیم واحدهای نسبی و مبتنی بر viewport را ترکیب کنیم.

مثال عملی: بیایید یک ظرف و متنی با طراحی سیال تعریف کنیم:

html {
  font-size: 16px; /* Base font */
}

.container {
  width: 90%;
  max-width: 1200px;
  padding: 2rem;
}

h1 {
  font-size: 2rem; /* Twice the base font */
}

p {
  font-size: 1rem;
  line-height: 1.5; /* Improves readability */
}

توضیح واحدهای مورد استفاده:

• %: چیدمان را با تطبیق با عرض ظرف اصلی سیال می کند.
• rem: امکان مقیاس بندی متناسب با اندازه فونت پایه را می دهد.
• line-height: به عنوان یک عدد نسبی (1.5) تعریف می شود، به حفظ فاصله خطوط خوانا بدون توجه به font-size.

در نظر داشته باشید

اجتناب از پیکسل ها در شیوه نامه های CSS، دسترسی، مقیاس پذیری و انعطاف پذیری طراحی را بهبود می بخشد. جابجایی به واحدهای نسبی یا مبتنی بر viewport به ایجاد تجربیات کاربر روان که برای طیف وسیعی از دستگاه‌ها مناسب است، کمک می‌کند. امیدوارم با مثال های کاربردی و توضیحات ارائه شده، درک چگونگی استفاده از این واحدها برای بهبود پروژه های وب خود برای شما آسان تر باشد.

من را دنبال کنید #تکنولوژی

سایت رسمی: www.techelopment.it
رسانه: @techelopment
توسعه دهنده: فناوری
فیس بوک: فناوری
اینستاگرام: @techelopment
X: فن آوری
Bluesky: @techelopment
تلگرام: @techelopment_channel
یوتیوب: @techelopment
واتساپ: فناوری