تبدیل vw به px Viewport width ↔ Pixels رایگان آنلاین امن

چرا vw را به px تبدیل می‌کنید

یک استایل‌شیت می‌گوید font-size: 5.2vw روی عنوان بخش اصلی، margin-top: 8vw روی یک بخش و width: 42vw روی یک تصویر. این‌ها مقدارهای انعطاف‌پذیرند و نمی‌گویند روی صفحه چه چیزی دیده می‌شود. عنوان روی گوشی چه اندازه است؟ تصویر روی لپ‌تاپ چقدر پهنا دارد؟ آیا حاشیه در 1920 پیکسل درست به نظر می‌رسد؟ برای فهمیدن، vw را به px تبدیل می‌کنید: عدد را در پهنای پنجره ضرب می‌کنید، بر صد تقسیم می‌کنید و پاسخ را در واحدی می‌خوانید که طراحان، آزمایشگران و مشتریان به کار می‌برند. این همان کاری است که هنگام بازبینی کد روان، مقایسهٔ یک ساخت با طرح اولیه یا توضیح دادن به همکار انجام می‌دهید که چرا عنوان روی صفحهٔ باریک کوچک به نظر می‌رسد.

آنچه این تبدیل را با rem یا em متفاوت می‌کند این است که ضریب خودِ پنجره است. یک vw برابر یک‌صدم پهنای ناحیهٔ دید است، پس 5.2vw در پنجره‌ای به پهنای 1000 px برابر 52 px است، در گوشی با پهنای 360 px برابر 18.7 px و در مانیتور پهن 1920 برابر 99.8 px. مقدار پیش‌فرضی برای تکیه کردن وجود ندارد و پهنا وقتی خواننده گوشی را بچرخاند یا پنجره را بکشد عوض می‌شود. پس مبدل پهنا را می‌پرسد، کنار پاسخ نشان می‌دهد و از 1440 px شروع می‌کند، پهنایی که طرح‌ها اغلب با آن کشیده می‌شوند.

محاسبه در مرورگر شما انجام می‌شود و چیزی بارگذاری نمی‌شود. در ادامه فرمول، آنچه تبدیل نگه می‌دارد و آنچه نمی‌تواند، نحوهٔ خواندن یک استایل‌شیت روان در چند پهنا، تلهٔ نوار پیمایش، مشکل دسترسی‌پذیری متن فقط با vw و چند عادت برای قابل‌فهم نگه داشتن کد روان را می‌بینید.

فرمول و پهنا

px برابر است با vw ضرب در پهنا، تقسیم بر صد

فرمول px = vw × width ÷ 100 است. در پهنای 1440 px، عدد 10 vw به 144 px، عدد 5 vw به 72 px و عدد 1.667 vw به 24 px بدل می‌شود. صفحه پهنا را کنار نتیجه چاپ می‌کند، پس خطی مانند 10 vw = 144 px (1440 px) به شما می‌گوید چه فرض شده است. برای دیدن صفحهٔ دیگر، پهنا را عوض کنید و نتیجه را دوباره بخوانید.

کدام پهنا را امتحان کنیم

مجموعهٔ مفید برای بررسی این است: 360 یا 390 برای گوشی‌ها، 768 برای تبلت عمودی، 1024 برای لپ‌تاپ کوچک، 1440 برای لپ‌تاپ یا رایانهٔ رومیزی معمول و 1920 برای مانیتور تمام‌اچ‌دی. هر کدام را در فیلد پهنا بنویسید و نتیجه را یادداشت کنید. پنج خوانش کل دامنهٔ یک مقدار را نشان می‌دهند و هر حد افراطی به چشم می‌آید.

استفاده از پهنای پنجرهٔ واقعی

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

آنچه تبدیل نگه می‌دارد و آنچه نمی‌تواند

سهم از صفحه را نگه می‌دارد

