মোবাইল ডিভাইসের জন্য রেজোলিউশনটি আসলে বড়, কেবলমাত্র পর্দার আকার ছোট। এর উপর ভিত্তি করে:
উত্তর:
প্রতিক্রিয়াশীল নকশা স্ক্রিন রেজোলিউশন বা পর্দার আকারের উপর ভিত্তি করে। পরিবর্তে, প্রতিক্রিয়াশীল নকশা সামগ্রী এবং এটি কীভাবে তৈরি হয়েছে তার ভিত্তিতে যা এটি সমস্ত আকার এবং রেজোলিউশনে ফিট করতে দেয়।
আপনি প্রতিক্রিয়াশীল নকশা সম্পর্কে যেভাবে ভাবছেন তা ভুল। আমি ধরে নিলাম আপনি আরও প্রচলিত মুদ্রণ ডিজাইনের পটভূমি থেকে এসেছেন, হ্যাঁ? ওয়েবের জন্য ডিজাইনিং অনেক বেশি বিনামূল্যে। প্রতিক্রিয়াশীল ওয়েবসাইটগুলিতে প্রায়শই একই, প্রচলিত ব্রেকপয়েন্ট বা নির্দিষ্ট আকার / রেজোলিউশন থাকে না কারণ ওয়েব তার চেয়ে আরও বেশি মঞ্জুরি দেয় - এটি সমস্ত স্ক্রিনের মাপে পৌঁছানোর অনুমতি দেয়। যেমন, আপনি যতক্ষণ মাপসই তা যথাযথ হিসাবে ডিজাইন করছেন তার জন্য যা কিছু আকার সঠিক তা ব্যবহার করে আপনি ডিজাইন করতে পারেন।
বলা হচ্ছে যে, সর্বোত্তম অনুশীলন হ'ল একটি মোবাইল-প্রথম উপায়ে ডিজাইন করা , যা সত্যই মোবাইলটির নাম রাখা উচিত সবচেয়ে গুরুত্বপূর্ণ । এটি আপনাকে সবচেয়ে গুরুত্বপূর্ণ এবং সম্ভাব্য সামগ্রীতে ফোকাস করতে বাধ্য করে এবং তারপরে আপনাকে বড় স্ক্রিনে আরও শুরু করতে বাধ্য করার পরিবর্তে আরও বড় স্ক্রিনের জন্য আরও যুক্ত করতে দেয় তারপর ছোটগুলির জন্য ডিজাইনের সময় জিনিসগুলি সরিয়ে দেয়। আপনি আমার প্রতিক্রিয়াশীল ডিজাইনের প্রাইমারে এটি সম্পর্কে আরও পড়তে পারেন ।
তবে আমাদের এমনভাবে ডিজাইনও করতে হবে যা দায়িত্বশীলতার সুযোগ দেয়। প্রোটোটাইপ ফর্মে বা কোনও ওয়্যারফ্রেমিং প্রোগ্রামে হোক, এর সেরা অনুশীলনটি একটি লাইভ উদাহরণ, কোনও পিএসএসের মতো স্থির নথি নয়। যখন এটি বিকাশকারী পক্ষের দিকে আসে, আমাদের প্রতিক্রিয়াশীল ইউনিটগুলি ব্যবহার করা উচিত এবং আমাদের কোডটি এমনভাবে তৈরি করা উচিত যা বোঝা যায়।
এটি বলা হওয়ার সাথে সাথে আপনার জিনিসগুলি পিক্সেলগুলির আকারে করা উচিত, যার অর্থ রেজোলিউশন, পর্দার আকার নয়।
সত্যিই দুর্দান্ত প্রশ্ন!
কেবলমাত্র কিছু ধারণা এখানে আমরা বর্তমানে যে দ্বিধা-দ্বন্দ্বের মুখোমুখি হয়েছি তা মন্তব্য করে comment
যুগ যুগ ধরে প্রযুক্তিটি হওয়া উচিত নয় ।
আমাদের সকলকে কিছুটা নমনীয়তা এবং স্বাধীনতার সাথে ব্যবহারকারীকে কিছু অ্যাডিশনাল অ্যাডজাস্টমেন্ট করতে দেয় এমন বাস্তব জীবন ইউনিট (বা পার্সভাইড আকার) এর উপর ভিত্তি করে ডিজাইনিং করা উচিত ।
কিন্তু বাস্তব জীবনের পরিমাপ জানতে আমাদের উভয় তথ্য প্রয়োজন। Phisical মাত্রা এবং ডিভাইস রেজোলিউশন = পিক্সেল ঘনত্ব।
তবে দেখা যাচ্ছে যে কয়েক বছর আগে স্ক্রীন ডিভাইসগুলি পিক্সেল ঘনত্ব ঘোষণা করতে শুরু করেছে। এবং কিছু এটি সার্ভারে ঘোষণা করে না, কেবল এটি সম্পর্কে প্রচুর প্রচার করুন। (আকা আইপ্যাড, আইফোন)
ডিসপ্লে রেজোলিউশন অপারেটিং সিস্টেম দ্বারা সনাক্ত করা যায় কারণ এটি অনুসারে একটি সংকেত প্রেরণ করা জরুরী তবে পর্দার আসল জীবনের আকারের জন্য আমাদের প্রতিটি মডেলের একটি বিশাল ডাটাবেস প্রয়োজন। ভাল না.
এটি আমাদের কেবলমাত্র এই স্ক্রিন রেজোলিউশনের সাথে ছেড়ে দেয় যে এটি কিছু তথ্য যা আমরা জানতে পারি।
তবে মবিল ডিভাইসে একই রেজোলিউশনের চেয়ে বড় ফুলএইচডি মনিটরের ডিজাইন করা সম্পূর্ণ আলাদা। 1920x1080 উভয়ই। সেকি।
একটি বিশেষ কেস হ'ল প্রজেক্টরগুলিতে, বেকোস আমাদের প্রজেক্টিংয়ের দূরত্ব এবং দর্শকদের দূরত্বের কোনও চিহ্ন নেই।
একটি আংশিক সমাধান হ'ল মিডিয়া ক্যোয়ারী এবং ভেক্টর উপাদানগুলি ইত্যাদি etc.
ওয়েব ডিজাইনের জন্য: কমপক্ষে ততক্ষণ পর্যন্ত আমরা আরও ভাল কিছু খুঁজে পাই।
তরল নকশা (শতাংশ) এবং প্রাকৃতিক প্রবাহ, ভাল সংজ্ঞায়িত বিভাগগুলি।
1920 প্রশস্ত
মিডিয়া ক্যোয়ারী সহ সম্ভবত 1280 এ
এবং / অথবা 1024 এ
সম্ভবত 720 এ
এবং 480।
প্রশাসনিক সহায়তার জন্য ডিভাইস সনাক্তকরণ সহ
মোবাইল নেটিভ অ্যাপ্লিকেশনগুলির জন্য
এটি যেমন সুনির্দিষ্ট, কেবলমাত্র ইউআই এবং আইকনগুলি সম্পর্কে ব্র্যান্ডের নির্দেশিকাগুলি অনুসরণ করুন।
সম্পাদনা করা হয়েছে।
ফুলএইচডি মোবাইল ডিভাইসে কেন ছোট পর্দার রেজোলিউশন বেছে নিচ্ছেন?
একটি স্মার্টফোনটির ফুলএইচডি এর বাস্তব রেজোলিউশন থাকে তবে সাধারণত এটি সার্ভার এবং ব্রাউজারে একটি ছোট রেজোলিউশন ঘোষণা করে। আপনি এই গুগলিং https://www.google.com/search?q=hat+is+my+screen+resolution পরীক্ষা করতে পারেন যাতে মিডিয়া কোয়েরিগুলি কাজ করে।
প্রথমে আপনাকে উত্তর এবং মূল্যবান নির্দেশিকাগুলির জন্য ধন্যবাদ জানাই, এটি অবশ্যই সহায়তা করেছিল!
আমাকে আমার উপসংহার যোগ করার অনুমতি দিন:
ব্যবহারিকভাবে, মোবাইল স্ক্রিন রেজোলিউশনকে টার্গেট করা ভাল ইউএক্স নয়, ছোট পর্দার জন্য রেজোলিউশনটি খুব বেশি, ফন্টগুলি পড়তে খুব ছোট হবে, আইকনগুলি ক্লিক করতে খুব ছোট হবে ইত্যাদি etc.
সুতরাং, আসল ভিউপোর্টের আকারের উপর ভিত্তি করে নকশা করা আরও ভাল! এইভাবে এটি কোনও ব্যবহারকারী কী দেখতে এবং অনুভব করতে পারে তার ভিত্তিতে।
অর্জন যে বাস্তব জীবনে, আমরা ভিতরে ভিউপোর্ট প্রস্থ মেটা ট্যাগটি যোগ করা উচিত <head>এইচটিএমএল নথি:
<meta name="viewport" content="width=device-width, initial-scale=1.0">এটি ব্রাউজারকে পর্দার প্রস্থের সমান প্রস্থের সাথে পৃষ্ঠাটি রেন্ডার করতে বলে যাতে এটি নিশ্চিত করে যে এইচটিএমএল পৃষ্ঠার প্রস্থ পিক্সেলের ক্ষেত্রে স্ক্রিনের প্রস্থের সমান হয়। মিডিয়া ক্যোয়ারীগুলি বিভিন্ন মোবাইল ভিউপোর্ট মাপ (যা একে অপরের নিকটবর্তী) লক্ষ্য করে খুব সহজেই উন্নয়নের পরিকল্পনা করা যেতে পারে এবং আরও দৃশ্যমানভাবে পরিষ্কার উপাদান তৈরি করবে।
আমি ভুল হলে আমাকে সংশোধন করুন।
আমার নম্র অভিজ্ঞতার ভিত্তিতে আমি উন্নত প্রতিক্রিয়াশীল ওয়েবসাইট বিকাশের জন্য নীচের পদক্ষেপগুলি পরামর্শ দিই:
1- ভিউ-পোর্ট মেটা ব্যবহার করুন (উপরে দেখুন), এটি গুগল অনুসারে মোবাইল অনুসন্ধানের ফলাফলগুলিতে ওয়েবপৃষ্ঠার র্যাঙ্কিংকেও বাড়িয়ে তুলবে। http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
পরীক্ষার পরে দেখা যাচ্ছে যে একা ভিউ-পোর্ট মেটা যুক্ত করা আপনার ওয়েবসাইটকে মোবাইল পরীক্ষার সরঞ্জামগুলিতে গ্রেড দেবে https://developers.google.com/speed/pagespeed/insights/
2- আপনি মোবাইল-প্রথম পদ্ধতির প্রয়োগ বিবেচনা করতে চাইতে পারেন, ছোট থেকে বড় হওয়া সর্বদা সহজ (আপনার ওয়েবসাইটটি কতটা জটিল তার উপর নির্ভর করে)
3- একটি সংকর প্রতিক্রিয়াশীল সিস্টেম প্রয়োগ করুন, এটি সম্পাদন করতে অভিযোজিত (তরল) এবং প্রতিক্রিয়াশীল (সিএসএস মিডিয়া-কোয়েরি) এর মধ্যে একটি মিশ্রণ:
প্রস্থ এবং অনুভূমিক মার্জিন / প্যাডিংয়ের জন্য শতাংশ ব্যবহার করুন । (উল্লম্ব মার্জিনগুলি যদি আপনার পছন্দ হয় তবে নির্দিষ্ট পিক্সেল আকার থাকতে পারে .. স্ক্রোলিং আর কোনও সমস্যা নয়)
ব্যবহার করুন ই.এম. ফন্টের এই ভাবে, যখন আপনি মিডিয়া-ক্যোয়ারী সব সিএসএস উপাদান শরীরের (অথবা HTML) এর জন্য ফন্ট সাইজ পরিবর্তন যে আকার মানিয়ে করবে px আকারে ব্যবহার করে এটি একটি দুঃস্বপ্ন করতে হবে আপনি প্রতিটি সিএসএস ক্লাসের জন্য যেতে হবে কারণ এবং এর ফন্টের আকার পরিবর্তন করুন।
বাম দিকে ফ্লাট ডিভ এর যাতে তারা সঠিকভাবে উপলভ্য জায়গাতে (অথবা ডানদিকে যদি আপনার নকশার প্রয়োজন হয় ডানদিকে) সঠিকভাবে প্রান্তিক হয়।
4- ব্রেক পয়েন্টগুলি সংজ্ঞায়িত করুন , এর জন্য একটি প্রতিক্রিয়াশীল পরীক্ষামূলক সরঞ্জাম ব্যবহার করুন। আমি ফায়ারফক্স প্রতিক্রিয়াশীল ডিজাইন ভিউটি ব্যবহার করি, আপনি ওয়েবসাইটটি ত্রুটিযুক্ত হয়ে যাওয়ার পয়েন্টে পৌঁছানো অবধি প্রশস্তিকে সংকীর্ণ করুন (উদাহরণস্বরূপ 500px), এটি একটি ব্রেক পয়েন্ট হিসাবে চিহ্নিত হয়।
সেই ব্রেক পয়েন্ট (500px) এর জন্য মিডিয়া ক্যোয়ারির ভিতরে নতুন সিএসএস বিধি প্রয়োগ করুন ,
5- ওয়েবসাইটের মান এবং স্পষ্টতা সংরক্ষণ মনে রাখবেন! যদি উপাদানগুলি অস্পষ্ট হয়ে যায় এবং একে অপরের খুব কাছাকাছি হয়ে যায়, তবে ধারকগুলির প্রস্থ দখল করতে উপাদানগুলির প্রস্থকে প্রসারিত করুন এবং এগুলি উল্লম্বভাবে স্ট্যাক করুন,
এবং মনে রাখবেন যে শরীরের জন্য একটি নতুন ফন্ট-আকার দেওয়া যাতে সমস্ত উপ-উপাদানগুলি একটি বড় ফন্টের উত্তরাধিকারী হয় এবং আরও পাঠযোগ্য হয়।
The- প্রতিক্রিয়াশীল পরীক্ষার পুনরাবৃত্তি করুন এবং আপনার দ্বিতীয় ব্রেক পয়েন্টটি সংজ্ঞায়িত করুন, সম্ভবত আপনি অনেক ব্রেক পয়েন্ট পাবেন না কারণ আমরা এখানে তরল ডিজাইন ব্যবহার করছি এবং এটিই সেখানে শতাংশের ব্যবহারের ব্যাকব্যাক ব্যবহার করছে!
আমি ভারী ডিজাইনের উপাদানগুলির সাথে একটি বড় ওয়েবসাইটে আগে কাজ করেছি এবং এটিতে কেবল 2 টি মিডিয়া প্রশ্নের প্রয়োজন :)
আশা করি এটি সাহায্য করবে
ভার্চুয়াল পিক্সেল (রিয়েল পিক্সেল নয় ) ভিউপোর্টের মাত্রা (পর্দা নয়) এর উপর ভিত্তি করে একটি প্রতিক্রিয়াশীল পৃষ্ঠাটি কীভাবে রিফ্লো হয় ।
একটি traditionalতিহ্যবাহী ডেস্কটপে যেখানে 1 ভার্চুয়াল পিক্সেল = 1 রিয়েল পিক্সেল, যদি আপনার ব্রাউজারটি প্রস্থে 1000px সেট করা থাকে, তবে পৃষ্ঠাটি এটি ফিট করার জন্য প্রত্যাবর্তন করবে।
একটি আইফোন 6 এ, যেখানে 1 ভার্চুয়াল পিক্সেল (অ্যাপল এই পয়েন্টগুলিকে কল করে ) = 3 রিয়েল পিক্সেল, ব্রাউজারের প্রস্থটি পর্দার প্রস্থ এবং সামগ্রীটি 417px প্রস্থের সাথে মাপসই করতে প্রত্যাবর্তন করবে (যদিও এটি বাস্তবে 1242 রিয়েল পিক্সেল হলেও)
সুতরাং এটি কিছুটা অদ্ভুত, উপরের উদাহরণগুলির সাথে, কম রিয়েল পিক্সেল সহ ডিভাইসটি আসলে একটি প্রতিক্রিয়াশীল বিন্যাসে আরও প্রশস্ত ভিউপোর্ট হিসাবে দেখা যায় ।