পর্দার পরিবর্তে কোনও ডিভ উপাদানটির ভিত্তিতে মিডিয়া ক্যোয়ারীগুলি পুনরায় আকার দিতে পারে?


317

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

হালনাগাদ

দেখে মনে হচ্ছে এখন এটি নিয়ে কাজ চলছে: https://github.com/ResponsiveImagesCG/cq-demos


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

1
আপনার উইজেটের আকার কীভাবে আলাদা হতে পারে? আপনার পৃষ্ঠার স্থির প্রস্থ (উদাহরণস্বরূপ 960px) 1024px এর উপরে ভিউপোর্ট সহ বা উভয় তরল? এটি অস্পষ্ট এবং এটি জানতে দরকারী হবে
ফিলিপলস

3
আসলে, আমার বর্তমান প্রকল্পের একই পরিস্থিতি রয়েছে। আইটেমের একটি তালিকা প্রশস্ত ডিভাইসগুলির জন্য 2-কল বা লেআউটে সংকীর্ণ ডিভাইসের জন্য 1-কোল লেআউটে প্রদর্শিত হবে, তবে একক আইটেম 1-কোল লেআউটে থাকবে তা যাই হোক না কেন। তালিকা এবং একক সংস্করণ উভয়ই 2 টি উপাদান রয়েছে যা মোটামুটি প্রশস্ত এবং সংক্ষিপ্ত। বৃহত্তর ডিভাইসে, 2 টি উপাদান পাশাপাশি পাশাপাশি দেখায়। আদর্শভাবে, সংকীর্ণ ডিভাইস: সর্বদা উল্লম্ব, প্রশস্ত ডিভাইস: সর্বদা সমান্তরাল, কোথাও কোথাও (1 বা 2-করল নির্ভর করে): উল্লম্ব বা সমান্তরাল। ভাসমান একটি সহজ সমাধান, তবে লেআউটের উপর নির্ভর করে প্রস্থটিও আলাদা হতে হবে।
cimmanon

1
কম সিএসএসে সংকলিত হবে, সুতরাং সিএসএস যদি এটি সমর্থন না করে তবে কমই আপনাকে সাহায্য করতে পারে না।
jvannistelrooy

3
লিঙ্ক আর সক্রিয় নেই?
মিশ্র 3 ডি

উত্তর:


228

না, মিডিয়া প্রশ্নগুলি কোনও পৃষ্ঠার উপাদানগুলির ভিত্তিতে কাজ করার জন্য ডিজাইন করা হয়নি। এগুলি ডিভাইস বা মিডিয়া ধরণের উপর ভিত্তি করে কাজ করার জন্য ডিজাইন করা হয়েছে (এজন্য তাদের মিডিয়া কোয়েরি বলা হয় )। width, heightএবং অন্যান্য মাত্রা-ভিত্তিক মিডিয়া বৈশিষ্ট্যগুলি সমস্ত স্ক্রিন-ভিত্তিক মিডিয়াতে ভিউপোর্ট বা ডিভাইসের স্ক্রিনের মাত্রাগুলি উল্লেখ করে। এগুলি কোনও পৃষ্ঠায় একটি নির্দিষ্ট উপাদান উল্লেখ করতে ব্যবহার করা যাবে না।

divআপনার পৃষ্ঠায় কোনও নির্দিষ্ট উপাদানের আকারের উপর নির্ভর করে যদি আপনাকে শৈলী প্রয়োগ করতে হয় তবে আপনাকে divমিডিয়া প্রশ্নের পরিবর্তে সেই উপাদানটির আকার পরিবর্তনগুলি পর্যবেক্ষণ করতে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে ।


আমি কোনও উপায় সম্পর্কে শুনেছি যে কোনও উপাদান থাকা উপাদান থেকে আকার পেতে আমি মিডিয়া প্রশ্নের সাথে ফাংশনগুলি ব্যবহার করতে সক্ষম হতে পারি able উপাদানগুলির আকার পরিবর্তন করতে আমি মিডিয়া প্রশ্নের সাথে এটি একত্রিত করার কোনও উপায় আছে কি?
ইয়াজজ২৪.কম

