সিএসএস ভেরিয়েবলগুলি ব্যবহার করে কীভাবে নিম্নলিখিত প্রতিক্রিয়াটি তৈরি করবেন তা শিখুন।

সিএসএস ভেরিয়েবলগুলির সাথে কীভাবে প্রতিক্রিয়াশীলতাটিকে সহজতর করা যায়

2018 সালে প্রতিক্রিয়াশীল ওয়েবসাইটগুলি তৈরির বিষয়ে একটি দ্রুত টিউটোরিয়াল।

আপনি যদি কখনও সিএসএস ভেরিয়েবলের কথা না শুনে থাকেন তবে এটি সিএসএসের একটি নতুন বৈশিষ্ট্য যা আপনাকে কোনও স্টাইলশীটে ভেরিয়েবলের সক্ষমতাটি কোনও সেটিংস না করেই নিতে দেয়।

মূলত, সিএসএস ভেরিয়েবল আপনাকে স্টাইল স্থাপনের পুরানো উপায়টি এড়িয়ে যেতে দেয়:

এইচ 1 {ফন্টের আকার: 30px; }
नावবার> একটি {ফন্টের আকার: 30px; }

… সুতরাং:

: রুট {--বেস-ফন্ট-আকার: 30px; }
এইচ 1 {ফন্টের আকার: ভ্যার (- বেস ফন্টের আকার); }
navbar> a {ফন্টের আকার: var (- বেস ফন্টের আকার); }

সিনট্যাক্সটি কিছুটা অদ্ভুত মনে হলেও আপনার স্পষ্ট সুবিধাটি রয়েছে যে আপনি কেবলমাত্র - বেস-ফন্ট-আকারের ভেরিয়েবল পরিবর্তন করে আপনার অ্যাপ্লিকেশনটিতে হরফ আকার পরিবর্তন করতে পারেন।

আপনি যদি সিএসএস ভেরিয়েবলগুলি সঠিকভাবে শিখতে চান তবে অনুগ্রহ করে স্ক্রিম্বায় আমার ফ্রি এবং ইন্টারেক্টিভ সিএসএস ভেরিয়েবল কোর্সটি পরীক্ষা করে দেখুন:

কোর্সে আটটি ইন্টারেক্টিভ স্ক্রিনকাস্ট রয়েছে।

আপনি যদি কোর্স সম্পর্কে আরও জানতে চান তবে নীচের নিবন্ধগুলির একটি ভূমিকাও পড়তে পারেন:

এখন আসুন দেখুন এই নতুন প্রযুক্তি কীভাবে প্রতিক্রিয়াশীল ওয়েবসাইটগুলি তৈরি করতে আপনার জীবনকে আরও সহজ করে তুলতে পারে।

সংস্থাপনটি

আমরা এমন একটি পোর্টফোলিও ওয়েবসাইটে আরও প্রতিক্রিয়া যুক্ত করতে যাচ্ছি যা দেখতে এরকম দেখাচ্ছে:

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

বাম: এটি মোবাইল ফোনে শুরুতে কীভাবে দেখায়। ডান: এটি দেখতে কেমন হবে?

ডানদিকে থাকা চিত্রটিতে, আমরা মোবাইল ডিভাইসে আরও ভালভাবে কাজ করতে স্টাইলগুলিতে কিছু পরিবর্তন করেছি। আমরা যা করেছি তা এখানে:

  1. গ্রিডটি পুনরায় সাজানো হয়েছে যাতে এটি দুটি কলামের পরিবর্তে উল্লম্বভাবে স্ট্যাক করা হয়।
  2. পুরো লেআউটটি কিছুটা উপরে সরানো হয়েছে
  3. ফন্ট সঙ্কুচিত

এটি করতে, আমাদের নিম্নলিখিত সিএসএস পরিবর্তন করতে হয়েছিল:

এইচ 1 {ফন্টের আকার: 30px; }
# নভবার {মার্জিন: 30px 0; }
#navbar a {হরফ আকার: 30px; }
.গ্রিড {সীমানা: 30px 0; গ্রিড টেম্পলেট কলাম: 200px 200px; }

বিশেষত, একটি মিডিয়া ক্যোয়ারিতে আমাদের নিম্নলিখিত সামঞ্জস্য করতে হয়েছিল:

  • H1 থেকে 20px এর ফন্টের আকার হ্রাস করুন
  • # নভবারের উপরে এবং নীচে মার্জিনটি 15px এ কমিয়ে দিন
  • # নভবারে 20px ফন্টের আকার হ্রাস করুন
  • গ্রিডের উপরের মার্জিনটি 15 পিক্সেল এ কমিয়ে দিন
  • গ্রিডটি "দুটি কলাম" থেকে "একটি কলামে" পরিবর্তন করুন
