মিডিয়া ক্যোয়ারী: ডেস্কটপ, ট্যাবলেট এবং মোবাইল কীভাবে লক্ষ্যবস্তু করা যায়?

Question

আমি মিডিয়া প্রশ্নের উপর কিছু গবেষণা করে চলেছি এবং এখনও কিছু নির্দিষ্ট মাপের ডিভাইসগুলি কীভাবে লক্ষ্যবস্তু করা যায় তা আমি যথেষ্ট বুঝতে পারি না।

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

আমি কিছু উদাহরণ পেয়েছি:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

বা:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

প্রতিটি ডিভাইসের জন্য ব্রেকপয়েন্টগুলি কী হওয়া উচিত?

Comments

এই সহায়ক নিবন্ধগুলি দেখুন: * কীভাবে একটি মোবাইল ওয়েবসাইট তৈরি করবেন - স্মাগিং ম্যাগাজিন * আপনার ওয়েবসাইটের একটি মোবাইল সংস্করণ তৈরি করতে CSS3 মিডিয়া প্রশ্নগুলি কীভাবে ব্যবহার করবেন - স্ম্যাশিং ম্যাগাজিন

— আহসান রাঠোদ

স্ট্যান্ডার্ড ডিভাইসগুলির জন্য মিডিয়া ক্যোয়ারী css-tricks.com/snippets/css/media-queries- for-

— Dmytro Dzyubak

Answer 1

আইএমও এগুলি সেরা ব্রেকপয়েন্ট:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

সম্পাদনা : 960 গ্রিডের সাথে আরও ভাল কাজ করার জন্য परिष्कृत:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

অনুশীলনে, অনেক ডিজাইনার পিক্সেলগুলিকে ইএমএসে রূপান্তর করেন, মূলত খ / সি ইএমএস আরও ভালভাবে জুম করা যায়। স্ট্যান্ডার্ড জুম এ 1em === 16px। ইএমএস 1em/16pxপেতে পিক্সেলগুলি দ্বারা গুণ করুন । উদাহরণস্বরূপ 320px === 20em,।

মন্তব্যের প্রতিক্রিয়া হিসাবে, min-width"মোবাইল-ফার্স্ট" ডিজাইনে এটি স্ট্যান্ডার্ড, যেখানে আপনি আপনার ক্ষুদ্রতম পর্দার জন্য ডিজাইন করে শুরু করেন এবং তারপরে ক্রমবর্ধমান মিডিয়া প্রশ্নগুলি যুক্ত করুন, আপনাকে আরও বড় এবং বড় পর্দার দিকে কাজ করে। আপনি পছন্দ কিনা তথাপি min-, max-অথবা সমন্বয় উহার, মন যে যদি একাধিক নিয়ম একই উপাদান মেলে, পরে নিয়ম আগের নিয়ম ওভাররাইড হবে রাখা আপনার নিয়ম শৃঙ্খলা জ্ঞাত হতে।

Comments

আমি মিডিয়া প্রশ্নের নীচের সীমাটি বাড়ানোর বিষয়ে ভাবছিলাম। যৌক্তিক বলে মনে হচ্ছে তবে এটি প্রায়শই উল্লেখ করা হয়নি। এমনকি আমি এটি আরও একধাপ এগিয়ে নিয়ে গিয়ে ইএমএসে রূপান্তর করতে চাই। জুমিং এবং পিএক্স মিডিয়া প্রশ্নের সাথে ইথান মার্কোটের সাইটের আচরণের @ জোনিকর্পি স্ক্রিনশটগুলি দেখুন। github.com/scottjehl/Respond/issues/18

— ল্যারি

আপনি কেন সর্বোচ্চ প্রস্থের চেয়ে ন্যূনতম প্রস্থ ব্যবহার করবেন? আপনি কীভাবে প্রতিরোধ করবেন যে min-width: 320pxসিএসএস ওভাররাইড করে min-width: 801px?

— ব্যবহারকারী2019515

এই কোডটি আমার মোবাইল ডিভাইসে কাজ করে না! কেউ কি একটি কাজের উদাহরণ প্রদান করতে পারেন!