یک vw برابر یک‌صدم پهنای ناحیهٔ دید است، پس اندازه‌ای که به vw نوشته شود به جای ثابت ماندن با پنجره بزرگ و کوچک می‌شود. مقدار پیکسلی که می‌گیرید همان سهم است که برای یک پهنای مشخص عینی شده.

مقدار پیش‌فرض نمی‌دهد

برخلاف rem، واحد vw پیش‌فرض ندارد. مرورگر وقتی کسی چیزی نگفته باشد به اندازهٔ قلم ریشه 16 px می‌دهد، پس صفحهٔ rem می‌تواند از یک عدد واقعی شروع کند؛ پهنای ناحیهٔ دید همان‌قدر است که پنجرهٔ خواننده پهن است و وقتی گوشی را بچرخاند عوض می‌شود. عدد 1440 px در اینجا پهنایی است که طرح‌ها اغلب با آن کشیده می‌شوند، یک عادت و نه استاندارد. پهنای خودتان را بنویسید.

گرد کردن

ضرب در پهنا و تقسیم بر 100 می‌تواند اعشار بسازد. 6.67 vw در 1440 px برابر 96.048 px است. مرورگرها پیکسل کسری را اداره می‌کنند، اما اگر برای فایل طراحی عدد صحیح لازم دارید، گرد کنید و یادداشت کنید که گرد کردن از شماست.

خواندن یک استایل‌شیت روان

سه پهنا بگیرید و نتیجه‌ها را بنویسید

یک پهنای باریک، یک میانه و یک پهن انتخاب کنید، برای نمونه 375، 1024 و 1920. برای هر مقدار مهم vw در استایل‌شیت، در هر پهنا vw را به px تبدیل کنید و سه عدد را در یادداشتی بنویسید. عنوانی با 5.2 vw به 19.5، 53.2 و 99.8 پیکسل می‌رسد. از این زاویه می‌دانید عنوان در انتهای باریک خوانا است و در انتهای پهن بیش از حد بزرگ نیست.

دنبال clamp بگردید

کد روان خوب دور vw را با clamp(min, preferred, max) محدود می‌کند. اگر clamp(2rem, 1rem + 4vw, 6rem) ببینید، اندازه میان 32 و 96 px رشد می‌کند و در هر دو انتها ثابت می‌ماند. وقتی بخش vw را تبدیل می‌کنید یادتان باشد فقط میانهٔ بازه است و حدها تعیین می‌کنند در لبه‌ها چه می‌شود.

حدهای افراطی را بررسی کنید

پهناهای پرخطر کوچک‌ترین و بزرگ‌ترین‌اند. در 320 px عنوانی با 6 vw برابر 19 px است؛ در 2560 برابر 154 px. اگر هیچ‌کدام قابل‌قبول نباشد و clamp وجود نداشته باشد، استایل‌شیت به حد نیاز دارد.

تله‌های تبدیل vw به px

نوار پیمایش

در مرورگرهای رومیزی، پهنای ناحیهٔ دید که برای vw به کار می‌رود پهنای نوار پیمایش عمودی را هم شامل می‌شود. پس وقتی صفحه پیمایش می‌شود، 100vw اندکی از ناحیهٔ مرئی پهن‌تر است، در بسیاری از سیستم‌ها حدود 15 تا 17 پیکسل. مقدار پیکسلی که حساب می‌کنید پس کمی بزرگ‌تر از پهنای مرئی است که ظاهراً نمایندگی می‌کند. در گوشی‌ها، که نوار پیمایش روی صفحه می‌افتد، این اثر وجود ندارد.

به کار بردن پهنای نادرست

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

اشتباه گرفتن vw با درصد

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

فراموش کردن اینکه متن با vw زوم نمی‌شود

متنی که فقط با vw اندازه گرفته شده وقتی خواننده صفحه را زوم کند واکنش نشان نمی‌دهد، چون پنجره و متن با هم مقیاس می‌گیرند. رهنمودهای دسترسی‌پذیری می‌خواهند متن قابل تغییر اندازه باشد. یک جملهٔ rem اضافه کنید، مانند clamp()، تا متن به زوم هم واکنش نشان دهد.

