অটোমেটিক responsive

Tools

আমাদের Client-First Webflow সাইটটি Fluid response করার জন্য দুটি বিকল্প রয়েছে:

1. এই page এ ভিজ্যুয়াল CSS snippet কনফিগারেটর
2. Finsweet Extension এ একই ভিজ্যুয়াল কনফিগারেটর
   

Fluid responsive কী ?

ব্রাউজারের Viewport-এর আকার পরিবর্তিত হলে, ডিজাইনটিও এর সাথে স্কেল হবে।

Client-First fluid responsive, vw এবং vh স্কেলিং এর সাথে তুলনীয়

ব্রাউজারের Viewport-এর আকার পরিবর্তিত হলে, ডিজাইনটি এর সাথে স্কেল হয়।

স্কেল করার সময় আমাদের content কে fluid responsive করার একটি উপায় হলো, vw বা vh ইউনিট ব্যবহার করা। এই পদ্ধতির সমস্যাগুলি হল:

• আমরা fluid responsive করতে চাই এমন, প্রতিটি element এর উপর আমাদের অবশ্যই vw বা vh ইউনিটের আকার সেট করতে হবে।
• রৈখিক স্কেলিং এর কারণে, Element গুলি দ্রুত খুব ছোট বা খুব বড় হতে পারে। vw এবং vh রৈখিকভাবে স্কেল করে।
• ‍Accessibility কমে যায় কারণ, ব্রাউজারের জুমিং সিস্টেম vw এবং vh ইউনিটগুলিতে প্রভাবিত হতে পারে না।
• বিশেষভাবে অন্যান্য ডেভেলপারদের এবং ক্লায়েন্টদের জন্য, vw ও vh ইউনিটগুলিতে Webflow প্রজেক্টটি পরিচালনা এবং রক্ষণাবেক্ষণ করা কঠিন হতে পারে।

Client-First, বিপরীতে "root-font scaling" ব্যবহার করে।

Root-font scaling

Client-First সিস্টেম সমস্ত আকারের জন্য rem ইউনিট ব্যবহার করে। rem ইউনিট একটি জিনিস এর উপর ভিত্তি করে  — HTML root font size ।

আমাদের প্রজেক্টের সবকিছুই HTML font size এর সাথে সম্পর্কিত। এই কারণে, আমাদের প্রজেক্টের সমস্ত আকারের উপর, আমরা গ্লোবালভাবে পরিচালনা করা যায় এমন নিয়ন্ত্রণ রাখতে পারি।

এই আকারটি পরিবর্তন করে, আমরা দৃশ্যমানভাবে আমাদের rems কে বড় বা ছোট করে দিচ্ছি। আমাদের দৃশ্যমান fluid responsive জেনারেটর আমাদের পছন্দ অনুযায়ী, মূল font size পরিবর্তন করার জন্য, ব্যাপকভাবে গণনাগুলি চালায়।

জেনারেট করা CSS কোড যোগ করলে, আমাদের Webflow প্রজেক্ট custom size scaling নিয়ম মেনে চলে। ব্রেকপয়েন্ট জুড়ে HTML font size পরিবর্তন করে, আমারা fluid responsive স্কেলিং এর চূড়ান্ত কাস্টমাইজেশন করতে পারি।

সুবিধা:

• Client-First ব্যবহার করুন, যেমন আপনি সাধারণভাবে এটি ব্যবহার করেন। Fluid responsive সাইট বনাম non-fluid responsive সাইটগুলির জন্য কোনও নির্দিষ্ট কর্মপ্রবাহের পরিবর্তন নেই ৷
• Fluid responsive কৌশলটি একটি ঐচ্ছিক add-on । যেকোনো প্রজেক্টে এটি যুক্ত করুন বা না করুন।
• সবকিছু তৈরি হওয়ার পরে, প্রজেক্টের শেষে Fluid responsive যোগ করা যেতে পারে।
• ব্রাউজারগুলি স্বাভাবিকভাবে zoom করতে পারে।
• শেষ ব্যবহারকারীরা যারা ব্রাউজারের ফন্টের আকার সেটিংস পরিবর্তন করে, তাদের সেটিংস সম্মান করা হবে।
• Webflow প্রজেক্টটি rem -এ রক্ষণাবেক্ষণ করা, vw বা vh -ভিত্তিক স্থির আকারের প্রজেক্টের চেয়ে সহজ।
  

দৃশ্যমানভাবে fluid responsiveness তৈরি করুন

1. দৃশ্যমানভাবে, fluid responsive স্কেলিং নিয়ম কনফিগার করুন।
2. CSS কোডটি, Client-First Webflow প্রজেক্টে কপি করুন।
3. rems এর মধ্যে একটি fluid responsive সাইট উপভোগ করুন।