আমার সিএসএস 3 মিডিয়া কোয়েরিগুলি কেন কাজ করছে না?

Question

স্টাইলস সিএসএসে, আমি মিডিয়া ক্যোয়ারী ব্যবহার করছি, উভয়ই এর বিভিন্নতা ব্যবহার করে:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

আমি যখন উইন্ডোটি সঙ্কুচিত করি তখন আমি নিয়মিত ব্রাউজারে (সাফারি, ফায়ারফক্স) লেআউটটিতে সাইজগুলি আকার পরিবর্তন করতে পারি, তবে কোনও ফোনে মোবাইলের বিন্যাসটি মোটেই প্রদর্শিত হয় না। পরিবর্তে, আমি কেবল ডিফল্ট সিএসএস দেখতে পাচ্ছি।

কেউ কি আমাকে সঠিক দিকে নির্দেশ করতে পারে?

Comments

এটি কোন মোবাইল ফোন? মিডিয়া ক্যোয়ারীস সিএসএসে একটি নতুন বৈশিষ্ট্য, সমস্ত মোবাইল ফোন ব্রাউজার এটি সমর্থন করে না ...

— স্পার্কি

আইফোন 4 এবং আমি 320 x 480 রেজোলিউশন সহ একটি অ্যান্ড্রয়েড ফোনে (২.২ ফ্রিও )ও পরীক্ষা করছি।

— redconservatory

আসলে আমি আইফোন 4-তে নিম্নলিখিত মিডিয়া কোয়েরিতে স্যুইচ করেছি এবং এটি কাজ করে (তবে উচ্চতর রেজোলিউশনের জন্য আমাকে আমার সিএসএস পরিবর্তন করতে হবে) @ মিডিয়া কেবলমাত্র স্ক্রিন এবং (-উইবকিট-মিনিট-ডিভাইস-পিক্সেল-অনুপাত: 2) {}

— redconservatory

পরিশেষে আমি বুঝলাম যে আমি অনুপস্থিত ছিল pxমধ্যে @media (max-width: 320px)।

— রায়ান

আমার ক্ষেত্রে, এটি ক্রোম বিকাশকারী কনসোলের কারণেই উন্মুক্ত ছিল তাই উচ্চতাটি আমি যা ভাবছিলাম তা ছিল না

— র‌্যাবল্ফ

Answer 1

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

<meta content="width=device-width, initial-scale=1" name="viewport" />

এখন মনে হচ্ছে অ্যান্ড্রয়েড (2.2) এবং আইফোন উভয়ই ঠিক আছে ...

Comments

প্রকৃতপক্ষে <মেটা নাম = "ভিউপোর্ট" সামগ্রী = "প্রস্থ = ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল = 1">

— লুকাশ লুকাক

8 বছর পরে এবং এটি এখনও দরকারী। আমি মেটা ট্যাগটিও এড়িয়ে গেছি এবং কোনও প্রকল্পে কাজ করার জন্য মিডিয়া কোয়েরিগুলি পাই না। ভিউপোর্ট ট্যাগ এবং

— wham

9 বছর পরে, এখনও এত দরকারী। বিশ্বাস করি আমি ভুলে

— যাচ্ছিলাম

@ লুকাসলুকাক কেন?

— জোনেসোপলিস

Answer 2

মিডিয়া ক্যোয়ারীর উপরে স্ট্যান্ডার্ড সিএসএস ঘোষণা থাকতে ভুলবেন না বা কোয়েরিটিও কাজ করবে না।

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

Comments

আসলে, আপনার সিএসএস শৈলীগুলি স্ট্যান্ডার্ড থেকে ছোট আকারে ক্রম হ্রাস করে রাখুন। নিয়মগুলি এখনও প্রযোজ্য যদি আপনার মিডিয়ায় একই ফাইলটিতে প্রশ্ন থাকে।

— ফিল অ্যান্ড্রুজ

আমার কাছে ক্লাসের জন্য স্ট্যান্ডার্ড সিএসএস ঘোষণা না থাকলেও আমার পক্ষে কাজ করে।

— ম্যাসন

এটি আমার সমস্যার সমাধান করেছে। আপনাকে অনেক ধন্যবাদ ... আমি আমার সিএসএস ওভার লিখিত হওয়ার সম্ভাবনাটিকে উপেক্ষা করেছি।

— pmcg521

Answer 3

আমি সন্দেহ করি কীওয়ার্ডটি onlyএখানে সমস্যা হতে পারে। মিডিয়া কোয়েরিগুলি এর মতো ব্যবহার করে আমার কোনও সমস্যা নেই:

@media screen and (max-width: 480px) { }

Answer 4