پرسش‌هایی که مردم پیش از تبدیل می‌پرسند

1 vw چند پیکسل است؟

یک‌صدم پهنای پنجره: 14.4 px در 1440، 10 px در 1000، 3.6 px در 360.

50 vw چند پیکسل است؟

نیمی از پنجره: 720 px در پهنای 1440، 500 px در پهنای 1000.

چرا صفحهٔ من از صفحه‌نمایش پهن‌تر است؟

جعبه‌ای با 100vw در صفحه‌ای که پیمایش می‌شود از ناحیهٔ مرئی پهن‌تر است، چون نوار پیمایش شمرده می‌شود. به جای آن داخل ظرف از 100% استفاده کنید.

آیا vw با درصد یکی است؟

نه. درصد به والد اشاره دارد، vw به پنجره.

آیا عدد من بارگذاری می‌شود؟

نه. حساب در مرورگر شما اجرا می‌شود و چیزی به جایی فرستاده نمی‌شود.

چگونه برگردم؟

با px به vw، که به جای ضرب بر پهنا تقسیم می‌کند.

مقدارهای رایج در پهناهای رایج

یک جدول ذهنی

دانستن چند تکیه‌گاه کمک می‌کند تا پیش از استفاده از مبدل تخمین بزنید. در پهنای 1000 px، هر 1 vw برابر 10 px است که حساب را بدیهی می‌کند: 2.5 vw برابر 25 px و 8 vw برابر 80 px. در 1440 px، هر 1 vw برابر 14.4 px است. در 375 px، هر 1 vw برابر 3.75 px است، پس عنوانی با 8 vw برابر 30 px است. وقتی برای بررسی سریع vw را به px تبدیل می‌کنید، از یکی از این تکیه‌گاه‌ها شروع کنید و مقیاس بدهید.

سه پهنا، یک استایل‌شیت

کارتی با پهنای 80vw، فاصلهٔ 4vw و عنوان 6vw را در نظر بگیرید. در گوشی 375 px آن‌ها به 300 px، 15 px و 22.5 px می‌رسند. در تبلت 768 px، به 614 px، 30.7 px و 46 px. در رایانهٔ رومیزی 1440 px، به 1152 px، 57.6 px و 86.4 px. دیدن هر سه کنار هم فوراً می‌گوید کارت در رومیزی بسیار پهن و عنوان بسیار بزرگ است و احتمالاً پهنای بیشینه و یک clamp می‌خواهید.

فراتر از ناحیهٔ دید

واحدهای ظرف

CSS جدیدتر واحدهایی نسبت به ظرف به جای پنجره ارائه می‌کند، مانند cqw که یک‌صدم پهنای ظرف است. آن‌ها مشکل اجزایی را حل می‌کنند که در نوار کناری باریک قرار می‌گیرند و طوری رفتار می‌کنند که انگار کل پنجره را دارند. اگر از آن‌ها استفاده کنید، حساب مثل vw است و پایه پهنای ظرف است، و می‌توانید با نوشتن آن پهنا از این مبدل استفاده کنید.

ناحیهٔ دید کوچک، بزرگ و پویا

در گوشی‌ها، ناحیهٔ مرئی با کنار رفتن نوار نشانی عوض می‌شود. برای ارتفاع، واحدهای جدیدتر svh، lvh و dvh ناحیهٔ دید کوچک، بزرگ و پویا را توصیف می‌کنند. برای پهنا وضع ساده‌تر است، چون نوار نشانی بر آن اثر نمی‌گذارد و vw پایدار است. این یک دلیل دیگر است که vw برای طراحی روان در موبایل واحد مطمئن‌تری از vh است.

درصد، vw و گرید

