কন্টেন্ট
- প্রতিক্রিয়াশীল চিত্র
- কর্মক্ষমতা
- শর্তাধীন এবং অলস লোডিং
- প্রতিক্রিয়াশীল টাইপোগ্রাফি
- জাভাস্ক্রিপ্টে মিডিয়া প্রশ্নগুলি
- প্রগতিশীল বর্ধিতকরণ
- লেআউট
- সিএসএস গ্রিড লেআউট
- অবশেষে
প্রতিক্রিয়াশীল ওয়েব ডিজাইন অবিশ্বাস্যভাবে সহজ মনে হচ্ছে। বিন্যাসের জন্য নমনীয় গ্রিডগুলির জন্য নির্বাচন করুন, নমনীয় মিডিয়া (চিত্রগুলি, ভিডিও, iframes) ব্যবহার করুন এবং যে কোনও ভিউপোর্টে সামগ্রীর সেরা ব্যবস্থা করতে এই পরিমাপগুলি আপডেট করতে মিডিয়া ক্যোয়ারীগুলি প্রয়োগ করুন। বাস্তবে আমরা শিখেছি এটি আসলে এত সহজ নয়। প্রতিটি প্রকল্পের সময় যে ছোট ছোট বিষয়গুলি ক্রপ হয় সেগুলি আমাদের মাথা আঁচড়ায় এবং মাঝে মাঝে এমনকি আমাদের ডেস্কে নখর খাঁজ করে keep
যেহেতু আমি রেসপন্সিয়াল ডিজাইনের সাপ্তাহিক নিউজলেটার সংশোধন করা শুরু করেছি আমার ভাগ্যবান যে আমি ওয়েব সম্প্রদায়ের অনেক সদস্যের সাথে কথা বলতে পারি এবং তাদের অভিজ্ঞতা শুনতে পারি। সম্প্রদায়টি আসলে কী শিখতে চেয়েছিল আমি তা জানতে চেয়েছিলাম, তাই আমি একটি সমীক্ষা পাঠকদের কাছে প্রচার করেছিলাম। এখানে শীর্ষ ফলাফলগুলি:
- প্রতিক্রিয়াশীল চিত্র
- পারফরম্যান্স উন্নতি
- প্রতিক্রিয়াশীল টাইপোগ্রাফি
- জাভাস্ক্রিপ্টে মিডিয়া প্রশ্নগুলি
- প্রগতিশীল বর্ধিতকরণ
- লেআউট
এই বিষয়গুলি মাথায় রেখে, আমি আমাদের শিল্পের কয়েকজন নেতাকে তাদের চিন্তাভাবনা জিজ্ঞাসা করে একটি সিরিজ পডকাস্ট চালিয়েছি। তাদের প্রতিক্রিয়াগুলিতে, এক দফা সর্বসম্মত ছিল: উত্তেজনাপূর্ণ এবং উন্নত কৌশলগুলির বিষয়ে চিন্তা করা শুরু করার আগে ঠিক বুনিয়াদি পাওয়ার বিষয়ে মনোযোগ দিন। জিনিসগুলিকে বেসিকগুলিতে ফিরিয়ে নিয়ে যাওয়ার পরে, আমরা ডিভাইস বা ব্যবহারকারীর প্রসঙ্গটি যখন অনুমতি দেয় তখন বৈশিষ্ট্যগুলিতে লেয়ারিং প্রত্যেকের জন্য একটি শক্তিশালী ইন্টারফেস তৈরি করতে সক্ষম হয়েছি।
’তো ... এই উন্নত কৌশলগুলির কী হবে?’ আমি আপনারা জিজ্ঞাসা করছেন শুনছি। আমি মনে করি স্টিফেন হেই এটিকে সর্বোত্তমভাবে সংক্ষেপিত করেছিলেন যখন তিনি বলেছিলেন: ’চূড়ান্ত আরডাব্লুডি কৌশলটি কোনও উন্নত আরডাব্লুডি কৌশল ব্যবহার না করেই শুরু করা উচিত। কাঠামোগত সামগ্রী দিয়ে শুরু করুন এবং আপনার পথটি তৈরি করুন। যখন ডিজাইনটি ভেঙে যায় এবং বিষয়বস্তু এটির নির্দেশ দেয় তখনই একটি ব্রেকপয়েন্ট যুক্ত করুন ... এটিই ’'
এই নিবন্ধে, আমি সেই উন্নত কৌশলগুলি তৈরি করতে, পরিস্থিতি যেমন অনুমতি দেয় তেমন জটিলতার স্তরগুলি যুক্ত করব এবং জটিলতার স্তরগুলি যুক্ত করব। চল শুরু করি.
প্রতিক্রিয়াশীল চিত্র
যখন ইথান মার্কোটি প্রথম সংজ্ঞা দিয়েছিলেন তখন ফ্লুয়েড মিডিয়া আরডাব্লুডির একটি মূল অঙ্গ ছিল। প্রস্থ: 100%; , সর্বাধিক প্রস্থ: 100%; এখনও আজও কাজ করে তবে প্রতিক্রিয়াশীল চিত্রটি ল্যান্ডস্কেপ অনেক জটিল হয়ে উঠেছে। সমর্থন করার জন্য স্ক্রিন আকার, পিক্সেল ঘনত্ব এবং ডিভাইসগুলির ক্রমবর্ধমান সংখ্যার সাথে আমরা আরও বেশি নিয়ন্ত্রণের ইচ্ছা পোষন করি।
তিনটি প্রধান উদ্বেগকে প্রতিক্রিয়াশীল ইমেজস কমিউনিটি গ্রুপ (আরআইসিজি) দ্বারা সংজ্ঞায়িত করা হয়েছিল:
- আমরা ইমেজটির কিলোবাইট আকারের তারের মাধ্যমে প্রেরণ করছি
- আমরা উচ্চ ডিপিআই ডিভাইসে ইমেজটির শারীরিক আকার প্রেরণ করছি
- ভিউপোর্টের নির্দিষ্ট আকারের জন্য শিল্প নির্দেশের আকারে চিত্রের ক্রপ
ইন্ডিগোগোর সহায়তায় ইয়োভ ওয়েইস ব্লিংক বাস্তবায়নের বেশিরভাগ কাজ করেছেন - গুগলের ওয়েবকিটের কাঁটাচামচ, এবং আপনি যখন এটি পড়ছেন তখন এটি ক্রোম এবং ফায়ারফক্সে প্রেরণ করা হবে। সাফারি 8 এসসিআরসিট পাঠাবে, তবে মাপের বৈশিষ্ট্যটি কেবলমাত্র রাতের বিল্ডে এবং চিত্র> এখনও কার্যকর হয় নি।
আমাদের ওয়েব বিকাশ প্রক্রিয়াতে নতুন কিছু আসার সাথে সাথে এটি শুরু করা কঠিন হতে পারে difficult আসুন ধাপে ধাপে একটি উদাহরণ দিয়ে চলুন।
img! - সমস্ত নন ছবি সমর্থনকারী ব্রাউজারগুলির জন্য ফ্যালব্যাক চিত্রটি ঘোষণা করুন -> src = "ঘোড়া -350.webp"! - এসসিআরসিটিতে সমস্ত আকারের আকার ঘোষণা করুন। প্রতিটি চিত্রের প্রস্থের ব্রাউজারকে অবহিত করতে ডব্লিউ ডেস্ক্রিপ্টর ব্যবহার করে চিত্রের প্রস্থ অন্তর্ভুক্ত করুন ----> srcset = "ঘোড়া -350.webp 350w, ঘোড়া -500.webp 500w, ঘোড়া -1024.webp 1024w ,orse.webp 2000w "! - আকারগুলি আমাদের সাইটের বিন্যাসের ব্রাউজারকে অবহিত করে। এখানে আমরা ems৪ সেমি এবং তার চেয়ে বড় যে কোনও ভিউপোর্টের জন্য বলছি, এমন চিত্র ব্যবহার করুন যা ভিউপোর্ট -> আকার = "(ন্যূনতম প্রস্থ: em৪ মিম) v০vw এর of০% দখল করবে! - ভিউপোর্টটি যদি তা না হয় তবে বড়, তারপরে .5ems.৫ সেমি এবং তার চেয়ে বড় যে কোনও ভিউপোর্টের জন্য, এমন একটি চিত্র ব্যবহার করুন যা ভিউপোর্টের 95% দখল করে -> (ন্যূনতম প্রস্থ: 37.5 মিমি) 95vw, - এবং যদি ভিউপোর্টটি এর চেয়ে ছোট হয়, তবে ব্যবহার করুন এমন চিত্র যা ভিউপোর্টের 100% দখল করে -> 100vw "! - সর্বদা ওয়েল পাঠ্য থাকে ----> Alt =" একটি ঘোড়া "/>
পারফরম্যান্সের দৃষ্টিকোণ থেকে আপনি মাপের বৈশিষ্ট্যটিতে ন্যূনতম প্রস্থ বা সর্বাধিক প্রস্থ ব্যবহার করেন তা বিবেচ্য নয় - তবে উত্সের অর্ডারটি গুরুত্বপূর্ণ। ব্রাউজারটি সর্বদা প্রথম মিলের আকার ব্যবহার করবে।
এছাড়াও, মনে রাখবেন যে আমরা আমাদের ডিজাইনের বিপরীতে সরাসরি সংজ্ঞায়িত হতে মাপের বৈশিষ্ট্যগুলিকে কঠোর কোডিং করছি। এটি সমস্যার সামনে এগিয়ে যাওয়ার কারণ হতে পারে। উদাহরণস্বরূপ, আপনি যদি নিজের সাইটটিকে নতুন করে ডিজাইন করেন তবে আপনাকে সমস্ত img> বা চিত্র> গুলি পুনরায় দেখা এবং আকারগুলি পুনরায় সংজ্ঞায়িত করতে হবে। আপনি যদি কোনও সিএমএস ব্যবহার করেন তবে এটি আপনার বিল্ড প্রক্রিয়ার অংশ হিসাবে কাটিয়ে উঠতে পারে।
ওয়ার্ডপ্রেস ইতিমধ্যে সাহায্য করার জন্য একটি প্লাগইন আছে। এটি ডাব্লুপি স্ট্যান্ডার্ড চিত্রের জাতগুলিতে srcset সংজ্ঞায়িত করে এবং আপনাকে একটি কেন্দ্রীয় স্থানে মাপ ঘোষণা করতে দেয়। পৃষ্ঠাটি যখন ডেটাবেস থেকে উত্পন্ন হয়, এটি img> এ যে কোনও উল্লেখ সরিয়ে দেয় এবং চিত্র চিহ্নআপ দিয়ে তাদের প্রতিস্থাপন করে।
বেসিক
- আপনার সত্যিই কোনও চিত্র অন্তর্ভুক্ত করা দরকার কিনা তা নিয়ে ভাবুন। চিত্রের মূল বিষয়বস্তুটি নাকি এটি আলংকারিক? একটি কম চিত্রের অর্থ দ্রুত লোড সময় হবে
- ইমেজঅપ્টিম ব্যবহার করে আপনাকে যে চিত্রগুলি অন্তর্ভুক্ত করতে হবে তা অপ্টিমাইজ করুন
- আপনার সার্ভারে বা .htaccess ফাইলটিতে আপনার চিত্রগুলির জন্য মেয়াদোত্তীর্ণ শিরোনাম সেট করুন (‘পারফরম্যান্স’ এর অধীনে বিশদটি দেখুন)
- পিকচারফিল ছবিগুলির জন্য পলিফিল সমর্থন সরবরাহ করে
উন্নত
- অলস jQuery এর অলস লোড প্লাগইন ব্যবহার করে আপনার চিত্রগুলি লোড করুন
- বৈশিষ্ট্য সনাক্তকরণের জন্য এইচটিএমএলআইজিএলমেন্ট.সামস এবং এইচটিএমএলপিকচার এলিমেন্ট ব্যবহার করুন।
- গিথুব-এ পাওয়া অ্যাডভান্সড পিকচারফিল ডাব্লুপি প্লাগইন আপনাকে কাস্টম চিত্রের প্রস্থ এবং আকারের মান নির্ধারণ করতে অনুমতি দেবে
কর্মক্ষমতা
আমাদের পৃষ্ঠাগুলিতে দ্রুততম উপলব্ধি অর্জনের জন্য, সার্ভারের প্রথম প্রতিক্রিয়ার মধ্যে আমাদের পৃষ্ঠার শীর্ষ অংশটি রেন্ডার করার জন্য আমাদের সমস্ত HTML এবং CSS প্রয়োজন। সেই ম্যাজিক নম্বরটি 14kb এবং প্রথম রাউন্ড-ট্রিপ সময় (আরটিটি) এর মধ্যে সর্বাধিক যানজটের উইন্ডো আকারের উপর ভিত্তি করে।
গার্ডিয়ান-এর সামনের প্রযুক্তিগত সীসা প্যাট্রিক হামান এবং তাঁর দলটি ফ্রন্টএন্ড এবং ব্যাকএন্ড কৌশলগুলির মিশ্রণ ব্যবহার করে 1000 মিমি বাধা ভাঙতে সক্ষম হয়েছে। অভিভাবকের দৃষ্টিভঙ্গি প্রয়োজনীয় সামগ্রী - নিবন্ধটি - যত তাড়াতাড়ি সম্ভব এবং 14 কেবি ম্যাজিক সংখ্যার মধ্যে ব্যবহারকারীর কাছে সরবরাহ করা হবে তা নিশ্চিত করা।
প্রক্রিয়াটি দেখে নেওয়া যাক:
- একটি নিউজ স্টোরিতে গুগল লিঙ্কে ব্যবহারকারী ক্লিক করেন
- নিবন্ধটির জন্য ডাটাবেসে একটি ব্লক করার অনুরোধ প্রেরণ করা হয়েছে। কোনও সম্পর্কিত গল্প বা মন্তব্য অনুরোধ করা হয় না
- এইচটিএমএলটিতে ক্রিটিক্যাল সিএসএস রয়েছে load
- মাথায়>
- একটি ‘সরিষা কাটা’ প্রক্রিয়া হাতে নেওয়া হয় এবং ব্যবহারকারীর ডিভাইস বৈশিষ্ট্যের উপর ভিত্তি করে কোনও শর্তযুক্ত উপাদান লোড হয় are
- নিবন্ধটি সম্পর্কিত বা সমর্থনকারী কোনও সামগ্রীই (সম্পর্কিত নিবন্ধের চিত্রগুলি, নিবন্ধের মন্তব্যগুলি এবং এগুলি) জায়গায় অলসভাবে লোড হয়
এই জাতীয় সমালোচনামূলক উপস্থাপনের পথটিকে অপ্টিমাইজ করার অর্থ মাথাটি 222 লাইন দীর্ঘ long তবে ব্যবহারকারীরা যে সমালোচনামূলক সামগ্রীটি দেখতে এসেছিল তা জিজেপ করা অবস্থায় 14kb প্রাথমিক পেওডের মধ্যে আসে। এটি এই প্রক্রিয়া যা 1000 মিমি রেন্ডারিং বাধা ভঙ্গ করতে সহায়তা করে।
শর্তাধীন এবং অলস লোডিং
শর্তাধীন লোডিং তাদের ডিভাইসের বৈশিষ্ট্যের ভিত্তিতে ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। মডার্নিজারের মতো সরঞ্জামগুলি আপনাকে এই বৈশিষ্ট্যগুলির জন্য পরীক্ষা করার অনুমতি দেয়, তবে সচেতন থাকুন যে কোনও ব্রাউজার বলছে যে এটি সমর্থন সরবরাহ করে, এর অর্থ সর্বদা সম্পূর্ণ সমর্থন নয়।
একটি কৌশল হ'ল কিছুক্ষণ লোড করা বন্ধ করে দেওয়া যতক্ষণ না ব্যবহারকারী সেই বৈশিষ্ট্যটি ব্যবহারের অভিপ্রায় না দেখায়। এটি শর্তযুক্ত বলে বিবেচিত হবে। ব্যবহারকারী সামাজিক আইকনগুলিতে লোডিং বন্ধ রাখতে পারবেন যতক্ষণ না ব্যবহারকারী আইকনগুলি উপরের দিকে .ুকে যায় বা স্পর্শ না করে, বা আপনি কোনও ছোট ডেটারপোর্টে আইফ্রেমে গুগল ম্যাপ লোড করা এড়াতে পারেন যেখানে ব্যবহারকারী কোনও ডেডিকেটেড ম্যাপিং অ্যাপ্লিকেশনটির সাথে লিঙ্কিং পছন্দ করতে পারে। আরেকটি পদ্ধতি হ'ল 'সরিষা কাটা' - এ সম্পর্কিত তথ্যের জন্য উপরের বাক্সআউটটি দেখুন।
অলস লোডিং এমন একটি বিষয় হিসাবে সংজ্ঞায়িত করা হয় যা আপনি সর্বদা পৃষ্ঠায় লোড করতে চান - যে চিত্রগুলি নিবন্ধ, মন্তব্য বা অন্যান্য সম্পর্কিত নিবন্ধের অংশ - তবে ব্যবহারকারীদের সামগ্রীটি গ্রহণ করা শুরু করার প্রয়োজন নেই।
বেসিক
- ফাইলগুলির জন্য জিজপিং সক্ষম করুন এবং সমস্ত স্থিতিশীল সামগ্রীর জন্য মেয়াদ উত্তীর্ণ শিরোনাম সেট করুন (নেটম.গ / এক্সপায়ার ২60০)
- অলস লোড jQuery প্লাগইন ব্যবহার করুন। ভিউপোর্টে পৌঁছানোর সময়, বা নির্দিষ্ট সময়ের পরে চিত্রগুলি লোড করে
উন্নত
- দ্রুত বা ক্লাউডফ্লেয়ার সেট আপ করুন। সামগ্রী বিতরণ নেটওয়ার্কগুলি (সিডিএন) আপনার নিজের সার্ভারের চেয়ে দ্রুত আপনার স্ট্যাটিক সামগ্রী ব্যবহারকারীদের কাছে সরবরাহ করে এবং কিছু বিনামূল্যে স্তর রয়েছে
- সমান্তরাল HTTP অনুরোধগুলির মতো http2 বৈশিষ্ট্যগুলির সুবিধা নিতে http2- সক্ষম ব্রাউজারগুলির জন্য এসপিডিওয়াই সক্ষম করুন
- সামাজিক গণনা আপনার সামাজিক আইকনগুলির শর্তযুক্ত লোড করার অনুমতি দেয়
- স্ট্যাটিক ম্যাপস এপিআই ব্যবহার করা আপনাকে চিত্রগুলির জন্য ইন্টারেক্টিভ গুগল ম্যাপগুলিকে স্যুইচ আউট করার অনুমতি দেবে। নেটম.এগ / স্ট্যাটিক-260 এ ব্র্যাড ফ্রস্টের উদাহরণটি দেখুন
- অ্যাজাক্স অন্তর্ভুক্ত প্যাটার্নটি ডেটা-পূর্ব, ডেটা-পরে বা ডেটা-রিপ্লেস বৈশিষ্ট্যটি থেকে সামগ্রী স্নিপেটগুলি লোড করবে
প্রতিক্রিয়াশীল টাইপোগ্রাফি
টাইপোগ্রাফি আপনার বিষয়বস্তু হজম করা সহজ করে তোলে। প্রতিক্রিয়াশীল টাইপোগ্রাফি বিস্তৃত বিভিন্ন ডিভাইস এবং ভিউপোর্টে পঠনযোগ্যতা নিশ্চিত করার জন্য এটি প্রসারিত করে। জর্ডান মুর স্বীকার করেছেন যে টাইপটি এমন একটি জিনিস যা তিনি বাজেতে রাজি নন। আপনার প্রয়োজনে একটি বা দুটি চিত্র ফেলে দিন তবে নিশ্চিত করুন যে আপনার দুর্দান্ত ধরণ রয়েছে।
স্টিফেন হেই এইচটিএমএল ফন্টের আকার 100 শতাংশে সেট করার পরামর্শ দিয়েছেন (পড়ুন: ঠিক যেমনটি এটি ছেড়ে দিন) কারণ প্রতিটি ব্রাউজার বা ডিভাইস প্রস্তুতকারক একটি নির্দিষ্ট রেজোলিউশন বা ডিভাইসের জন্য যুক্তিসঙ্গতভাবে পঠনযোগ্য ডিফল্ট করে। বেশিরভাগ ডেস্কটপ ব্রাউজারের জন্য এটি 16px।
অন্যদিকে, মুর নির্দিষ্ট সামগ্রী উপাদানগুলির জন্য ন্যূনতম ফন্টের আকার নির্ধারণ করতে আরইএম ইউনিট এবং এইচটিএমএল ফন্ট-আকার ব্যবহার করে। উদাহরণস্বরূপ, আপনি যদি কোনও নিবন্ধের বাইলাইনটি সর্বদা 14px রাখতে চান তবে HTML উপাদানটির উপর ভিত্তি করে ফন্টের আকার হিসাবে সেট করুন এবং .লাইন {ফন্ট-আকার: 1 টিম;} সেট করুন} আপনি যেমন শরীরটি স্কেল করবেন: ফন্ট-আকার: ভিউপোর্টের সাথে মানানসই আপনি। বাই-লাইন শৈলীতে প্রভাব ফেলবেন না।
একটি ভাল পঠন লাইনের দৈর্ঘ্যও গুরুত্বপূর্ণ - 45 থেকে 65 টি অক্ষরের জন্য লক্ষ্য। আপনার সামগ্রী চেক করতে আপনি ব্যবহার করতে পারেন এমন একটি বুকমার্কলেট রয়েছে। আপনি যদি নিজের ডিজাইনের সাহায্যে একাধিক ভাষাকে সমর্থন করছেন তবে লাইন দৈর্ঘ্যের পাশাপাশি আলাদা হতে পারে। মুর প্রস্তাব দেয়: ল্যাং (ডি) নিবন্ধটি {সর্বাধিক প্রস্থ: 30 মিমি there সেখানে কোনও সমস্যা কভার করার জন্য।
উল্লম্ব ছন্দ বজায় রাখতে, আপনার লাইন-উচ্চতার সমান কন্টেন্ট ব্লক, উল>, অল>, ব্লককোট>, টেবিল>, ব্লককোট> এবং এর বিপরীতে মার্জিন-নীচে সেট করুন। চিত্রগুলির প্রবর্তনের সাথে যদি তালটি ব্যাহত হয় তবে আপনি বেসলাইন.জেএস বা বেসলাইনএলাইন.জগুলি যোগ করে এটি ঠিক করতে পারেন।
বেসিক
- আপনার ফন্টটি 100 শতাংশ বডিতে বেস করুন
- আপেক্ষিক Em ইউনিটগুলিতে কাজ করুন
- আপনার নকশায় উল্লম্ব ছন্দ বজায় রাখতে আপনার লাইন উচ্চতায় আপনার মার্জিনগুলি সেট করুন
উন্নত
- Enhance.js বা স্থগিত ফন্ট লোডিং সহ ফন্ট লোডিং কর্মক্ষমতা উন্নত করুন
- সিমেন্টিক শিরোনামগুলির জন্য সাস @ অন্তর্ভুক্তগুলি ব্যবহার করুন।
- প্রায়শই আমাদের সাইডবার উইজেটে এইচ 5 স্টাইল ব্যবহার করা দরকার যার জন্য এইচ 2 মার্কআপ প্রয়োজন। আকার নিয়ন্ত্রণ করতে এবং নীচের কোডটি সহ শব্দার্থক থাকার জন্য দাড়িযুক্ত টাইপোগ্রাফিক মিক্সিন ব্যবহার করুন:
.সাইডবার এইচ 2 {@ শিরোনাম -5 lude অন্তর্ভুক্ত করুন
জাভাস্ক্রিপ্টে মিডিয়া প্রশ্নগুলি
যেহেতু আমরা মিডিয়া ক্যোয়ারির মাধ্যমে বিভিন্ন ভিউপোর্ট জুড়ে লেআউটটি নিয়ন্ত্রণ করতে সক্ষম হয়েছি, তখন থেকে আমরা আমাদের জাভাস্ক্রিপ্টটি চালানোর ক্ষেত্রে এটি বেঁধে দেওয়ার একটি উপায় সন্ধান করছি। নির্দিষ্ট ভিউপোর্টের প্রস্থ, উচ্চতা এবং ওরিয়েন্টেশনগুলিতে জাভাস্ক্রিপ্ট ফায়ার করার কয়েকটি উপায় রয়েছে এবং কিছু স্মার্ট ব্যক্তি এনকায়ার.জেএস এবং সিম্পল স্টেট ম্যানেজারের মতো কিছু সহজে ব্যবহারযোগ্য নেটিভ জেএস প্লাগইন লিখেছেন। এমনকি ম্যাচমিডিয়া ব্যবহার করে আপনি নিজে এটি তৈরি করতে পারেন। তবে আপনার কাছে এই সমস্যাটি রয়েছে যে আপনার মিডিয়া ক্যোয়ারীগুলি আপনার সিএসএস এবং জাভাস্ক্রিপ্টে নকল করতে হবে।
অ্যারন গুস্তাফসনের একটি ঝরঝরে কৌশল আছে যার অর্থ আপনার মিডিয়া ক্যোয়ারীগুলি আপনার সিএসএস এবং আপনার জেএসগুলিতে পরিচালনা করতে এবং মিলাতে হবে না। ধারণাটি মূলত জেরেমি কিথের কাছ থেকে এসেছিল এবং এই উদাহরণে গুস্তাফসন এটিকে সম্পূর্ণ বাস্তবায়নের দিকে নিয়ে গেছে।
GetActiveMQ (নেটম.এগ / মিডিয়া ২60০) ব্যবহার করে, শরীরের উপাদানটির শেষে ডিভ # getActiveMQ- প্রহরীকে ইনজেক্ট করুন এবং এটি লুকান। তারপরে CSS সেট এর মধ্যে # getActiveMQ-वाचক {ফন্ট-পরিবার: ব্রেক -0;} প্রথম মিডিয়া ক্যোয়ারিতে, ফন্ট-পরিবার: ব্রেক -1; দ্বিতীয়টি, ফন্ট-পরিবার: ব্রেক -২; তৃতীয় এবং আরও।
ভিউপোর্টের আকার পরিবর্তন হয়েছে কিনা তা পরীক্ষা করে দেখতে স্ক্রিপ্টটি ওয়াচরাইজাইজ () (নেটম.এগ / পর্যায়ক্রমিক -260) ব্যবহার করে এবং সক্রিয় ফন্ট-পরিবারটি আবার পড়ে। এখন আপনি জেএস বর্ধিতকরণগুলি যেমন কোনও ডিএল> তে ট্যাবড ইন্টারফেস যুক্ত করার ক্ষেত্রে এটি ব্যবহার করতে পারেন যখন ভিউপোর্টটি অনুমতি দেয়, লাইটবক্সের আচরণ পরিবর্তন করে বা ডেটা টেবিলের বিন্যাস আপডেট করে। নেটএম.এগ / অ্যাক্টিভ্যালে-260 এ getActiveMQ কোডেপেনটি দেখুন।
বেসিক
- বিভিন্ন ভিউপোর্টের জন্য জাভাস্ক্রিপ্ট সম্পর্কে ভুলে যান। ব্যবহারকারীদের এমন উপায়ে বিষয়বস্তু এবং ওয়েবসাইট ফাংশন সরবরাহ করুন যাতে তারা সমস্ত ভিউপোর্টে এটি অ্যাক্সেস করতে পারে। আমাদের কখনই জাভাস্ক্রিপ্টের দরকার নেই
উন্নত
- মিডিয়া কোয়েরিগুলির পূর্বনির্ধারিত তালিকা হিসাবে ব্রেকআপ ব্যবহার করে এবং getActiveMQ- নজরদারি করার জন্য ফন্ট পরিবারের তালিকা তৈরি করতে স্বয়ংক্রিয় করে গুস্তাফসনের পদ্ধতিটি প্রসারিত করুন
প্রগতিশীল বর্ধিতকরণ
প্রগতিশীল বর্ধন সম্পর্কে একটি সাধারণ ভুল ধারণাটি হ'ল লোকেরা মনে করে, 'ওহ ভাল আমি এই নতুন বৈশিষ্ট্যটি ব্যবহার করতে পারি না', তবে সত্যই, এটি এর বিপরীত। প্রগতিশীল বর্ধন মানে হ'ল আপনি কোনও বৈশিষ্ট্য সরবরাহ করতে পারেন যদি এটি কেবল একটি বা কোনও ব্রাউজারে সমর্থিত হয় এবং সময়ের সাথে সাথে নতুন সংস্করণগুলি আসার সাথে সাথে লোকেরা আরও ভাল অভিজ্ঞতা অর্জন করতে পারে।
আপনি যদি কোনও ওয়েবসাইটের মূল ফাংশনটি দেখে থাকেন তবে আপনি এটিকে এইচটিএমএল হিসাবে সরবরাহ করতে পারেন এবং সার্ভারের পাশটি সমস্ত প্রক্রিয়াজাতকরণ করতে পারেন। অর্থ প্রদান, ফর্মগুলি, পছন্দগুলি, ভাগ করে নেওয়া, ইমেলগুলি, ড্যাশবোর্ড - এগুলি সবই করা যায়। একবার বেসিক টাস্কটি তৈরি হয়ে গেলে আমরা তারপরে দুর্দান্ত ভয়ঙ্কর প্রযুক্তিগুলিকে স্তর করতে পারি, কারণ আমাদের যেগুলি পড়েছে তাদের ধরার জন্য আমাদের একটি সুরক্ষার জাল রয়েছে। আমরা এখানে যে উন্নত পদ্ধতির কথা বলেছি সেগুলির বেশিরভাগই প্রগতিশীল বর্ধনের উপর ভিত্তি করে।
লেআউট
নমনীয় বিন্যাসটি বলা সহজ, তবে এর অনেকগুলি ভিন্ন পন্থা রয়েছে। কম মার্কআপ সহ সহজ গ্রিড লেআউটগুলি তৈরি করুন: নবম-শিশু () নির্বাচক ব্যবহার করে।
/ * গ্রিডের জন্য মোবাইলের প্রথম প্রস্থের ঘোষণা করুন * / .গ্রিড-1-4 -4 ভাসা: বাম; প্রস্থ: 100%; } / * যখন ভিউপোর্টটি কমপক্ষে .5em.৫ মিমি হয় তারপরে গ্রিডটি প্রতি উপাদান অনুযায়ী 50% এ সেট করুন * / @ মিডিয়া (ন্যূন-প্রস্থ: 37.5 মিমি) {.গ্রিড-1-4 {প্রস্থ: 50%; } / * প্রথমটির পরে প্রতি দ্বিতীয় উপাদানটি ভাসাটি সাফ করুন। এটি গ্রিডে তৃতীয়, 5 তম, 7 ম, 9 ম ... লক্ষ্য করে * / .গ্রিড-1-4: নবম-প্রকার (2 এন + 1) {পরিষ্কার: বাম; ;} @ মিডিয়া (ন্যূনতম প্রস্থ: 64 মিমি) g .গ্রিড-1-4 {প্রস্থ: 25%; } / * পূর্বের পরিষ্কারটি মুছে ফেলুন * / .গ্রিড-1-4: প্রকারের (2 এন + 1) {পরিষ্কার: কিছুই নয়; } / * প্রথমটির পরে প্রতি চতুর্থ উপাদানটি ভাসাটি সাফ করুন। এটি গ্রিডে 5 ম, 9 ম ... লক্ষ্য করে; * / .গ্রিড-1-4: নবম-প্রকার (4 এন + 1) {পরিষ্কার: বাম; }}
আপনার লেআউটগুলির অবস্থান এবং ভাসা ব্যবহারের জন্য বিদায় জানাল ave তারা আমাদের আজ অবধি ভাল পরিবেশন করেছে, লেআউট জন্য তাদের ব্যবহার একটি প্রয়োজনীয় হ্যাক হয়েছে। এখন আমরা এই ব্লকে দুটি নতুন বাচ্চা পেয়েছি যা আমাদের সমস্ত লেআউট সমস্যাগুলি সমাধান করতে সহায়তা করবে - ফ্লেক্সবক্স এবং গ্রিড।
ফ্লেক্সবক্স পৃথক মডিউলগুলির জন্য দুর্দান্ত, প্রতিটি মডিউলগুলির মধ্যে টুকরো টুকরো বিন্যাস নিয়ন্ত্রণ করে। আমরা এমন লেআউটগুলি সরবরাহ করার চেষ্টা করি যা ফ্লেক্সবক্স ব্যবহার করে আরও সহজেই অর্জন করা যায় এবং প্রতিক্রিয়াশীল সাইটগুলির সাথে এটি আরও সত্য। এ সম্পর্কে আরও তথ্যের জন্য, ফ্লেক্সবক্স বা ফ্লেক্সবক্স পলিফিলের জন্য সিএসএস ট্রিকসের গাইডটি পরীক্ষা করে দেখুন।
সিএসএস গ্রিড লেআউট
গ্রিড ম্যাক্রো স্তরের বিন্যাসের জন্য আরও বেশি। গ্রিড লেআউট মডিউল আপনাকে আপনার সিএসএসের মধ্যে আপনার বিন্যাসের বর্ণনা দেওয়ার দুর্দান্ত উপায় দেয়। এই মুহূর্তে এটি খসড়া পর্যায়ে থাকা অবস্থায়, আমি এই নিবন্ধটি সিএসএস গ্রিড লেআউটে রেচেল অ্যান্ড্রু দ্বারা প্রস্তাব করছি।
অবশেষে
আপনার প্রতিক্রিয়াশীল অনুশীলনটি প্রসারিত করার জন্য এই কয়েকটি টিপস। কোনও নতুন প্রতিক্রিয়াশীল কাজের কাছে যাওয়ার সময়, একধাপ পিছনে যান এবং নিশ্চিত হন যে আপনি বেসিকগুলি ঠিকঠাক পেয়েছেন। আপনার বিষয়বস্তু, এইচটিএমএল এবং স্তরগুলির উন্নত অভিজ্ঞতাগুলি দিয়ে তাদের শুরু করুন এবং আপনি যেখানে নিজের ডিজাইন নিতে পারবেন তার কোনও সীমা থাকবে না।
এই নিবন্ধটি মূলত 260 এর সংখ্যাটিতে প্রকাশিত হয়েছিল নেট ম্যাগাজিন.