1
আপনাকে নিয়মিতভাবে আপনার উপাদানের প্রস্থ পেতে জেএস ব্যবহার করতে হবে এবং সেই অনুযায়ী প্রতিক্রিয়া জানাতে হবে (পর্যায়ক্রমে = প্রতি সেকেন্ডে বা তাই বা এটি কিছু ব্রাউজারকে ধীর করে দেবে; ততক্ষণে = দ্রুততম পদ্ধতিটি চাইলে আপনার উইজেটকে স্টাইলিং করে ক্লাস টগল করে)।
ফিলিপলস

6
স্থানীয়ভাবে এটি সম্পাদন করার জন্য আমাদের @elementপ্রশ্নের প্রয়োজন হবে । ডাব্লু 3 সি-র ছড়া / @mediaপ্রশ্নের কারণগুলির জন্য কিছু ভাল ডকুমেন্টেশন রয়েছে : w3.org/TR/css3-mediaqueries/#width (এই লিঙ্কটি আপনাকে মিডিয়া টাইপের প্রস্থের সাথে আলোচনা করার অংশে নিয়ে যায় --- এর মধ্যে থাকা উপাদানগুলি নয়)
ডসন

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

যাইহোক, @ এলিমেন্ট কোয়েরিগুলি সিএসএসকে একটি ট্যুরিং সম্পূর্ণ ভাষা তৈরি করবে
নিক

117

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

https://github.com/marcj/css-element-queries


5
ধন্যবাদ, আমি মুগ্ধ
Yazz.com

5
এই অবিশ্বাস্য. প্রতিক্রিয়াশীল বুটস্ট্র্যাপের সাথে একত্রিত হয়ে আমি এমন দুর্দান্ত কিছু জিনিস করছি যা কেবল @ মিডিয়ার মাধ্যমে অর্জন করা যায়নি। সাবাশ.
আকু

3
আপনি আমাদের জীবন রক্ষা করেছেন
ব্রোদা নোয়েল

বাহ, সত্যিই দুর্দান্ত, জিনিসগুলিকে অনেক সহজ করে তোলে
কায়সার

কুল। প্রশ্ন আছে। এই প্লাগইনটি সনাক্ত করতে হবে - min-widthবৈশিষ্ট্যের পুনর্নবীকরণের জন্য উপাদানগুলির কী প্রয়োজন ; আমার কী সিএসএস-শ্রেণির তালিকা, চিহ্নিত উপাদানসমূহ, min-widthপুনর্নবীকরণের জন্য সক্ষম হওয়া ম্যানুয়ালি লিখতে হবে?
আলেকজান্ডার গনচারভ

38

একটি iframe এর ভিতরে একটি মিডিয়া ক্যোয়ারী উপাদান কোয়েরি হিসাবে কাজ করতে পারে। আমি সফলভাবে এটি বাস্তবায়ন করেছি। জুরব দ্বারা প্রতিক্রিয়াশীল বিজ্ঞাপন সম্পর্কে একটি সাম্প্রতিক পোস্ট থেকে ধারণাটি এসেছে । জাভাস্ক্রিপ্ট নেই!


আমি মনে করি এটিই সেরা সমাধান, কারণ, মিডিয়া অনুসন্ধানগুলি iframe এর মধ্যে কাজ করে।
emfi

25

@ বোল্টক্লক গৃহীত উত্তরে যেমন লিখেছেন কেবল সিএসএসের মাধ্যমে এটি বর্তমানে সম্ভব নয়, তবে আপনি জাভাস্ক্রিপ্ট ব্যবহার করে এটিকে ঘিরে কাজ করতে পারেন।

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

.element:container(width > 99px) {
    /* If its container is at least 100px wide */
}

https://github.com/ausi/cq-prolyfill


2
এটি জেএস-এ পূর্ণ। লক্ষ্যটি হ'ল কেবল সিএসএসে কার্যকারিতা।
সবুজ