پهناهای درصدی از والد پیروی می‌کنند، vw از پنجره، و گرید CSS و فلکس‌باکس از فضای در دسترس. اغلب بهترین چیدمان‌های روان از گرید و درصد برای ساختار و از vw فقط برای حروف و فاصله استفاده می‌کنند، چون این‌ها چیزهایی‌اند که از پیروی مستقیم از صفحه سود می‌برند. وقتی برای بررسی چیدمان vw را به px تبدیل می‌کنید، بپرسید آیا یک ستون گرید همین را محکم‌تر می‌گفت.

توضیح دادن vw به کسانی که CSS نمی‌نویسند

از پنجره به عنوان خط‌کش استفاده کنید

مشتریان و همکاران معمولاً وقتی بگویید یک vw یک درصد پهنای صفحه است ایده را می‌فهمند. عنوانی با 5 vw پنج درصد پهنای صفحه است. سپس دو عدد به آن‌ها نشان دهید: روی گوشی خودشان و روی مانیتور بزرگ اتاق جلسه چه می‌شود. وقتی برای هر دو پهنا vw را به px تبدیل می‌کنید و نتیجه‌ها را بلند می‌گویید، ایدهٔ اندازه‌ای که با صفحه جابه‌جا می‌شود عینی می‌شود.

بگویید چرا طرح ثابت نیست

ذی‌نفعان غیرفنی گاهی می‌پرسند چرا صفحه برای عنوان فقط یک اندازه ندارد. پاسخ این است که صفحه‌ها میان کوچک‌ترین گوشی و بزرگ‌ترین مانیتور هفت یا هشت برابر فرق دارند و اندازهٔ ثابتی که به یکی بخورد برای دیگری غلط است. واحدهای روان پاسخ‌اند و عدد‌های پیکسلی این صفحه نشان می‌دهند صفحه چقدر همان مقدار را تغییر می‌دهد.

این واحدها از کجا آمده‌اند

پیکسل CSS

وقتی نمایشگرها چگالی قابل‌پیش‌بینی نداشتند، صفحه‌ای که با پیکسل‌های واقعی اندازه گرفته می‌شد با تیزتر شدن صفحه‌ها کوچک می‌شد. پس پیکسل CSS به‌عنوان طول مرجع بازتعریف شد: حدود 1/96 اینچ که از فاصلهٔ راحت خواندن دیده شود. این واحدی است که این صفحه پاسخ‌هایش را به آن می‌دهد.

واحدهای ناحیهٔ دید

vw همراه طراحی واکنش‌گرا آمد: یک‌صدم پهنای ناحیهٔ دید، هرچه باشد. کنار rem قرار دارد، که نسبت به اندازهٔ قلم ریشه است، و em که نسبت به عنصر است. برای دیدن اینکه همان مقدار پیکسل در آن واحدها چگونه به نظر می‌رسد، rem را به px تبدیل کنید و مقایسه کنید.

عادت‌هایی که کد روان را قابل‌فهم نگه می‌دارند

مقدارهای پیکسلی را کامنت کنید

خطی مانند font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ چند واژه خرج دارد و خوانندهٔ بعدی را از چند تبدیل نجات می‌دهد.

پهنای طراحی را یک جا نگه دارید

اگر پروژهٔ شما ویژگی سفارشی برای پهنایی دارد که طرح با آن کشیده شده، هر مقدار vw را می‌توان تا آن ردیابی کرد. وقتی برای بازبینی vw را به px تبدیل می‌کنید، می‌دانید از کدام پهنا استفاده کنید.

کم از vw استفاده کنید

فهرست کوتاهی از مقدارهای vw آسان فهمیده می‌شود. استایل‌شیتی که همه‌چیزش به vw است این‌طور نیست. آن را برای حروف نمایشی، فاصله‌های بزرگ و آثار گرافیکی نگه دارید.

وقتی مهم است با دستگاه‌های واقعی آزمایش کنید

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