— জ্যাকব

কারও কি এর সাথে "সর্বোচ্চ-প্রস্থ" সমতুল্য রয়েছে?

— পাইলিনাক্স

2018 - 2 কে এবং 4 কে বাড়ছে

— আলেকজান্ডার

Answer 2

নির্দিষ্ট ডিভাইস বা আকারগুলি লক্ষ্য করবেন না!

সাধারণ জ্ঞান হয় নির্দিষ্ট ডিভাইস বা মাপ লক্ষ্য না , কিন্তু শব্দটি 'ব্রেকপয়েন্ট' reframe করুন:

• প্রথমে মোবাইলের জন্য সাইটটি বিকাশ করুন শতাংশ বা ইএমএস ব্যবহার করে, পিক্সেল নয়,
• তারপরে এটি আরও বড় ভিউপোর্টে চেষ্টা করে দেখুন এবং এটি কোথায় ব্যর্থ হতে শুরু করে তা নোট করুন,
• বিন্যাসটি নতুন করে ডিজাইন করুন এবং কেবল ভাঙা অংশগুলি পরিচালনা করতে একটি CSS মিডিয়া ক্যোয়ারী যুক্ত করুন,
• আপনি পরবর্তী ব্রেকপয়েন্টে পৌঁছা পর্যন্ত প্রক্রিয়াটি পুনরাবৃত্তি করুন।

আপনি মার্ক্প ড্রামমন্ডের দ্বারা 'ব্রেকপয়েন্টগুলি মারা গেছেন' তেমন 'প্রাকৃতিক' ব্রেকপয়েন্টগুলি সন্ধান করতে প্রতিক্রিয়াশীল px.com ব্যবহার করতে পারেন ।

প্রাকৃতিক ব্রেকপয়েন্টগুলি ব্যবহার করুন

'ব্রেকপয়েন্টস' তারপরে আসল পয়েন্টে পরিণত হয় যেখানে আপনার মোবাইল ডিজাইনটি 'ব্রেক' শুরু করে অর্থাৎ ব্যবহারযোগ্য বা দৃষ্টিভঙ্গিজনক হতে বিরত থাকে। মিডিয়া প্রশ্নগুলি ছাড়াই আপনার ভাল কার্যকারী মোবাইল সাইট হয়ে গেলে আপনি নির্দিষ্ট আকারগুলির বিষয়ে উদ্বিগ্ন হওয়া বন্ধ করতে পারেন এবং কেবল এমন মিডিয়া কোয়েরি যুক্ত করতে পারেন যা ধারাবাহিকভাবে বৃহত্তর ভিউপোর্টগুলি পরিচালনা করে।

আপনি যদি কোনও ডিজাইনের সঠিক স্ক্রিন আকারে পিন করার চেষ্টা না করে থাকেন তবে এই পদ্ধতির নির্দিষ্ট ডিভাইসগুলিকে টার্গেট করার প্রয়োজনীয়তা সরিয়ে কাজ করে । প্রতিটি ব্রেকপয়েন্ট এ নকশা নিজেই অখণ্ডতা নিশ্চিত করে যে এটা যে কোনো আকারের এ রাখা হবে। অন্য কথায়, যদি কোনও মেনু / বিষয়বস্তু বিভাগ / যা নির্দিষ্ট আকারে ব্যবহারযোগ্য হওয়া বন্ধ করে দেয় তবে নির্দিষ্ট আকারের আকারের জন্য নয় , সেই আকারের জন্য একটি ব্রেকপয়েন্ট ডিজাইন করুন ।

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

শব্দার্থক মার্কআপ ব্যবহার করুন

উপরন্তু, সহজ এবং আরো শব্দার্থিক করে DOM গঠন সঙ্গে nav, header, main, section, footerইত্যাদি (যেমন জঘন্য কাজ এড়ানো div class="header"নেস্টেড ভেতরের সঙ্গে divট্যাগ) তত সহজ প্রকৌশলী সংবেদনশীলতা হবে, বিশেষ করে ব্যবহার করে ভাসে এড়ানো সিএসএস গ্রিড লেআউট (সারা Drasner এর গ্রিড জেনারেটরের একটি হল এর জন্য দুর্দান্ত সরঞ্জাম) এবং আপনার আরডাব্লুডি ডিজাইন পরিকল্পনা অনুসারে সাজানো এবং পুনরায় অর্ডার করার জন্য ফ্লেক্সবক্স ।

