"মোবাইল প্রথম" এর উত্স
প্রতিক্রিয়াশীল ডিজাইনের ক্ষেত্রে "মোবাইল প্রথম" ধারণাটি এমন এক সময় থেকে আসে যখন মোবাইল ডিভাইসগুলির জন্য ব্রাউজারগুলি আপনি কোনও ডেস্কটপ ডিভাইসে যা পাবেন তার চেয়ে অনেক কম সক্ষম ছিল। তাদের মধ্যে অনেকে মিডিয়ার প্রশ্নগুলিকে একেবারেই সমর্থন করেননি, তাই অভিনব ডেস্কটপ ডিজাইন তৈরি করার এবং তারপরে সংকীর্ণ ভিউপোর্টের জন্য মিডিয়া ক্যোয়ারীগুলি ব্যবহার করে স্টাইলগুলিতে স্টিক করার ধারণাটি তার মুখের উপর সমতল হয়ে যায়।
মিডিয়া প্রশ্নের জন্য সমর্থন অনুপস্থিতি আসলে প্রথম মিডিয়া ক্যোয়ারী।
- ব্রায়ান রিগার
মোবাইল কি এখনও প্রাসঙ্গিক?
মোবাইল ডিভাইসগুলির জন্য ব্রাউজারগুলি তাদের ডেস্কটপ অংশগুলির সাথে জড়িত রয়েছে তা সত্ত্বেও, "স্টাইল প্রথম" আপনার স্টাইলগুলি লেখার সবচেয়ে যুক্তিসঙ্গত উপায়।
আমি "পূর্ববর্তী স্টাইলের ঘোষণাগুলি পূর্বাবস্থায়িত করা এড়াতে" পদ বিবেচনা করতে পছন্দ করি। শৈলীগুলি লেখার পরিবর্তে এবং পরে সেগুলি ওভাররাইড করার পরিবর্তে একটি অ্যাডিটিভ অ্যাপ্রোচ, প্রায় সবসময় আরও কমপ্যাক্ট স্টাইলশিট নিয়ে যায়। বেশিরভাগ / সমস্ত ডিভাইসের জন্য উপযুক্ত স্টাইলগুলি মিডিয়া কোয়েরির বাইরে খুঁজে পাওয়া উচিত, যখন কেবল নির্দিষ্ট ভিউপোর্টের সাথে প্রাসঙ্গিক স্টাইলগুলি মিডিয়া ক্যোয়ারির পিছনে থাকা উচিত।
একটি "প্রথম ডেস্কটপ" পদ্ধতির তুলনা করুন:
.column {
float: left;
width: 50%;
}
@media all and (max-width: 50em) {
.column {
float: none;
width: auto;
}
}
"মোবাইল প্রথম" পদ্ধতির কাছে:
@media all and (min-width: 50em) {
.column {
float: left;
width: 50%;
}
}
ফলাফলগুলি একই, তবে পরবর্তীকালে আরও কমপ্যাক্ট। নমুনা শৈলীগুলি নির্লজ্জভাবে ব্র্যাড ফ্রস্টের অত্যন্ত কার্যকর মিডিয়া ক্যোয়ারীর 7 টি অভ্যাস থেকে অনুলিপি করা হয়েছে ।
কয়েকটি দুর্লভ ব্যতিক্রম রয়েছে যেখানে চারপাশের অন্যান্য পদ্ধতির চেয়ে "ডেস্কটপ প্রথম" উপযুক্ত first এর মধ্যে সর্বাধিক উল্লেখযোগ্য হ'ল আপনি যখন প্রতিক্রিয়াশীল টেবিলের মতো কাজ করেন। বৃহত্তর ভিউপোর্টগুলি টেবিলগুলির জন্য ডিফল্ট শৈলীগুলি চাইবে, তবে একটি সংকীর্ণ ভিউপোর্ট এই সমস্তগুলি ওভাররাইড করতে চাইবে যাতে সামগ্রীগুলি উল্লম্বভাবে স্ট্যাক করা যায়।
আপনার স্টাইলশিটগুলি ভাঙবেন না
একটি জিনিস যা আপনার একেবারে করা উচিত নয় তা হ'ল আপনার প্রতিক্রিয়াশীল স্টাইলগুলি পৃথক সিএসএস ফাইলগুলিতে ভাঙ্গা এবং লিংক উপাদানটিতে মিডিয়া বৈশিষ্ট্যটি ব্যবহার করা। সংযুক্ত আরব আমিরাতকে সমস্ত লিঙ্কযুক্ত স্টাইলশিট ডাউনলোড করার অনাকাঙ্ক্ষিত পরিণতি রয়েছে (অর্থাত্ এটি করার জন্য কোনও গতির উন্নতি নেই)।
<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
কোডটি প্রথমে মোবাইল হওয়া উচিত, তবে ডিজাইনের পদ্ধতির কী হবে?
আমি মতামত যে এটি কিছু আসে না। ডিজাইনের সাথে সম্পর্কিত সমস্ত ভিউপোর্টের লেআউটগুলি অবশ্যই সম্পন্ন করতে হবে (আপনি যদি কোনও ছোটখাটো ব্রেকপয়েন্টে প্রয়োজনীয় হতে পারেন তবে এতে কমপক্ষে 2 বা 5 জনের বেশি জড়িত থাকতে পারে!), অর্ডারটি শেষ পর্যন্ত কোনও বিষয় নয়। অনেক ডিজাইনারের ডেস্কটপ লেআউট দিয়ে শুরু করার শৃঙ্খলার অভাব হয় এবং এটি খুঁজে পাওয়া যায় যে একটি মোবাইল বিন্যাস থেকে শুরু করা আরও সহজ।
আপনি যদি কোনও ডেস্কটপ বিন্যাস থেকে শুরু করতে চান, আপনাকে অবশ্যই সেই গৌরবময় সাদা সাদা জায়গার সমস্ত অংশকে ভরাট করার প্রলোভন এড়াতে হবে যা সেই পৃষ্ঠার সামগ্রীতে বৃদ্ধি করে না। আপনার কি সত্যই দরকার যে হাসিখুশি মহিলার ফোন রাখা 800x600 স্টক ফটো? অপ্রয়োজনীয় ফ্লাফ ডাউনলোড করতে কেবলমাত্র মোবাইল ব্যবহারকারীর অতিরিক্ত অর্থ ব্যয় করতে হবে এবং ডেস্কটপ ব্যবহারকারীর অতীত এড়ানোর জন্য এটি কেবল একটি দৃষ্টিভঙ্গি।