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 এবং ফুল-HD মনিটরের জন্য 1920। প্রস্থের ঘরে প্রতিটি টাইপ করুন আর ফল টুকে রাখুন। পাঁচটি পাঠ আপনাকে একটি মানের পুরো পরিসর দেখায়, আর যেকোনো চরম মান লাফিয়ে ওঠে।

প্রকৃত উইন্ডোর প্রস্থ ব্যবহার

আপনার ব্রাউজারের ডেভেলপার টুলে ডিভাইস টুলবার উইন্ডোর প্রস্থ পিক্সেলে দেখায়। পাতা কী করে আর কনভার্টার কী বলে তা তুলনা করতে সেই সংখ্যা ব্যবহার করুন। মিললে স্টাইলশিট সম্পর্কে আপনার পাঠ ঠিক।

রূপান্তর কী রাখে আর কী পারে না

এটি পর্দার ভাগ রাখে

এক vw ভিউপোর্ট প্রস্থের শততমাংশ, তাই vw-তে লেখা একটি মাপ একই জায়গায় না থেকে উইন্ডোর সঙ্গে বাড়ে ও কমে। আপনি যে পিক্সেল মান পান তা একটি নির্দিষ্ট প্রস্থের জন্য মূর্ত করা সেই ভাগ।

এটি ডিফল্ট দিতে পারে না

rem-এর বিপরীতে vw-র কোনো ডিফল্ট নেই। কেউ অন্যথা না বললে ব্রাউজার রুট ফন্টের মাপ দেয় 16 px, তাই একটি rem পাতা একটি আসল সংখ্যা থেকে শুরু করতে পারে; ভিউপোর্ট প্রস্থ কেবল পাঠকের উইন্ডো যত চওড়া ততটাই, আর তারা ফোন ঘোরালে তা বদলায়। এখানকার 1440 px এমন একটি প্রস্থ যেখানে ডিজাইন প্রায়ই আঁকা হয়, একটি অভ্যাস, মানদণ্ড নয়। আপনারটি টাইপ করুন।

গোল করা

প্রস্থ দিয়ে গুণ করে 100 দিয়ে ভাগ করলে দশমিক আসতে পারে। 1440 px-এ 6.67 vw হলো 96.048 px। ব্রাউজার ভগ্নাংশ পিক্সেল সামলায়, কিন্তু ডিজাইন ফাইলের জন্য পূর্ণসংখ্যা লাগলে গোল করুন এবং টুকে রাখুন গোল করাটি আপনার।

একটি তরল স্টাইলশিট পড়া

তিনটি প্রস্থ নিন আর ফল লিখুন

একটি সংকীর্ণ, একটি মাঝারি ও একটি চওড়া প্রস্থ বাছুন, যেমন 375, 1024 ও 1920। স্টাইলশিটের প্রতিটি গুরুত্বপূর্ণ vw মানের জন্য প্রতিটি প্রস্থে vw থেকে px রূপান্তর করুন এবং একটি নোটে তিনটি সংখ্যা লিখুন। 5.2 vw-এর একটি শিরোনাম দেয় 19.5, 53.2 ও 99.8 পিক্সেল। এভাবে দেখলে আপনি জানেন শিরোনাম সংকীর্ণ প্রান্তে পাঠযোগ্য কি না এবং চওড়া প্রান্তে অভিভূতকর নয়।

clamp খুঁজুন

ভালো লেখা তরল কোড clamp(min, preferred, max) দিয়ে vw-র চারপাশে সীমা বসায়। 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-তে মাপা লেখা পাঠক পাতা জুম করলে সাড়া দেয় না, কারণ উইন্ডো ও লেখা একসঙ্গে স্কেল হয়। অভিগম্যতা নির্দেশিকা চায় লেখার আকার বদলানো যাক। clamp()-এর মতো একটি rem পদ যোগ করুন যাতে লেখা জুমেও সাড়া দেয়।

রূপান্তরের আগে মানুষ যা জিজ্ঞাসা করে

1 vw কত পিক্সেল?

উইন্ডো প্রস্থের শততমাংশ: 1440-এ 14.4 px, 1000-এ 10 px, 360-এ 3.6 px।

50 vw কত পিক্সেল?

অর্ধেক উইন্ডো: 1440 চওড়ায় 720 px, 1000 চওড়ায় 500 px।

আমার পাতা পর্দার চেয়ে চওড়া কেন?

স্ক্রল করা একটি পাতায় 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 স্থির। মোবাইলে তরল নকশার জন্য vh-এর চেয়ে vw কেন নিরাপদতর একক তার এটি আরও একটি কারণ।

শতাংশ, vw আর গ্রিড

শতাংশ প্রস্থ অভিভাবক অনুসরণ করে, vw উইন্ডো অনুসরণ করে, আর CSS গ্রিড ও ফ্লেক্সবক্স উপলব্ধ জায়গা অনুসরণ করে। প্রায়ই সেরা তরল বিন্যাস কাঠামোর জন্য গ্রিড ও শতাংশ এবং কেবল লেখা ও ব্যবধানের জন্য vw ব্যবহার করে, কারণ সেগুলোই সরাসরি পর্দা অনুসরণ করে উপকৃত হয়। একটি বিন্যাস যাচাই করতে vw থেকে px রূপান্তরের সময় জিজ্ঞাসা করুন একটি গ্রিড ট্র্যাক একই কথা আরও মজবুতভাবে বলত কি না।

যাঁরা CSS লেখেন না তাঁদের vw বোঝানো

উইন্ডোকে রুলার হিসেবে ব্যবহার করুন

আপনি বললে যে এক 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-কে clamp()-এর ভেতরে rem-এর সঙ্গে মেলান, যাতে তা পাঠযোগ্য ও জুমযোগ্য থাকে। কিছুই আপলোড হয় না।