Comments

গ্রাহকরা চাইবেন যে তাদের সাইটটি তাদের আইপ্যাডে সেরকম দেখায়। আমার সেরা ব্রেকপয়েন্টটি আইপ্যাডে মোবাইল লেআউটে স্যুইচ করবে। গ্রাহকরা তা গ্রহণ করবেন না, তারা আইপ্যাড এবং অন্যান্য ট্যাবলেটগুলিতে অভিনব সংস্করণ প্রদর্শিত হবে। সাধারণ জ্ঞান আমার বেতন পরিশোধ করে না :) ভিউপোর্টের মেটা ট্যাগের সাথে আমার কৌশলগুলি করা দরকার। এটি অত্যন্ত বেদনাদায়ক ছিল তবে আমি জাভাস্ক্রিপ্টের থেকে সামান্য সাহায্যে এটিকে টানলাম (বরাবরের মতো)। পিএস: আমি পিক্সেল নয়, সেমি ইউনিট ব্যবহার করেছি।

— রল্ফ

প্রাকৃতিক ব্রেকপয়েন্ট সহ আপনার মাঝারি আকারের ব্রেকপয়েন্ট থাকতে পারে যা ল্যান্ডস্কেপ মোডে আইপ্যাড (এবং অন্যান্য ট্যাবলেটগুলি) অন্তর্ভুক্ত করতে পারে বা প্রতিকৃতি মোডের জন্য অন্য ব্রেকপয়েন্টটি যুক্ত করতে পারে। আমি মাঝে মাঝে চারটি ব্রেকপয়েন্ট ব্যবহার করেছি, সর্বদা সিএসএস শুরু করে এবং মোবাইল-প্রথম দিয়ে সমস্ত মার্কআপ (মোবাইলের উপরে স্কেল করা এবং ফোকাস করা মানে আপনার নকশা এবং বিষয়বস্তুটি প্রয়োজনীয় জিনিসগুলির নিচে রেখে দেওয়া হয়েছে, যা আপনি আকার বাড়ার সাথে সাথে প্রসারিত করতে পারেন) , একটি মাত্র 400px প্রশস্ত (বা 'মোবাইল আকারের উপরে') এর উপরে, তারপরে দুটি ডেস্কটপ-আকার, একটি অতিরিক্ত-প্রশস্ত। তারপরে আপনি আইপ্যাডে সুন্দরভাবে কাজ করতে 'উপরের মোবাইল' ব্রেকপয়েন্টটি স্টাইল করতে পারেন।

— ডেভ এভারিট

এটি সব ক্ষেত্রেই যথেষ্ট নয়। উদাহরণস্বরূপ, চেকবক্সগুলি নিন। এটি কোনও পিসিতে সমস্ত ওয়েব ব্রাউজারের জন্য ঠিকঠাক হতে পারে তবে ব্যবহারকারীর পক্ষে এটি স্পর্শ করার জন্য কোনও ট্যাবলেটই ছোট। কখনও কখনও আপনার ডিভাইসগুলি টার্গেট করার দরকার হয়, এটি সাধারণ জ্ঞান হোক না কেন। এই একটি ভাল নিবন্ধ হয় html5rocks.com/en/mobile/cross-device

— monalisa717

আমি এই সাথে ডেভের সাথে আছি - এমন অনেকগুলি ডিভাইস রয়েছে যা আপনি সেগুলির জন্য ডিজাইন করতে পারবেন না। প্রাকৃতিক ব্রেকপয়েন্টগুলি ব্যবহার নিশ্চিত করে যে আপনার সাইট উপলব্ধ স্ক্রিনের আকার নির্বিশেষে কাজ করে। গ্রাহকরা তাদের সাইটটি একটি নির্দিষ্ট উপায়ে দেখতে চান - তাদের আপনাকে শিক্ষিত করা দরকার। চেকবক্সগুলি খুব ছোট হওয়ার বিষয়ে - আপনার লেবেলগুলি কোথায়?