مبدل‌های مرتبط

همین خانوادهٔ ابزارها تبدیل‌های همسایه را پوشش می‌دهد. برای برگشت به vw، از px به vw استفاده کنید. برای اندازه‌های نسبت به ریشه، px به rem و rem به px هستند، و برای اندازه‌های نسبت به عنصر، px به em و em به px. برای رنگ‌های همان استایل‌شیت، HEX به RGB و RGB به HEX نمادگذاری‌ها را اداره می‌کنند.

یک مثال کاربردی

فرض کنید آزمایشگری گزارش می‌دهد عنوان بخش اصلی روی گوشی کوچک سخت خوانده می‌شود. استایل‌شیت font-size: 5.2vw را بدون هیچ حدی می‌گوید. شما در 360 vw را به px تبدیل می‌کنید و 18.7 px می‌خوانید، در 768 مقدار 39.9 px و در 1440 مقدار 74.9 px. در انتهای باریک عنوان کمی بزرگ‌تر از متن بدنه است و دیگر مثل عنوان خوانده نمی‌شود. clamp(2rem, 1rem + 4vw, 5rem) را پیشنهاد می‌کنید که در باریک‌ترین پهنا 32 px، در 768 حدود 51 px و در پهن‌ترین 5rem، یعنی 80 px، می‌دهد. آزمایشگر تأیید می‌کند اکنون خوب خوانده می‌شود و عنوان هنوز مقیاس می‌گیرد.

یک فهرست بررسی کوتاه

پیش از تبدیل

پهناهایی را که برایتان مهم‌اند انتخاب کنید، از ابزارهای توسعه‌دهنده یا از فهرست دستگاه‌های هدفتان.

هنگام تبدیل

مقدار vw و هر پهنا را به نوبت بنویسید و پیکسل‌هایی را که کنار پایه نشان داده می‌شود یادداشت کنید.

پس از تبدیل

به حدهای افراطی نگاه کنید. اگر اندازه‌ای در هر انتها بیش از حد کوچک یا بزرگ است، با clamp() حد اضافه کنید.

اشتباه‌های رایج

فرض کردن یک پاسخ

یک مقدار vw در هر پهنا اندازهٔ پیکسلی متفاوتی دارد. با هر عدد پهنا را هم بگویید.

فراموش کردن نوار پیمایش

100vw آن را شامل می‌شود، پس جعبه‌ای تمام‌پهنا می‌تواند سرریز کند.

اندازه دادن متن بدنه فقط با vw

زوم نمی‌شود. یک جملهٔ rem و حدها اضافه کنید.

عددهای شما روی دستگاه شما می‌مانند

محاسبه محلی انجام می‌شود. مقدارهای شما را مرورگر خودتان به کار می‌برد و چیزی به جایی فرستاده نمی‌شود. بعداً چیزی برای حذف نیست و حسابی برای ساختن وجود ندارد. این راه ساده برای تبدیل vw به px است.

خلاصه

برای تبدیل vw به px در اینجا، اندازه را به vw و پهنای پنجره را بنویسید و نتیجه را فوراً به پیکسل بخوانید، با فرمول px = vw × width ÷ 100. پهنا از 1440 px شروع می‌شود، پهنایی که طرح‌ها اغلب با آن کشیده می‌شوند، اما این یک عادت است و نه استاندارد، پس پهنای خودتان را بنویسید. این تبدیل سهم از صفحه را نگه می‌دارد: یک vw یک‌صدم پهنای ناحیهٔ دید است، پس اندازه‌ای به vw با پنجره بزرگ و کوچک می‌شود. برخلاف rem، واحد vw پیش‌فرض ندارد، چون ناحیهٔ دید همان‌قدر است که پنجرهٔ خواننده پهن است. برای متن، vw را با rem داخل clamp() ترکیب کنید تا خوانا و قابل‌زوم بماند. چیزی بارگذاری نمی‌شود.