px থেকে vw রূপান্তর Pixels ↔ Viewport width বিনামূল্যে অনলাইন নিরাপদ
px-এ একটি মান লিখুন, সঙ্গে সঙ্গেই তা vw-এ পড়ে নিন। হিসাব আপনার ব্রাউজারেই হয়, কোথাও কিছু পাঠানো হয় না, আর উত্তরটি কিসের উপর নির্ভর করে তা ধরে নেওয়া হয় না — নিচে লেখা আছে।
কিছুই আপলোড হয় না
চেনা মাপ — px থেকে vw রূপান্তর
| px | vw |
|---|---|
| 8 | 0.555556 |
| 10 | 0.694444 |
| 12 | 0.833333 |
| 14 | 0.972222 |
| 16 | 1.111111 |
| 18 | 1.25 |
| 20 | 1.388889 |
| 24 | 1.666667 |
| 32 | 2.222222 |
| 48 | 3.333333 |
| 64 | 4.444444 |
এই এককগুলি কোথা থেকে এসেছে
CSS-এর পিক্সেল আপনার পর্দার পিক্সেল নয়। পর্দার ঘনত্ব আর আগেভাগে আন্দাজ করা গেল না যখন, তখন সত্যিকারের পিক্সেলে মাপা পাতা এমন পাতা হয়ে দাঁড়াল যা পর্দা যত সূক্ষ্ম হয় তত ছোট হয়ে যায়; তাই CSS পিক্সেলকে একটি নির্দেশক দৈর্ঘ্য হিসেবে নতুন করে সংজ্ঞায়িত করা হল: আরামদায়ক পাঠদূরত্ব থেকে দেখা, ইঞ্চির প্রায় ছিয়ানব্বই ভাগের এক ভাগ। এই পাতার বাকি সবকিছু তারই উপর দাঁড়ানো। em ওয়েবের চেয়ে পুরোনো — সিসার হরফে তা ছিল ঢালাই করা একটি ব্লকের প্রস্থ, নাম নেওয়া হয়েছিল বড় হাতের M থেকে — আর CSS-এ তার মানে চালু ফন্টের আকার, সেজন্যই উপাদানগুলি একটির ভিতর আরেকটি রাখলে তা বদলায়। rem ঠিক সেটি এড়াতেই যোগ করা হয়েছিল: তা মূল উপাদানের em এবং কখনও জমে ওঠে না। vw এসেছে সাড়া-দেওয়া নকশার সঙ্গে: দৃশ্যক্ষেত্রের প্রস্থের একশো ভাগের এক ভাগ, সে প্রস্থ যা-ই হোক।
কোথায় এদের দেখা পাবেন
এগুলিই প্রতিটি স্টাইলশিটের একক। পিক্সেল ঠিক করে পাড়, ছায়া আর এমন সবকিছুর মাপ যা বড়ছোট হওয়া উচিত নয়; rem ঠিক করে হরফ, ফাঁক আর বিন্যাসের মাপ, ফলে মূলে একটি বদলেই গোটা ইন্টারফেসের মাপ বদলে যায়; em ঠিক করে এমন জিনিসের মাপ যা নিজের লেখাটিকেই অনুসরণ করবে, যেমন বোতামের ভিতরের ফাঁক; vw ঠিক করে সেই শিরোনাম আর প্রথম পর্দার মাপ যা যেকোনো যন্ত্রে পর্দা ভরে দেবে। এদের মধ্যে রূপান্তর হল সেই দৈনন্দিন অঙ্ক, যা পিক্সেলে হাতে পাওয়া নকশাকে এমন স্টাইলশিটে পরিণত করে যা বাড়ে-কমে।
প্রায়ই জিজ্ঞাসিত প্রশ্ন
১৬ px-ই কেন চেনা সূচনাবিন্দু?
কারণ প্রতিটি বড় ব্রাউজারে লেখার পূর্বনির্ধারিত আকার সেটিই, আর যে স্টাইলশিট তা বদলায় না সে তা উত্তরাধিকারে পায়। তাই পূর্বনির্ধারিত সেটিংয়ে এক rem সমান ১৬ px, আর চেনা রূপান্তরগুলিও সেখান থেকেই আসে: ০.৫ rem মানে ৮ px, ১.৫ rem মানে ২৪ px। ব্যবহারকারী যদি ব্রাউজারের সেটিংয়ে ওই পূর্বনির্ধারিত মান বড় করে রাখেন, সেই একই rem মানও তার সঙ্গে বাড়ে — আর সেগুলি ব্যবহারের উদ্দেশ্যই ঠিক তা-ই।
rem ব্যবহার করব না em?
যা-কিছু গোটা পাতাকে অনুসরণ করবে তার জন্য rem — হরফের ধাপ, ফাঁক, বিন্যাসের প্রস্থ — কারণ তা মূল থেকে মাপা হয় এবং কখনও জমে না। যা-কিছু নিজের অবস্থানের লেখাকে অনুসরণ করবে তার জন্য em: বোতামের ভিতরের ফাঁক, আইকনের পাশের ফাঁক, উদ্ধৃতির ইনডেন্ট। চেনা ভুলটি হল em-এ মাপা উপাদানগুলিকে একটির ভিতর আরেকটি রাখা: ১.২ em-এর ভিতরে ১.২ em হয়ে দাঁড়ায় ১.৪৪, তারপর ১.৭৩, শেষে পাতার নিচের লেখা ইচ্ছিত মাপের দ্বিগুণ হয়ে যায়।
উত্তরটি কি নির্ভুল?
যেখানে দুটি একক পূর্ণসংখ্যায় একে অপরের মাধ্যমে সংজ্ঞায়িত, সেখানে হ্যাঁ — পাতাটি সংখ্যার উপরেই তা বলে, আর একমাত্র পূর্ণাঙ্কন হলো কত অঙ্ক দেখানো হবে তাতে। যেখানে অনুপাতের দশমিক শেষ হয় না, পাতাটি বারোটি সার্থক অঙ্ক দেখায় এবং বলে সম্পর্কটি আসন্ন, অন্য কিছুর ভান করে না।
আমি যা লিখি তা কি আমার যন্ত্র ছেড়ে যায়?
না। হিসাব আপনারই ব্রাউজারে হয়; কিছুই আপলোড হয় না, আর হওয়ার মতো কোনো সার্ভারও নেই। পাতাটি একবার খুললে নেটওয়ার্ক বন্ধ থাকলেও কাজ করে।
কেন আপনি px থেকে vw রূপান্তর করেন
একজন ডিজাইনার 1440 px চওড়া একটি মকআপ পাঠান, যাতে হিরো শিরোনাম 96 px আর সেকশনের ফাঁক 72 px। বাস্তব ওয়েবে পাতাটি দেখা যাবে ফোনে 360 px-এ, ট্যাবলেটে 820 px-এ আর বড় মনিটরে 2560 px-এ, এবং ডিজাইনার চান শিরোনামটি প্রতিটিতে পর্দার সঙ্গে তার অনুপাত রাখুক। এর জন্য তৈরি একক হলো ভিউপোর্ট প্রস্থ, vw, আর মকআপ থেকে সেখানে পৌঁছানোর পথ হলো px থেকে vw রূপান্তর: আপনি পিক্সেল মান নেন, ডিজাইন যে প্রস্থে আঁকা হয়েছিল তা দিয়ে ভাগ করেন, এবং একশো দিয়ে গুণ করেন। 1440 px ক্যানভাসে 96 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-এ মাপা হিরো ছবি, চিত্র আর সাজসজ্জার আকার উইন্ডোর সঙ্গে তাদের অনুপাত রাখে, তাই পর্দা বদলালে বিন্যাস ভেঙে পড়ে না।
সীমাসহ তরল টাইপ
clamp()-এর সঙ্গে মিলিয়ে vw এমন লেখা দেয় যা একটি সর্বনিম্ন আর সর্বোচ্চের মধ্যে মসৃণভাবে বাড়ে। আধুনিক স্টাইলশিট শিরোনামের জন্য এই কৌশলই ব্যবহার করে, এবং তা নিচে আলোচিত।
যেখানে ভিউপোর্ট একক ক্ষতি করে
খাঁটি 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-এ, লেখা তবু পাঠকের সেটিংস মানে।
মাঝের পদ কীভাবে বানাবেন
দুটি পর্দার প্রস্থ বেছে নিন আর প্রতিটিতে আপনার চাওয়া আকার। উদাহরণস্বরূপ 360 px চওড়ায় 32 px আর 1440 px চওড়ায় 96 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 ব্যবহার করতে পারি?
হ্যাঁ, কিন্তু এটি rem-এ সীমাসহ clamp()-এর ভেতরে রাখুন, যাতে লেখা পাঠযোগ্য থাকে এবং তবু জুম করা যায়।
আমার সংখ্যা কি আপলোড হয়?
না। হিসাব চলে আপনার ব্রাউজারে আর কিছুই কোথাও পাঠানো হয় না।
কীভাবে ফিরে যাব?
vw থেকে px দিয়ে, যা ভাগের বদলে প্রস্থ দিয়ে গুণ করে।
px থেকে vw রূপান্তরের সময় বুদ্ধিমানের সঙ্গে বাছাই
ঠিক করুন কী পর্দার সঙ্গে মাপে বদলাবে
হিরো টাইপ, বড় ফাঁক আর শিল্পকর্ম: হ্যাঁ। বডি টেক্সট, বর্ডার, ছোট কন্ট্রোল: না। আপনার vw মানের তালিকা যত ছোট, পাতা তত মজবুত।
ডিজাইনের পর্যায়ে রূপান্তর করুন
মকআপ পড়ার সময় px থেকে vw রূপান্তর করলে আপনি তখনই দেখতে পান কোন মান বেখাপ্পা বেরোয় এবং ডিজাইনারের কাছে আরও পরিচ্ছন্ন মান চাইতে পারেন। 6.6667 vw বেরোনো একটি শিরোনাম তাকে 6.5 বা 7 করা নিয়ে আলোচনার আমন্ত্রণ জানায়।
প্রস্থের একটি রেকর্ড রাখুন
স্টাইলশিটের শুরুতে একটি মন্তব্যে ডিজাইনের প্রস্থ লিখুন, যাতে পরে যিনি রূপান্তর করেন তিনি একই প্রস্থ ব্যবহার করেন। মেশানো প্রস্থ এমন একটি পাতা বানায় যা এমনভাবে অসঙ্গত যা কেউ ঠিকমতো ব্যাখ্যা করতে পারে না।
মকআপ থেকে তরল স্টাইলশিটে কাজ
যে আকারগুলো মাপে বদলাবে তার তালিকা করুন
ডিজাইন ফাইল খুলুন আর যে প্রতিটি আকার পর্দা অনুসরণ করুক চান তা লিখে ফেলুন: হিরো শিরোনাম, সেকশনের ফাঁক, হয়তো একটি বড় চিত্র। প্রতিটির জন্য ফ্রেমের প্রস্থের সাপেক্ষে px থেকে vw রূপান্তর করুন আর ফলটি টুকে রাখুন। বেশির ভাগ পাতায় এমন মান দশটির কম থাকে, আর বাকি সবকিছু rem বা পিক্সেলে থাকে।
মোবাইল ফ্রেম আলাদাভাবে যাচাই করুন
একটি ফোনের মকআপ থাকলে একই উপাদানগুলো তার প্রস্থে পড়ুন। 1440 px ফ্রেমে 96 px আর 375 px ফ্রেমে 40 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()-এর ভেতরে মেলান, যাতে তা পাঠযোগ্য ও জুমযোগ্য থাকে। কিছু আপলোড হয় না।