— ডিজগারসওয়ার্ড

@ ব্যবহারকারী 1411056 - ভাল নিবন্ধ। আমি অনুমান করি যে এটি আপনি কী লক্ষ্য করছেন এবং আপনার সাইট / ওয়েব অ্যাপ কীভাবে কাজ করে তার উপর নির্ভর করে। আমি বলব যে সংশোধনগুলি স্থাপনের আগে প্রাথমিক প্রতিক্রিয়াশীল ডিজাইনের সমস্ত বিষয় অন্তর্ভুক্ত করা উচিত। ডিজগার্স ওয়ার্ল্ড আমি সবাই ক্লায়েন্টদের শিক্ষিত করার জন্য - তারা কেন আপনাকে অর্থ প্রদান করছে? এবং হ্যাঁ, চেকবক্সগুলি প্রতিক্রিয়াশীল হতে পারে; লেবেলটি ট্যাপ করা সমান এবং লেবেলগুলি স্টাইল করা যেতে পারে। তারপরে স্পর্শ ডিভাইসে হোভারের অকেজোতা রয়েছে; যার বড় স্ক্রিন এবং 300 ম্যাপের ট্যাপ বিলম্ব থাকতে পারে । জেএস দ্বারা উন্নত একটি প্রাথমিক আরডি ফাউন্ডেশন।

— ডেভ এভারিট

Answer 3

আপনি যদি কোনও ডিভাইস লক্ষ্য করতে চান তবে কেবল লিখুন min-device-width। উদাহরণ স্বরূপ:

আইফোনের জন্য

@media only screen and (min-device-width: 480px){}

ট্যাবলেট জন্য

@media only screen and (min-device-width: 768px){}

এখানে কয়েকটি ভাল নিবন্ধ রয়েছে:

• অ্যাপল আইপ্যাডের জন্য কীভাবে আপনার ওয়েবসাইটটি ফিট করবেন
• CSS3 মিডিয়া ক্যোয়ারী

Comments

আমার ট্যাবলেটটির প্রস্থ 2560x1600 রয়েছে

— লিগি

এটি এমনটি হতে পারে তবে মোবাইল ডিভাইসে ব্রাউজারগুলির একটি "ডিভাইস পিক্সেল অনুপাত" থাকে। এটি এখানে প্রতিটি লজিক্যাল "পিক্সেল" কে আপনার ডিভাইসে 2, 3 বা আরও প্রকৃত পিক্সেল হিসাবে বিবেচনা করে। অন্যথায় একটি 20px উচ্চ চাপ দেওয়া খুব ছোট এবং অসম্ভব - বিশেষত আপনার স্ক্রিনে!

— গ্রেগ 84