13
ব্রাউজার দ্বারা সমর্থিত নয় এমন একটি বৈশিষ্ট্য সক্ষম করতে সাধারণত জেএস-তে প্রলিফিলস (এবং পলিফিল ) লেখা হয়। এই বৈশিষ্ট্যটি সিএসএসে সমর্থিত হয়ে গেলে প্রলিফিলের লক্ষ্য অচল হয়ে যাওয়া।
আউশি

3
@ তবে প্রশ্নের মধ্যে "কেবলমাত্র সিএসএস" এর উল্লেখ নেই। কীভাবে আপনি এই সিদ্ধান্তে এসেছেন?
আউশি

1
@ আপনি ব্যতীত সিএসএসে সম্ভবত এটি করতে না পারলে সিএসএসের বাইরের একটি সমাধান দেওয়া পুরোপুরি যুক্তিসঙ্গত। "না আপনি বলতে পারবেন না" এর চেয়ে অনেক বেশি ভাল আপনি কী ভাবেন না;)
ওয়েসলে স্মিথ

1
আমার মন্তব্য করার পরে @ আনন্দিত00D সে উত্তরটি পরিবর্তন করেছে এবং আমি এই পরিবর্তনটির জন্য +1 দিয়েছি। বর্তমান উত্তরটি আমার কাছে ঠিক আছে কারণ এটি কেবল CSS এর মাধ্যমে সম্ভব নয় বলে জানাচ্ছে telling
ius

17

কয়েক বছর আগেও আমি একই সমস্যায় পড়েছিলাম এবং আমার কাজে সহায়তা করার জন্য একটি প্লাগইন বিকাশের জন্য অর্থায়ন করেছি। আমি প্লাগইনটিকে ওপেন সোর্স হিসাবে প্রকাশ করেছি যাতে অন্যরাও এটি থেকে উপকৃত হতে পারে এবং আপনি এটি গিথুবটিতে পেতে পারেন: https://github.com/eqcss/eqcss

পৃষ্ঠায় কোনও উপাদান সম্পর্কে আমরা কী জানতে পারি তার উপর ভিত্তি করে আমরা বিভিন্ন প্রতিক্রিয়াশীল স্টাইল প্রয়োগ করতে পারি ways এখানে কয়েকটি উপাদান অনুসন্ধান রয়েছে যা EQCSS প্লাগইন আপনাকে সিএসএসে লিখতে দেবে:

@element 'div' and (condition) {
  $this {
    /* Do something to the 'div' that meets the condition */
  }
  .other {
    /* Also apply this CSS to .other when 'div' meets this condition */
  }
}

তাহলে কি শর্তগুলি EQCSS এর সাথে প্রতিক্রিয়াশীল শৈলীর জন্য সমর্থিত?

ওজন অনুসন্ধান

  • কমপক্ষে প্রস্থ px
  • কমপক্ষে প্রস্থ %
  • সর্বাধিক প্রস্থ px
  • সর্বাধিক প্রস্থ %

উচ্চতা প্রশ্নাবলী

  • কমপক্ষে উচ্চতা px
  • কমপক্ষে উচ্চতা %
  • সর্বোচ্চ উচ্চতা px
  • সর্বোচ্চ উচ্চতা %

প্রশ্নগুলি গণনা করুন

  • মিনিট-অক্ষরের
  • সর্বোচ্চ-অক্ষরের
  • মিনিট-লাইন
  • সর্বোচ্চ-লাইন
  • মিনিট-শিশু
  • সর্বোচ্চ-শিশু

বিশেষ নির্বাচক

EQCSS উপাদান প্রশ্নের ভিতরে আপনি তিনটি বিশেষ নির্বাচকও ব্যবহার করতে পারেন যা আপনাকে আপনার স্টাইলগুলি আরও সুনির্দিষ্টভাবে প্রয়োগ করতে দেয়:

  • $this (উপাদানটি কোয়েরির সাথে মিলছে)
  • $parent (কোয়েরির সাথে মিলছে এমন উপাদানগুলির প্যারেন্ট উপাদান (গুলি))
  • $root(নথির মূল উপাদান, <html>)

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