দ্রষ্টব্য: এমনকি এই নির্বাচকগুলিতে এই অ্যাপ্লিকেশনটিতে অবশ্যই আরও অনেকগুলি সিএসএস রয়েছে। এই টিউটোরিয়ালটির জন্য, তবে আমি মিডিয়া ক্যোয়ারিতে পরিবর্তন করি না এমন সমস্ত কিছু সরিয়ে ফেলেছি। সমস্ত কোডের জন্য এই স্ক্রিম্বা খেলার মাঠটি দেখুন।

পুরানো উপায়

এই সবগুলি সিএসএস ভেরিয়েবল ছাড়া সম্ভব হবে। তবে, এটির জন্য অপ্রয়োজনীয় পরিমাণের কোডের প্রয়োজন হবে কারণ মিডিয়া ক্যোয়ারিতে উপরের বুলেট পয়েন্টগুলির বেশিরভাগের নিজস্ব নির্বাচক প্রয়োজন, যেমন:

@ মিডিয়া সমস্ত এবং (সর্বাধিক প্রস্থ: 450px) {নাবার {মার্জিন: 15px 0; } নাভবার একটি {ফন্টের আকার: 20px; } এইচ 1 {হরফ আকার: 20px; }
.গ্রিড {মার্জিন: 15px 0; গ্রিড টেম্পলেট কলাম: 200px; }
}

নতুন উপায়

এখন আসুন দেখুন সিএসএস ভেরিয়েবলগুলি ব্যবহার করে এটি কীভাবে সমাধান করা যায়। প্রথমত, আমরা যে মানগুলি পুনরায় ব্যবহার করি বা পরিবর্তনশীলগুলিতে পরিবর্তন করি সেগুলি সংরক্ষণ করতে আমরা পছন্দ করি:

: রুট {--বেস-ফন্ট-আকার: 30px; - কলাম: 200px 200px; -বেজ মার্জিন: 30px; }

এবং তারপরে আমরা কেবল অ্যাপ্লিকেশন জুড়ে এই পরিবর্তনকগুলি ব্যবহার করি:

# নভবার {মার্জিন: ভ্যার (- বেস-মার্জিন) 0; }
#navbar a {হরফ আকার: var (- বেস ফন্টের আকার); }
এইচ 1 {ফন্টের আকার: ভ্যার (- বেস ফন্টের আকার); }
.গ্রিড {মার্জিন: ভ্যার (- বেস-মার্জিন) 0; গ্রিড টেম্পলেট কলাম: var (- কলাম); }

আমাদের এই সেটআপটি হয়ে গেলে আমরা কেবল মিডিয়া ক্যোয়ারিতে ভেরিয়েবলের মান পরিবর্তন করতে পারি:

@ মিডিয়া সমস্ত এবং (সর্বাধিক প্রস্থ: 450px) {: মূল {- কলাম: 200px; -বেজ মার্জিন: 15px; --base-font-size: 20px; }

এটি আমাদের আগে যা ছিল তার চেয়ে অনেক পরিষ্কার। আমরা সমস্ত নির্বাচককে নির্দিষ্ট করার চেয়ে কেবলমাত্র: রুটকে লক্ষ্য করছি।

আমরা আমাদের মিডিয়া ক্যোয়ারিকে চার নির্বাচক থেকে একজন এবং তের থেকে চারে নামিয়ে রেখেছি।

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

উপসংহারে, সিএসএস ভেরিয়েবলগুলি অবশ্যই প্রতিক্রিয়াশীলতার ভবিষ্যত। আপনি যদি এই প্রযুক্তিটি একবার এবং সর্বদা শিখতে চান তবে আমি আপনাকে স্ক্রিম্বায় আমার বিনামূল্যে কোর্সটি গ্রহণ করার পরামর্শ দিই।

আপনি কোনও সময়ের মধ্যেই সিএসএস ভেরিয়েবল মাস্টার হয়ে যাবেন :)

পড়ার জন্য আপনাকে ধন্যবাদ! আমি পের বর্জেন, ফ্রন্ট-এন্ড বিকাশকারী এবং স্ক্রিম্বার সহ-প্রতিষ্ঠাতা। কোনও প্রশ্ন বা মন্তব্য সহ টুইটারে আমার কাছে বিনা দ্বিধায় যোগাযোগ করুন।