@ মিডিয়া কেবলমাত্র স্ক্রিন এবং (ন্যূনতম ডিভাইস-প্রস্থ: 480px) {it আমি চেষ্টা করেছিলাম - ডেস্কটপগুলির সাথেও মেলে। তবে আমরা যদি কেবল মোবাইল ডিভাইস চাই?

— দারিয়াস.ভি

@ দারিয়াস.ভি, এটি "মোবাইল ফার্স্ট" মানসিকতার অনুসরণ করে, এর অর্থ হল আপনি মোবাইল শুরু করুন এবং তারপরে স্ক্রিন বড় হওয়ার সাথে সাথে পরিবর্তনগুলি করা হবে, সুতরাং আপনাকেও অন্তর্ভুক্ত করতে হবে: @media only screen and (min-device-width: 1024){}বা এই পরিবর্তনগুলি ওভাররাইড করার জন্য এরকম কিছু। অন্যথা, আপনি কাজ করতে পারে @media only screen and (MAX-device-width: 1024){}যদি আপনি একটি ডেস্কটপ নকশা সঙ্গে শুরু হয় এবং 1024. চেয়ে ছোট শুধুমাত্র কিছু পরিবর্তন করতে চান

— Steely

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

— TheBlackBenzKid

Answer 4

1. আমি এই সাইটটি রেজোলিউশন সন্ধান করতে এবং প্রকৃত সংখ্যা অনুযায়ী সিএসএস তৈরি করেছি। আমার নম্বরগুলি উপরের উত্তরগুলি থেকে বেশ খানিকটা পরিবর্তিত হয়, ব্যতীত আমার সিএসএসটি পছন্দসই ডিভাইসগুলিকে হিট করে।

2. এছাড়াও, আপনার মিডিয়া ক্যোয়ারির ঠিক পরে এই ডিবাগিং কোডটি করুন:

   @media only screen and (min-width: 769px) and (max-width: 1281px) { 
     /* for 10 inches tablet screens */
     body::before {
       content: "tablet to some desktop media query (769 > 1281) fired";
       font-weight: bold;
       display: block;
       text-align: center;
       background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       z-index: 99;
     }
   } 

   প্রতিটি একক মিডিয়া ক্যোয়ারিতে এই ডিবাগিং আইটেমটি যুক্ত করুন এবং আপনি কী ক্যোয়ারী প্রয়োগ করা হচ্ছে তা দেখতে পাবেন।

Answer 5

টুইটার বুটস্ট্র্যাপ দ্বারা প্রস্তাবিত সেরা ব্রেকপয়েন্টগুলি

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

Answer 6

সাধারণ ডিভাইস ব্রেকপয়েন্টগুলির জন্য মিডিয়া ক্যোয়ারী

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Answer 7

1. অতিরিক্ত ছোট ডিভাইস (ফোনগুলি, 480px অবধি)
2. ছোট ডিভাইস (ট্যাবলেট, 768px এবং তার বেশি)
3. মাঝারি ডিভাইসগুলি (বড় ল্যান্ডস্কেপ ট্যাবলেট, ল্যাপটপ এবং ডেস্কটপগুলি, 992px এবং তার বেশি)
4. বড় ডিভাইস (বড় ডেস্কটপগুলি, 1200px এবং তার বেশি)
5. প্রতিকৃতি ই-পাঠক (নুক / কিন্ডেল), ছোট ট্যাবলেট - ন্যূনতম প্রস্থ: 481px
6. প্রতিকৃতি ট্যাবলেট, প্রতিকৃতি আইপ্যাড, ল্যান্ডস্কেপ ই পাঠক - ন্যূনতম প্রস্থ: 641px
7. ট্যাবলেট, ল্যান্ডস্কেপ আইপ্যাড, লো-রেজোল্ট ল্যাপটপগুলি - ন্যূনতম প্রস্থ: 961px
8. এইচটিসি ওয়ান ডিভাইস-প্রস্থ: 360px ডিভাইস-উচ্চতা: 640px -webkit- ডিভাইস-পিক্সেল-অনুপাত: 3
9. স্যামসং গ্যালাক্সি এস 2 ডিভাইস-প্রস্থ: 320px ডিভাইস-উচ্চতা: 534px -webkit- ডিভাইস-পিক্সেল অনুপাত: 1.5 (মিনিট - মোজ-ডিভাইস-পিক্সেল-অনুপাত: 1.5), (-ো-মিনিট-ডিভাইস-পিক্সেল-অনুপাত: 3/2), (মিনিট ডিভাইস-পিক্সেল-অনুপাত: 1.5
10. স্যামসং গ্যালাক্সি এস 3 ডিভাইসের প্রস্থ: 320px ডিভাইস-উচ্চতা: 640 পিক্স-ওয়েবকিট-ডিভাইস-পিক্সেল অনুপাত: 2 (মিনিট - মোজ-ডিভাইস-পিক্সেল-অনুপাত: 2), - পুরাতন ফায়ারফক্স ব্রাউজারগুলি (ফায়ারফক্স 16 এর আগে) -
11. স্যামসং গ্যালাক্সি এস 4 ডিভাইস-প্রস্থ: 320px ডিভাইস-উচ্চতা: 640 পিক্স-ওয়েবকিট-ডিভাইস-পিক্সেল-অনুপাত: 3
12. LG Nexus 4 ডিভাইস-প্রস্থ: 384px ডিভাইস-উচ্চতা: 592px -webkit- ডিভাইস-পিক্সেল-অনুপাত: 2
13. আসুস নেক্সাস 7 ডিভাইস-প্রস্থ: 601px ডিভাইস-উচ্চতা: 906px -webkit- মিনিট-ডিভাইস-পিক্সেল-অনুপাত: 1.331) এবং (ওয়েবেকিট-সর্বোচ্চ-ডিভাইস-পিক্সেল-অনুপাত: 1.332)
14. আইপ্যাড 1 এবং 2, আইপ্যাড মিনি ডিভাইস-প্রস্থ: 768px ডিভাইস-উচ্চতা: 1024px-ওয়েবেকিট-ডিভাইস-পিক্সেল-অনুপাত: 1
15. আইপ্যাড 3 এবং 4 ডিভাইস-প্রস্থ: 768px ডিভাইস-উচ্চতা: 1024px-ওয়েবকিট-ডিভাইস-পিক্সেল-অনুপাত: 2)
16. আইফোন 3 জি ডিভাইস-প্রস্থ: 320px ডিভাইস-উচ্চতা: 480px -webkit- ডিভাইস-পিক্সেল-অনুপাত: 1)
17. আইফোন 4 ডিভাইস-প্রস্থ: 320px ডিভাইস-উচ্চতা: 480px -webkit- ডিভাইস-পিক্সেল-অনুপাত: 2)
18. আইফোন 5 ডিভাইস-প্রস্থ: 320px ডিভাইস-উচ্চতা: 568px -webkit- ডিভাইস-পিক্সেল-অনুপাত: 2)