EQCSS এর সাহায্যে আপনি 150px প্রশস্ত থেকে 1000px প্রশস্ত পর্যন্ত ভাল দেখতে একটি উইজেট ডিজাইন করতে পারেন, তারপরে আপনি আত্মবিশ্বাসের সাথে কোনও টেমপ্লেট (যে কোনও সাইটে) ব্যবহার করে যে কোনও পৃষ্ঠাতে যে কোনও সাইডবারে রেখে যেতে পারেন এবং


1
চমৎকার প্রকল্প! আপনি কী করেছেন আমি তা একবার
দেখেছি

@ নিনোবতী উপাদানগুলির উপর অনুসন্ধান করার উপায় খুঁজতে গিয়ে আমি এই পোস্টটি পেয়েছি। আমি এটি কাজ করতে পারে বলে মনে হচ্ছে না। আপনি কি আমার টিকিট দেখে মনে করবেন? github.com/eqcss/eqcss/issues/96
অ্যান্ড্রু নিউবি

10

বিন্যাসের দৃষ্টিকোণ থেকে, আধুনিক কৌশলগুলি ব্যবহার করা সম্ভব।

এটি হাইডন পিকারিং দ্বারা তৈরি (আমি বিশ্বাস করি)। তিনি প্রক্রিয়াটি এখানে বিশদটি দিয়েছেন: http://www.heydonworks.com/article/the-flexbox-holy-albatross

ক্রিস কইয়ার এটি তুলে ধরে এবং এটির একটি ডেমোটির মাধ্যমে এখানে কাজ করে: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/

ইস্যু করে বিবৃত করতে, নীচের আমরা একই উপাদানের 3 দেখুন, প্রতিটি লেবেল করা তিনটি কমলা আছে divs গঠিত a, bএবং c

দ্বিতীয় দু'টির ব্লকগুলি উল্লম্বভাবে প্রদর্শিত হয়, কারণ সেগুলি অনুভূমিক ঘরে সীমাবদ্ধ থাকে, যখন শীর্ষ উপাদান 3 টি ব্লক অনুভূমিকভাবে বিছানো থাকে।

flex-basisএই প্রভাব তৈরি করতে এটি CSS বৈশিষ্ট্য এবং CSS ভেরিয়েবল ব্যবহার করে ।

চূড়ান্ত উদাহরণ

.panel{
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #f00;
  $breakpoint: 600px;
  --multiplier: calc( #{$breakpoint} - 100%);
  .element{
    min-width: 33%;
    max-width: 100%;
    flex-grow: 1;
    flex-basis: calc( var(--multiplier) * 999 );
  }
}

ডেমো

হাইডনের নিবন্ধটি 1000 টি শব্দের সাথে এটি বিশদভাবে ব্যাখ্যা করছে এবং আমি এটি পড়ার জন্য সুপারিশ করছি।


হেইডনের নিবন্ধ থেকে সেই জিনিসটি ... দেখায় এবং যাদুর মতো কাজ করে! আপনার প্রতিক্রিয়া জন্য আপনাকে ধন্যবাদ, দুর্দান্ত।
ptyskju

2
এই প্রশ্নের যে কেউ হোঁচট খাচ্ছে সকলেই এই উত্তরটি খুঁজছেন
তেহশ্রাইক

7

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

.wide_container { width: 50em }

.narrow_container { width: 20em }

.my_element { border: 1px solid }

@media (max-width: 30em) {
    .wide_container .my_element {
        color: blue;
    }

    .narrow_container .my_element {
        color: red;
    }
}

@media (max-width: 50em) {
    .wide_container .my_element {
        color: orange;
    }

    .narrow_container .my_element {
        color: green;
    }
}

কেবলমাত্র অন্য সমাধানের জন্য জেএস প্রয়োজন।


47
প্রশ্নটি মোটেও অস্পষ্ট নয়। আসলে এটি খুব ভাল প্রশ্ন। দুর্ভাগ্যক্রমে, এর কোনও ভাল উত্তর নেই।
স্টেপানিয়ান

2
এই পদ্ধতির ব্যবহার করে ভয়ানক রক্ষণাবেক্ষণ।
Totty.js 15

4

আমি কেবলমাত্র ভাবতে পারি যে আপনি সিএসএস দিয়ে খাঁটি যা চান তা অর্জন করতে পারেন, আপনার উইজেটের জন্য তরল ধারক ব্যবহার করা। যদি আপনার ধারকের প্রস্থ যদি স্ক্রিনের এক শতাংশ হয় তবে আপনি আপনার ধারকের প্রস্থের উপর নির্ভর করে স্টাইলের জন্য মিডিয়া ক্যোয়ারীগুলি ব্যবহার করতে পারেন, কারণ আপনি এখন প্রতিটি পর্দার মাত্রা জানতে পারবেন যে আপনার ধারকটির মাত্রা কী। উদাহরণস্বরূপ, ধরা যাক আপনি আপনার ধারকটির পর্দার প্রস্থের 50% প্রস্থ তৈরি করার সিদ্ধান্ত নিয়েছেন। তারপরে 1200px স্ক্রিনের প্রস্থের জন্য আপনি জানেন যে আপনার ধারকটি 600px

.myContainer {
  width: 50%;
}

/* you know know that your container is 600px 
 * so you style accordingly
*/
@media (max-width: 1200px) { 
  /* your css for 600px container */
}

না, এটি কোনও পর্দায় দেখতে কুৎসিত দেখাচ্ছে। স্ক্রিনের আকার দ্রুত পরিবর্তিত হয়, তবে উপাদানটি পরে এবং আরও ছোট স্ক্রিনে উপস্থিত হয়।
সবুজ

3

আমি মিডিয়া প্রশ্নগুলির কথাও ভাবছিলাম, তবে আমি এটি পেয়েছি:

এর <div>জন্য শতাংশের মান সহ একটি মোড়ক তৈরি করুন padding-bottom:

div {
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}
<div></div>

এটি একটি ফলাফল হবে <div> এর ধারকটির প্রস্থের 75% এর সমান উচ্চতা সহকারে পরিণত হবে (একটি 4: 3 দিক অনুপাত)।

এই কৌশলটি আরও বেশি সূক্ষ্ম-দানাদার নিয়ন্ত্রণের জন্য মিডিয়া ক্যোয়ারী এবং পৃষ্ঠাগুলির লেআউট সম্পর্কে অ্যাডহক জ্ঞানের সাথে মিলিত হতে পারে।

এটি আমার প্রয়োজনের জন্য যথেষ্ট। যা আপনার প্রয়োজনের জন্যও যথেষ্ট হতে পারে।


2

আপনি ResizeObserver API ব্যবহার করতে পারেন । এটি এখনও প্রাথমিক দিনগুলিতে তাই এটি এখনও সমস্ত ব্রাউজার দ্বারা সমর্থিত নয় (তবে এমন কয়েকটি পলিফিল রয়েছে যা আপনাকে এটিতে সহায়তা করতে পারে)।

মূলত এই এপিআই আপনাকে একটি ইভেন্ট শ্রোতাদের একটি ডম উপাদানটির আকার পরিবর্তন করতে সংযুক্ত করার অনুমতি দেয়।

ডেমো 1 - ডেমো 2


খসড়া স্পেসিফিকেশন জন্য একটি পলিফিল আছে। github.com/juggle/resize-observer
ট্রেভর করজনিস

হাইডনের নিবন্ধ এটির একটি উদাহরণ প্রয়োগ করে। পৃষ্ঠায় "রেসাইজঅবার্সার" অনুসন্ধান করুন: heydonworks.com/article/the-flexbox-holy-albatross
গ্যাবে রোগান

0

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

  // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;
  }

প্রশ্নটিতে উল্লেখ করা হয়েছে যে উইজেটের আকার পৃথক হতে পারে, ধারক প্রশস্ত হলে সর্বাধিক প্রস্থ নির্ধারণ করা উইজেটের আকার পরিবর্তন করতে পারে না। .widgetউইজেটের ডিভের জন্য ক্লাস হিসাবে কেবল একটি নমুনা।
জ্যাকি চু
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.