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

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

طراحی طرح اولیه‌ای می‌فرستد که با عرض 1440 px کشیده شده، با عنوان اصلی 96 px و فاصلهٔ بخش 72 px. در وب واقعی صفحه روی گوشی با 360 px، روی تبلت با 820 px و روی نمایشگر بزرگ با 2560 px دیده می‌شود و طراح می‌خواهد عنوان در هر کدام تناسبش را با صفحه نگه دارد. واحدی که برای این ساخته شده عرض دید، یعنی vw، است و راه رسیدن به آن از طرح اولیه تبدیل px به vw است: مقدار پیکسلی را بر عرضی که طراحی با آن کشیده شده تقسیم می‌کنید و در صد ضرب می‌کنید. عنوان 96 px روی بوم 1440 px برابر 6.67 vw است و از آن پس همیشه 6.67 درصد از هر صفحه‌ای است.

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

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

فرمول و عرض

vw برابر px تقسیم بر عرض، ضرب در صد است

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

1440 از کجا می‌آید

1440 px در اینجا عرضی است که طراحی‌ها اغلب با آن کشیده می‌شوند، یک عادت و نه یک استاندارد. بعضی تیم‌ها با 1280 می‌کشند، بسیاری با 1920 و طراحی‌های موبایل با 375 یا 390. پاسخ درستی وجود ندارد، فقط عرضی هست که فایل طراحی شما به کار می‌برد. عرض خودتان را تایپ کنید: تبدیل فقط به اندازهٔ عرضی که به آن می‌دهید خوب است.

استفاده از عرض خود طراحی

اگر طرح اولیه با 1920 px کشیده شده، 1920 را تایپ کنید و همان عنوان 96 px می‌شود 5 vw. اگر px را با عرض نادرست به vw تبدیل کنید، صفحه در یک اندازهٔ صفحه درست و در بقیه نادرست به نظر می‌رسد، که وقتی نمی‌دانید باید دنبالش بگردید اشکالی گیج‌کننده است.

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

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

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

نمی‌تواند پیش‌فرض بدهد

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

گرد کردن

تقسیم بر 1440 برای بیشتر اندازه‌ها اعشار بلند می‌دهد. مقداری مثل 6.6667 vw در شیوه‌نامه اشکالی ندارد، اما می‌توانید به 6.67 یا 6.7 گرد کنید بی‌آنکه تغییری دیده شود. دو یا سه رقم بعد از ممیز نگه دارید؛ بیشتر نویز است.

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

عنوان‌های اصلی و متن نمایشی بزرگ

عنوانی که باید در هر دستگاه سهم معینی از صفحه را پر کند کاربرد کلاسیک است. در عرض گوشی عنوان ثابت 96 px سرریز می‌کند؛ با vw همراه صفحه کوچک می‌شود و در یک خط می‌ماند.

بخش‌های تمام‌عرض

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

آثار هنری که باید شکلشان را نگه دارند

تصویرهای اصلی، تصویرسازی‌ها و شکل‌های تزئینی که با vw اندازه داده شوند تناسبشان با پنجره را نگه می‌دارند، پس ترکیب‌بندی با تغییر صفحه از هم نمی‌پاشد.

متن سیال با محدودیت

vw همراه با clamp() متنی می‌دهد که میان یک کمینه و یک بیشینه به‌نرمی رشد می‌کند. این تکنیکی است که شیوه‌نامه‌های امروزی برای عنوان‌ها به کار می‌برند و در ادامه توضیح داده می‌شود.

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

متن اصلی با vw خالص

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

حدهای بسیار کوچک و بسیار بزرگ

در عرض 320 px عنوان 6.67 vw برابر 21 px است که ممکن است خیلی کوچک باشد. در عرض 2560 px برابر 171 px است که عظیم است. بدون محدودیت، تناسبی که در 1440 درست به نظر می‌رسید در لبه‌ها می‌تواند پوچ باشد.

نوار پیمایش

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

تکنیک clamp

گذاشتن کف و سقف