Comments

সানস্যাং গ্যালাক্সি এস 3 @ মিডিয়া কেবলমাত্র স্ক্রিন এবং (ডিভাইস-প্রস্থ: 720px) এবং (ডিভাইস-উচ্চতা: 1280px) এবং (-উইবকিট-মিনিট-ডিভাইস-পিক্সেল-অনুপাত: 2) পরীক্ষা এবং কাজ করেছে।

— ব্যবহারকারী 2060451

Answer 8

এটি পিক্সেল গণনার বিষয় নয়, এটি পর্দার প্রকৃত আকারের (মিমি বা ইঞ্চি) অক্ষরের কথা, যা পিক্সেল ঘনত্বের উপর নির্ভর করে। সুতরাং "মিনিম প্রস্থ:" এবং "সর্বাধিক প্রস্থ:" অকেজো এই ইস্যুটির সম্পূর্ণ ব্যাখ্যা এখানে: ডিভাইস পিক্সেল রেশিও ঠিক কী?

"@ মিডিয়া" ক্যোয়ারীগুলি পিক্সেল গণনা এবং ডিভাইস পিক্সেল অনুপাত বিবেচনা করে, যার ফলে একটি "ভার্চুয়াল রেজোলিউশন" হয় যা আপনার পৃষ্ঠাটি ডিজাইনের সময় আপনাকে অবশ্যই বিবেচনায় নিতে হবে: যদি আপনার ফন্টটি 10px স্থির-প্রস্থ এবং " ভার্চুয়াল অনুভূমিক রেজোলিউশন "300 পিক্সেল, একটি লাইন পূরণের জন্য 30 টি অক্ষরের প্রয়োজন হবে।

Comments

গ্রেট। তাহলে মিডিয়া প্রশ্নগুলি কী হওয়া উচিত?

— পিকেহান্টার

Answer 9

আজকাল সর্বাধিক সাধারণ জিনিসটি হ'ল রেটিনা-স্ক্রিন ডিভাইসগুলি, অন্য কথায়: উচ্চ রেজোলিউশন এবং খুব উচ্চ পিক্সেলের ঘনত্বযুক্ত ডিভাইস (তবে সাধারণত 6 ইঞ্চির দৈহিক আকারের চেয়ে ছোট)। এজন্য আপনার সিএসএসে আপনার রেটিনা বিশেষায়িত মিডিয়া-কোয়েরিগুলি প্রদর্শন করতে হবে। এটি আমার কাছে পাওয়া সবচেয়ে সম্পূর্ণ উদাহরণ:

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