আমি একটি প্রেস সাইটে বুটস্ট্র্যাপ ব্যবহার করেছি তবে এটি আই 8 তে কাজ করে না, আমি CSS3-mediaqueries.js জাভাস্ক্রিপ্ট ব্যবহার করেছি তবে এখনও কাজ করছি না। আপনি যদি এই মিডিয়া ক্যোয়ারীটি জাভাস্ক্রিপ্ট ফাইলটির সাথে কাজ করতে চান তবে CSS এ আপনার মিডিয়া ক্যোয়ারী লাইনে স্ক্রিন যুক্ত করুন

এখানে একটি উদাহরণ:

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

উপরের লাইনের মতো সিএসএস লিংক লাইন।

Answer 5

আজ আমারও একই অবস্থা ছিল। মিডিয়া ক্যোয়ারি কাজ করেনি। কিছুক্ষণ পরে আমি 'এবং' এর পরে সেই জায়গাটি অনুপস্থিত খুঁজে পেলাম। যথাযথ মিডিয়া ক্যোয়ারির মতো দেখতে হবে:

@media screen and (max-width: 1024px) {}

Comments

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

— cimmanon

এখনও এটি সহায়ক হিসাবে এটি আমার ক্ষেত্রে ইস্যুটি পেয়েছিল

— লরেন শকিপোগনজা

Answer 6

সিএসএস কোডের ক্রমিক ক্রমটিও গুরুত্বপূর্ণ, উদাহরণস্বরূপ:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

উপরের কোডটি কার্যকর করবে না কারণ কার্যকর করা আদেশ। নিম্নলিখিত হিসাবে লিখতে হবে ：

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

Comments

এটাই আমি ভুল করেছিলাম। ধন্যবাদ.

— VorganHaze

Answer 7

Px বা রেম জাতীয় কিছু ইউনিটে সর্বদা সর্বোচ্চ-প্রস্থ এবং ন্যূনতম প্রস্থের উল্লেখ করুন। এটা আমার জন্য এটি আভাস। যদি আমি এটি ইউনিট এবং কেবলমাত্র মান ব্যতীত লিখি তবে ব্রাউজার মিডিয়া কোয়েরিগুলি পড়তে পারে না। উদাহরণস্বরূপ: এটি ভুল @ মিডিয়া কেবলমাত্র পর্দা এবং (সর্বাধিক প্রস্থ: 950) এবং এটি ঠিক @ মিডিয়া কেবল পর্দা এবং (সর্বোচ্চ-প্রস্থ: 950px)

Comments

ধন্যবাদ! যদিও আমি উদাহরণগুলির সকলের দিকে তাকিয়ে ছিলাম, আমি কখনই লক্ষ্য করিনি যে আমি px ভুলে গেছি!

— মার্ক্যান্ড

Answer 8

রিংয়ের মধ্যে আরও একটি উত্তর ছুড়ে দেওয়া। আপনি যদি সিএসএস ভেরিয়েবল ব্যবহার করার চেষ্টা করছেন তবে তা নিঃশব্দে ব্যর্থ হবে।

@media screen and (max-device-width: var(--breakpoint-small)) {}

সিএসএস ভেরিয়েবল মিডিয়া ক্যোয়ারিতে (ডিজাইন অনুসারে) কাজ করে না।

Answer 9

অদ্ভুত কারণ যা আমি এর আগে কখনও দেখিনি: আপনি যদি মিডিয়া ক্যোয়ারির বাইরে (ফায়ারফক্স in৯ তে) কোনও "প্যারেন্ট> শিশু" নির্বাচক ব্যবহার করেন তবে এটি মিডিয়া ক্যোয়ারীটি ভেঙে দিতে পারে। আমি কেন নিশ্চিত তা নিশ্চিত না, তবে আমার দৃশ্যের জন্য এটি কার্যকর হয়নি ...

@media whatever {
    #child { display: none; }
}

তবে পৃষ্ঠায় আরও কিছু সিএসএসের সাথে পিতামাতাকে যুক্ত করা, এটি কাজ করে ...

#parent > #child { display: none; }

দেখে মনে হচ্ছে পিতামাতাকে নির্দিষ্ট করে নেওয়া উচিত নয়, যেহেতু কোনও আইডি খুব নির্দিষ্ট এবং কোনও দ্বিধা প্রকাশ করা উচিত নয়। এটি ফায়ারফক্সে একটি বাগ আছে?

Answer 10

ওপির কোড স্নিপেট স্পষ্টভাবে সঠিক মন্তব্য মার্কআপ ব্যবহার করে তবে সিএসএস একটি প্রগতিশীল উপায়ে ভেঙে ফেলতে পারে - সুতরাং, যদি একটি সিনট্যাক্স ত্রুটি থাকে তবে তার পরে সবকিছু ব্যর্থ হওয়ার সম্ভাবনা রয়েছে। কয়েকবার আমি বিশ্বাসযোগ্য উত্সগুলিতে নির্ভর করেছি যা ভুল মন্তব্য মার্কআপ সরবরাহ করে যা আমার স্টাইল শীটটি ভঙ্গ করে এমন । যেহেতু ওপি তাদের কোডের একটি ছোট্ট অংশ সরবরাহ করেছিল, তাই আমি নিম্নলিখিতটি প্রস্তাব করব:

আপনার সমস্ত সিএসএস মন্তব্য এই মার্কআপটি ব্যবহার করেছেন তা নিশ্চিত করুন /*... */- যা এমডিএন অনুসারে CSS এর জন্য সঠিক মন্তব্য মার্কআপ

আপনার সিএসএস একটি লিন্টার বা একটি নিরাপদ অনলাইন বৈধকারকের সাহায্যে বৈধ করুন। এখানে ডাব্লু 3 দ্বারা এক

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

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

Comments

পোস্টে প্রদর্শিত হিসাবে ওপি ইতিমধ্যে সঠিক মন্তব্য মার্কআপ ব্যবহার করছে ।

— টাইলারহহ

আসলে আপনি ডাউনভোট বোতামের উপরে ঘোরাফেরা করলে আপনি দেখতে পাবেন যে তারা ঠিক কীসের জন্য । এর বাইরে, ডাউনভোটগুলি 1) বেনামে এবং 2) ট্রোলিং নয়। তদ্ব্যতীত, কাউকে দোষ দেওয়াই আপনার মনে হয় যে তারা করেছেন এমন কিছু পরিবর্তন করার উপায় নয় ।

— টাইলার

আহারে! আপনি আমার দিন বাঁচিয়েছেন।

— সীমানা

Answer 11

নীচের মতো একটি মেটা ট্যাগ অন্তর্ভুক্ত করার ফলে ব্রাউজারটি ভিউপোর্টটি আলাদাভাবে জুম করতে সক্ষম করে।

<meta content="width=device-width, initial-scale=1" name="viewport" />

Answer 12

আমি সম্প্রতি এই সমস্যাটির মুখোমুখি হয়েছি এবং পরে আমি এটি জানতে পেরেছিলাম কারণ আমি andএবং এর মধ্যে কোনও স্থান রাখিনি (। এই ত্রুটি ছিল

@media screen and(max-width:768px){
}

তারপরে এটি সংশোধন করার জন্য আমি এটিতে এটি পরিবর্তন করেছি

@media screen and (max-width:768px){
}

Answer 13

আমি নির্ভর করে কয়েকটি পদ্ধতি ব্যবহার করি। একই স্টাইলশীটে আমি ব্যবহার করি: @ মিডিয়া (সর্বাধিক প্রস্থ: 450px), বা পৃথকভাবে নিশ্চিত করুন যে আপনার শিরোনামে লিঙ্কটি সঠিকভাবে আছে। আমি আপনার ফিক্সআপটি দেখেছি এবং আপনার সিএসএস-এর লিঙ্কগুলির একটি বিভ্রান্তিকর অ্যারে রয়েছে। আপনি যেমনটি এইচটিসি ইচ্ছা এস তেও বলেছেন এটি এটি কাজ করে S.

Comments

সিএসএসে আবার একবার দেখে নেবে, ধন্যবাদ ... এটি কোনও কিছুর উপর কাজ করে তা জানতে পেরে ভাল।

— redconservatory

Answer 14

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

Comments

দয়া করে আপনার কোডটিতে কিছু ব্যাখ্যা যুক্ত করুন, এটি দেখায় যে এটি কীভাবে সমস্যাটি সমাধান করে - এটি ভবিষ্যতে অন্যদের সহায়তা করবে এবং আপনার উত্তরটি উজ্জীবিত হওয়ার সম্ভাবনা বেশি রয়েছে

— আমাদের ম্যান ইন কলাবাস

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

— ফেরিবিগ

Answer 15

আমার জন্য আমি max-heightপরিবর্তে ইঙ্গিত করেছি max-width।

যদি আপনি হয়, এটি পরিবর্তন করুন!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

Answer 16

ব্রাউজার জুম স্তরটি সঠিক না হলে এটিও ঘটতে পারে। আপনার ব্রাউজার উইন্ডো জুমটি 100% হওয়া উচিত। ক্রোমে Ctrl + 0জুম স্তরটি পুনরায় সেট করতে ব্যবহার করুন ।

Comments

এটি ভোট দেওয়া উচিত ছিল না। এই ছিল আমার হতাশার উত্তর!

— আমির আলমুসাবি