تابع CSS به نام clamp(min, preferred, max) یک کمینه، یک مقدار ترجیحی و یک بیشینه می‌گیرد. برای متن، کمینه و بیشینه را با rem و مقدار ترجیحی را با vw به علاوهٔ یک جملهٔ rem بنویسید: font-size: clamp(2rem, 1rem + 4vw, 6rem). اندازه با پنجره میان 32 و 96 px رشد می‌کند و هیچ‌گاه از هیچ‌کدام از دو سر فراتر نمی‌رود. چون بخشی از آن با rem است، متن همچنان تنظیمات خواننده را رعایت می‌کند.

چگونه جملهٔ میانی را بسازیم

دو عرض صفحه و اندازه‌هایی را که در هر کدام می‌خواهید انتخاب کنید. مثلاً 32 px در عرض 360 px و 96 px در عرض 1440 px. شیب برابر است با (96 − 32) ÷ (1440 − 360) = 0.0593 px به ازای هر px عرض، یعنی 5.93 vw، و عرض از مبدأ 32 − 0.0593 × 360 = 10.67 px است، حدود 0.667 rem. پس جملهٔ ترجیحی 0.667rem + 5.93vw است. مبدل در بخش vw کمک می‌کند و یک دقیقه محاسبه بقیه را انجام می‌دهد.

چرا این تعادل درست است

با clamp هم رفتار سیالی را که طراح‌ها می‌خواهند می‌گیرید و هم دسترس‌پذیری‌ای که خواننده‌ها لازم دارند. پاسخ مشکلی است که در بالا شرح داده شد و دلیل اینکه بیشتر شیوه‌نامه‌های امروزی vw را فقط داخل clamp به کار می‌برند.

چگونه اینجا px را به vw تبدیل کنیم

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

اندازه را بر حسب پیکسل در فیلد اول وارد کنید. اعشار پذیرفته می‌شود.

عرض طراحی را تعیین کنید

اگر عرض طرح اولیهٔ شما همین است آن را روی 1440 بگذارید. اگر نیست، عوضش کنید. نتیجه همان‌طور که تایپ می‌کنید به‌روز می‌شود.

مقدار vw را کپی کنید

رقم را با واحدش در CSS خود به کار ببرید، مثل font-size: 6.67vw. برای متن، آن را همراه با محدودیت‌های rem داخل clamp() بگذارید.

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

پیکسل CSS

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

واحدهای دید

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

تله‌ها هنگام تبدیل px به vw

استفاده از عرض طراحی نادرست

رایج‌ترین خطا. اگر طرح اولیهٔ شما 1920 عرض دارد و با 1440 تبدیل می‌کنید، هر اندازه یک‌سوم خطا دارد. عرض قاب را در ابزار طراحی خود تأیید کنید.

فراموش کردن طراحی موبایل

بسیاری از تیم‌ها دو طرح اولیه دارند، یکی برای دسکتاپ و یکی برای گوشی. عنوانی که در اولی 96 px و در دومی 40 px است یک مقدار vw نیست. دو عرض، دو تبدیل و یک clamp برای وصل کردن آن‌ها به کار ببرید.

گذاشتن کل صفحه با vw

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

نادیده گرفتن مشکل بزرگ‌نمایی

صفحه را با بزرگ‌نمایی مرورگر روی 200 درصد آزمایش کنید. اگر متن بزرگ نشد، اندازه‌ها به یک جملهٔ rem نیاز دارند.

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

100 px چند vw است؟

در عرض طراحی 1440 px، حدود 6.94 vw.

بهترین عرض طراحی برای استفاده چیست؟

همان که طرح اولیهٔ شما با آن کشیده شده. پیش‌فرض همگانی وجود ندارد.

آیا vw از rem بهتر است؟

کارهای متفاوتی می‌کنند. rem از اندازهٔ متن خواننده پیروی می‌کند؛ vw از پنجره. هر کدام را برای کاری که در آن خوب است به کار ببرید.

آیا می‌توانم vw را برای اندازهٔ قلم به کار ببرم؟

بله، اما آن را داخل clamp() با محدودیت‌های rem بگذارید تا متن خوانا بماند و همچنان بتوان بزرگ‌نمایی‌اش کرد.

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

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

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

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

انتخاب هوشمندانه هنگام تبدیل px به vw

تصمیم بگیرید چه چیزی باید با صفحه مقیاس شود

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

در مرحلهٔ طراحی تبدیل کنید

اگر هنگام خواندن طرح اولیه px را به vw تبدیل کنید، بی‌درنگ می‌بینید کدام مقدارها نامعمول درمی‌آیند و می‌توانید از طراح مقدارهای مرتب‌تری بخواهید. عنوانی که 6.6667 vw درمی‌آید گفتگو دربارهٔ 6.5 یا 7 کردن آن را دعوت می‌کند.

عرض را ثبت کنید

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

از طرح اولیه تا شیوه‌نامهٔ سیال

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

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

قاب موبایل را جداگانه بررسی کنید

اگر طرح اولیهٔ گوشی هست، همان عنصرها را در عرض آن بخوانید. عنوان 96 px در قاب 1440 px و 40 px در قاب 375 px با هیچ مقدار vw یگانه‌ای جور نمی‌شود، که نشانه‌ای برای استفاده از clamp است: اندازهٔ گوشی کف می‌شود، اندازهٔ دسکتاپ سقف و جملهٔ vw کار میان آن‌ها را می‌کند. وقتی برای هر قاب px را به vw تبدیل می‌کنید، دو عدد شیب را تعریف می‌کنند.

در سه عرض بازبینی کنید

صفحهٔ تمام‌شده را تقریباً در 360، 820 و 1440 پیکسل و یک بار در 2560 ببینید. چیدمان سیال در عرض طرح اولیه به‌آسانی درست درمی‌آید و جاهای دیگر ظریف نادرست است، و گذری کوتاه در این عرض‌ها بیشتر مشکل‌ها را پیش از بازدیدکننده پیدا می‌کند.

واحد را از متن بلند دور نگه دارید

خط‌های متن خواندنی بهتر است با rem اندازه بگیرند و حداکثر طول خطی حدود 60 تا 75 نویسه داشته باشند. واحد دید را برای متن نمایشی و فاصله به کار ببرید و بگذارید متن خواندنی ثابت بماند.

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

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

یک مثال عملی

فرض کنید صفحهٔ فرودی با 1440 px طراحی شده، با عنوان اصلی 96 px و شکاف 72 px بالای آن. 96 را تایپ می‌کنید و 6.667 vw می‌خوانید، 72 را تایپ می‌کنید و 5 vw می‌خوانید. در پنجرهٔ 1000 px عنوان 66.7 px و شکاف 50 px است، متناسب. اما روی گوشی با عرض 360 px عنوان 24 px می‌شود که کوچک‌تر از چیزی است که می‌خواهید، پس عنوان را به صورت clamp(2.25rem, 1rem + 5vw, 6rem) می‌نویسید که کف 36 px و سقف 96 px می‌دهد و خوانا و قابل بزرگ‌نمایی می‌ماند. شکاف، که متن ندارد، با vw ساده می‌ماند.

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

پیش از تبدیل

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

هنگام تبدیل

مقدار پیکسلی و عرض طراحی را تایپ کنید و رقم vw را با واحدش کپی کنید.

پس از تبدیل

پنجره را از عرض گوشی تا نمایشگر عریض تغییر اندازه دهید و صفحه را روی 200 درصد بزرگ‌نمایی کنید. هر جا که حدها نادرست به نظر می‌رسند با clamp() محدودیت اضافه کنید.

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

فرض اینکه 1440 استاندارد است

فقط یک عادت است. عرض خودتان را به کار ببرید.

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

نمی‌توان آن را بزرگ‌نمایی کرد. یک جملهٔ rem و محدودیت اضافه کنید.

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

100vw در صفحه‌های دسکتاپی که پیمایش می‌شوند عریض‌تر از ناحیهٔ دیده‌شده است.

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

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

خلاصه

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