সূত্র: সিএসএস-ট্রিক্স ওয়েবসাইট

Answer 10

যেহেতু অনেকগুলি স্ক্রিনের আকার রয়েছে যা সর্বদা পরিবর্তিত হয় এবং সম্ভবত সর্বদা যাওয়ার সেরা পন্থাটি বদলে যাবে আপনার ব্রেক পয়েন্ট এবং মিডিয়া প্রশ্নের ভিত্তি স্থাপন করা is আপনার নকশায় ভিত্তি স্থাপন করা।

এটির সর্বাধিক সহজ উপায় হ'ল আপনার সমাপ্ত ডেস্কটপ ডিজাইনটি ধরা এবং এটি আপনার ওয়েব ব্রাউজারে খুলুন। স্ক্রিনটিকে সঙ্কুচিত করতে আস্তে আস্তে সঙ্কুচিত করুন । কখন ডিজাইনটি "ব্রেক" শুরু হয় , বা ভয়ঙ্কর এবং বিড়ম্বিত দেখায় তা পর্যবেক্ষণ করুন । এই মুহুর্তে একটি মিডিয়া ক্যোয়ারী সহ একটি ব্রেক পয়েন্ট প্রয়োজন হবে।

ডেস্কটপ, ট্যাবলেট এবং ফোনের জন্য তিনটি মিডিয়া কোয়েরি তৈরি করা সাধারণ। তবে যদি আপনার ডিজাইনটি তিনটিই দেখতে ভাল লাগে তবে তিনটি পৃথক মিডিয়া কোয়েরিগুলি প্রয়োজনীয় নয় এমন জটিলতার সাথে কেন বিরক্ত হন। এটি একটি প্রয়োজনীয় ভিত্তিতে করুন!

Answer 11

একটি অতিরিক্ত বৈশিষ্ট্য হ'ল আপনি ট্যাগের মিডিয়া বৈশিষ্ট্যে মিডিয়া ক্যোয়ারীও ব্যবহার করতে পারেন <link>।

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

এটির সাহায্যে ব্রাউজার মিডিয়া বৈশিষ্ট্য নির্বিশেষে সমস্ত সিএসএস সংস্থানগুলি ডাউনলোড করবে । পার্থক্যটি হ'ল যদি মিডিয়া অ্যাট্রিবিউটের মিডিয়া-ক্যোয়ারীটিকে মিথ্যা হিসাবে মূল্যায়ন করা হয় তবে সেই সিএসএস ফাইল এবং তার সামগ্রীটি রেন্ডার-ব্লকিং হবে না।

অতএব, ট্যাগটিতে মিডিয়া বৈশিষ্ট্যটি ব্যবহার করার পরামর্শ দেওয়া হয় <link>কারণ এটি আরও ভাল ব্যবহারকারীর অভিজ্ঞতার গ্যারান্টি দেয়।

এখানে আপনি এই সমস্যা সম্পর্কে একটি গুগল নিবন্ধ পড়তে পারেন https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

কিছু সরঞ্জাম যা আপনাকে মিডিয়া-কোয়েরি অনুসারে বিভিন্ন ফাইলগুলিতে আপনার সিএসএস কোডের বিভাজনটি স্বয়ংক্রিয় করতে সহায়তা করবে

ওয়েবপ্যাক https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

পোস্টসিএসএস https://www.npmjs.com/package/postcss-extract-media-query

Answer 12

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

আমার ক্ষেত্রে, 60px শীর্ষ এবং নীচে পুরোপুরি কাজ করেছে!

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

এখানে নাবারটি চেক করুন ।

Answer 13

• অতিরিক্ত ছোট ডিভাইস ~ ফোন (<768px)
• ছোট ডিভাইসগুলি ~ ট্যাবলেটগুলি (> = 768px)
• মাঝারি ডিভাইসগুলি ~ ডেস্কটপগুলি (> = 992px)
• বড় ডিভাইসগুলি ~ ডেস্কটপগুলি (> = 1200px)

Answer 14

আমি আমার কাজটি করতে নিম্নলিখিতটি ব্যবহার করছি।

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Answer 15

@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }