ฉันต้องการใช้เคียวรีสื่อบันทึกเพื่อปรับขนาดองค์ประกอบตามขนาดของdivองค์ประกอบที่มีอยู่ฉันไม่สามารถใช้ขนาดหน้าจอได้เนื่องจากใช้divเป็นเพียงวิดเจ็ตภายในเว็บเพจและขนาดอาจแตกต่างกันไป

ปรับปรุง

ดูเหมือนว่าจะมีงานที่ทำอยู่ในตอนนี้: https://github.com/ResponsiveImagesCG/cq-demos

css media-queries

— Yazz.com
แหล่งที่มา

2

ฉันคิดว่าคำถามนี้สั้นเกินไปที่จะได้รับคำตอบที่ดี บางทีคุณอาจเป็นตัวอย่างของสิ่งที่คุณพยายามทำ อาจใช้jsfiddle.netเพื่อทดสอบความคิดของคุณและอนุญาตให้ผู้อื่นช่วยเหลือคุณ โดยทั่วไปไม่ควรมีเหตุผลสำหรับสิ่งที่คุณถามคุณควรจะสามารถบรรลุผลลัพธ์ที่ต้องการด้วย CSS โดยไม่ต้องมีคำสั่งสื่อ คุณสามารถใช้เปอร์เซ็นขนาดและ EMS สำหรับฟอนต์เพื่อขยายองค์ประกอบที่ซ้อนกัน แต่บางทีฉันแค่ต้องเห็นตัวอย่างของรหัส html และ css ของคุณเพื่อทำความเข้าใจให้ดีขึ้น?

— BenSwayne

1

ขนาดของวิดเจ็ตของคุณจะแตกต่างกันอย่างไร หน้าเว็บของคุณมีความกว้างคงที่ (960px ตามตัวอย่าง) ที่มีวิวพอร์ตเกิน 1024px หรือทั้งสองแบบเป็นของเหลวหรือไม่ ไม่ชัดเจนและน่าจะมีประโยชน์ที่จะรู้

— FelipeAls

3

ที่จริงแล้วโครงการปัจจุบันของฉันมีสถานการณ์ที่คล้ายกัน รายการของไอเท็มจะแสดงในเลย์เอาต์ 2-col สำหรับอุปกรณ์ไวด์หรือเลย์เอาต์ 1-col สำหรับอุปกรณ์ที่แคบ แต่รายการเดียวจะอยู่ในเลย์เอาต์ 1-col ไม่ว่าจะเป็นอะไรก็ตาม ทั้งรายการและรุ่นเดียวมี 2 องค์ประกอบที่ค่อนข้างกว้างและสั้น บนอุปกรณ์ที่กว้างขึ้นองค์ประกอบ 2 ชิ้นนั้นดูดีที่สุดเคียงข้างกัน อุปกรณ์ที่มีลักษณะแคบ: แนวตั้ง, อุปกรณ์กว้าง: เสมอขนาน, อยู่ระหว่าง (ขึ้นกับ 1 หรือ 2 คอล): แนวตั้งหรือขนาน การลอยตัวเป็นวิธีแก้ปัญหาง่าย ๆ แต่ความกว้างต้องแตกต่างกันไปตามเค้าโครง

— cimmanon

1

LESS จะถูกรวบรวมเป็น CSS ดังนั้นหาก CSS ไม่รองรับ LESS จะไม่สามารถช่วยคุณได้

— jvannistelrooy

3

ลิงก์ไม่ทำงานอีกต่อไป?

— mix3d

228

ไม่แบบสอบถามสื่อไม่ได้ถูกออกแบบมาให้ทำงานโดยพิจารณาจากองค์ประกอบในหน้า พวกเขาถูกออกแบบมาเพื่อทำงานบนพื้นฐานของอุปกรณ์หรือประเภทสื่อ (ทำไมพวกเขาเรียกว่าแบบสอบถามสื่อ ) width, heightและคุณสมบัติสื่อที่อ้างอิงมิติอื่น ๆ ทั้งหมดอ้างถึงขนาดของวิวพอร์ตหรือหน้าจอของอุปกรณ์ในสื่อที่อิงตามหน้าจอ ไม่สามารถใช้เพื่ออ้างถึงองค์ประกอบบางอย่างในหน้า

หากคุณจำเป็นต้องใช้สไตล์ขึ้นอยู่กับขนาดของdivองค์ประกอบบางอย่างในหน้าของคุณคุณจะต้องใช้ JavaScript เพื่อสังเกตการเปลี่ยนแปลงขนาดของdivองค์ประกอบนั้นแทนการสืบค้นสื่อ

— BoltClock
แหล่งที่มา

ฉันได้ยินเกี่ยวกับวิธีการที่ฉันอาจใช้ฟังก์ชั่นที่มีการสืบค้นสื่อเพื่อรับขนาดจากองค์ประกอบที่มี มีวิธีที่ฉันสามารถรวมกับแบบสอบถามสื่อเพื่อปรับขนาดองค์ประกอบ?

— Yazz.com

1

คุณจะต้องใช้ JS เพื่อรับความกว้างขององค์ประกอบของคุณเป็นระยะและตอบสนองตามลำดับ (เป็นระยะ = ทุก ๆ วินาทีหรืออย่างน้อยมันจะทำให้เบราว์เซอร์บางตัวช้าลง; ตาม = โดยการสลับชั้นสไตล์ของเครื่องมือ

— FelipeAls

6

ในการบรรลุเป้าหมายนี้เราต้องมี@elementข้อความค้นหา W3C มีเอกสารที่ดีเกี่ยวกับคำคล้องจอง / เหตุผลในการ@mediaสืบค้น: w3.org/TR/css3-mediaqueries/#width (ลิงค์นี้จะนำคุณไปยังส่วนที่พูดถึงความกว้าง --- ความกว้างของประเภทสื่อไม่ใช่องค์ประกอบที่อยู่ภายใน)

— Dawson

มีโอกาสที่จะทำให้มันทำงานในอีเมลหรือไม่ ฉันพยายามที่จะใช้สไตล์ของอุปกรณ์พกพากับอีเมลเมื่อ div container มีขนาดเล็กเกินไป (เช่นเมื่อพื้นที่อีเมลของเวอร์ชันเดสก์ท็อป Gmail มีขนาดเล็กเกินไปที่จะพอดีกับการออกแบบ 2 คอลัมน์เนื่องจากการปรับขนาดหน้าต่างเป็นต้น)

— เลฟ

อย่างไรก็ตามคำสั่ง @element จะทำให้ CSS เป็นภาษาที่สมบูรณ์ทัวริง

— Nick

117

ฉันเพิ่งสร้างจาวาสคริปต์เพื่อให้บรรลุเป้าหมายนี้ ลองดูถ้าคุณต้องการมันเป็นหลักฐานพิสูจน์แนวคิด แต่ระวัง: มันเป็นรุ่นแรกและยังคงต้องการงานบางอย่าง

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

— Marc J. Schmidt
แหล่งที่มา

5

ขอบคุณฉันประทับใจ

— Yazz.com

5

นี่เป็นเรื่องเหลือเชื่อ เมื่อรวมกับ bootstrap ที่ตอบสนองฉันกำลังทำสิ่งที่ยอดเยี่ยมที่ไม่สามารถทำได้ด้วย @media ทำได้ดี.

— Aku

3

คุณช่วยชีวิตเราไว้ได้

— Broda Noel

ว้าวดีจริงๆทำให้ทุกอย่างง่ายขึ้น

— ไกเซอร์

เย็น. มีคำถาม เปิดการตรวจสอบปลั๊กอินนี้ - องค์ประกอบใดที่จำเป็นต้องมีการmin-widthต่ออายุแอตทริบิวต์ ฉันจะต้องเขียนรายการ css-class แบบแมนนวลองค์ประกอบที่ทำเครื่องหมายเปิดใช้งานเพื่อmin-widthต่ออายุได้อย่างไร

— Alexander Goncharov

38

Media Query ภายใน iframe สามารถทำหน้าที่เป็นแบบสอบถามองค์ประกอบ ฉันใช้งานสิ่งนี้ได้สำเร็จ แนวคิดมาจากโพสต์เมื่อเร็ว ๆ นี้เกี่ยวกับResponsive Ads by Zurb ไม่มี Javascript!

— haddnin
แหล่งที่มา

ฉันคิดว่านี่เป็นทางออกที่ดีที่สุดเพราะการสืบค้นสื่อทำงานภายใน iframe

— emfi

25

ปัจจุบันนี้ไม่สามารถทำได้ด้วย CSS เพียงอย่างเดียวเนื่องจาก @BoltClock เขียนในคำตอบที่ยอมรับ แต่คุณสามารถแก้ไขได้โดยใช้ JavaScript

ฉันสร้างเคียวรีคอนเทนเนอร์ (เคียวรีองค์ประกอบ aka) prolyfill เพื่อแก้ไขปัญหาประเภทนี้ มันใช้งานได้แตกต่างจากสคริปต์อื่น ๆ ดังนั้นคุณไม่จำเป็นต้องแก้ไขโค้ด HTML ขององค์ประกอบของคุณ สิ่งที่คุณต้องทำคือรวมสคริปต์และใช้งานใน CSS ของคุณเช่น:

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

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

— ausi
แหล่งที่มา

2

มันเต็มไปด้วย JS เป้าหมายคือมีฟังก์ชั่นใน CSS เท่านั้น

— สีเขียว

13

Prolyfills (และpolyfills ) มักจะเขียนใน JS เพื่อเปิดใช้งานคุณลักษณะที่เบราว์เซอร์ยังไม่สนับสนุน เป้าหมายของ prolyfill จะล้าสมัยเมื่อคุณสมบัตินี้ได้รับการสนับสนุนใน CSS

— ausi

3

@ ไม่มีการกล่าวถึง“ CSS เท่านั้น” ในคำถาม คุณสรุปได้อย่างไร?

— ausi

1

@ ยกเว้นคุณไม่สามารถทำได้ใน CSS ดังนั้นการนำเสนอโซลูชันนอก css นั้นสมเหตุสมผลอย่างสมบูรณ์ ดีกว่า "ไม่ทำไม่ได้" คุณไม่คิดหรอก)

— Wesley Smith

1

@ DelightedD0D หลังจากความคิดเห็นของฉันเขาเปลี่ยนคำตอบและฉันโหวต +1 สำหรับการเปลี่ยนแปลง คำตอบปัจจุบันมันใช้ได้กับฉันเพราะบอกว่ามันเป็นไปไม่ได้กับ CSS เท่านั้น

— ius

17

ฉันพบปัญหาเดียวกันเมื่อสองสามปีก่อนและให้เงินสนับสนุนการพัฒนาปลั๊กอินเพื่อช่วยฉันในการทำงาน ฉันได้เปิดตัวปลั๊กอินเป็นโอเพ่นซอร์สเพื่อให้ผู้อื่นได้รับประโยชน์เช่นกันและคุณสามารถคว้ามันได้ที่ Github: https://github.com/eqcss/eqcss

มีสองสามวิธีที่เราสามารถใช้สไตล์การตอบสนองที่แตกต่างกันตามสิ่งที่เรารู้เกี่ยวกับองค์ประกอบในหน้า นี่คือข้อความค้นหาองค์ประกอบบางส่วนที่ปลั๊กอิน EQCSS จะให้คุณเขียนใน CSS:

@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 ไปจนถึงความกว้างสูงสุด 1,000px จากนั้นคุณสามารถวางวิดเจ็ตนั้นลงในแถบด้านข้างในหน้าใดก็ได้โดยใช้เทมเพลตใดก็ได้ (บนไซต์ใด ๆ ) และ

— innovati
แหล่งที่มา

1

โครงการที่ดี! ฉันดูสิ่งที่คุณทำ

— Yazz.com

@innovati ฉันพบโพสต์นี้ในขณะที่มองหาวิธีที่จะทำแบบสอบถามเกี่ยวกับองค์ประกอบ ฉันไม่สามารถทำงานได้ คุณจะดูตั๋วของฉันได้ไหม github.com/eqcss/eqcss/issues/96

— Andrew Newby

10

จากมุมมองเค้าโครงสามารถใช้เทคนิคที่ทันสมัย

มันสร้างขึ้น (ฉันเชื่อ) โดย Heydon Pickering เขาให้รายละเอียดกระบวนการที่นี่: http://www.heydonworks.com/article/the-flexbox-holy-albatross

Chris Coyier หยิบมันขึ้นมาและทำงานผ่านตัวอย่างของมันที่นี่: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/

ย้ำปัญหาด้านล่างที่เราเห็นที่ 3 ขององค์ประกอบเดียวกันแต่ละสร้างขึ้นจากสาม divs สีส้มที่มีป้ายกำกับa, และbc

บล็อกสองอันที่สองแสดงในแนวตั้งเนื่องจากมีข้อ จำกัด ในห้องแนวนอนในขณะที่องค์ประกอบด้านบน 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 );
  }
}

การสาธิต

บทความของ Heydon มีคำอธิบายอย่างละเอียด 1,000 คำและฉันขอแนะนำให้อ่าน

— Djave
แหล่งที่มา

สิ่งนั้นจากบทความของ Heydon ... ดูเหมือนและใช้งานได้เหมือนเวทมนตร์! ขอบคุณสำหรับคำตอบของคุณมันยอดเยี่ยมมาก

— ptyskju

2

นี่คือคำตอบที่ทุกคนสะดุดกับคำถามนี้กำลังมองหา

— TehShrike

7

คำถามที่คลุมเครือมาก ดังที่ BoltClock กล่าวว่าการค้นหาสื่อจะทราบขนาดของอุปกรณ์เท่านั้น อย่างไรก็ตามคุณสามารถใช้เคียวรีสื่อบันทึกร่วมกับตัวเลือกสืบทอดเพื่อทำการปรับเปลี่ยน

.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;
    }
}

โซลูชันอื่นเท่านั้นที่ต้องใช้ JS

— cimmanon
แหล่งที่มา

47

คำถามไม่ชัดเจนเลย ในความเป็นจริงมันเป็นคำถามที่ดีมาก น่าเสียดายที่ไม่มีคำตอบที่ดีสำหรับมัน

— Stepanian

2

การบำรุงรักษาแย่มากโดยใช้วิธีนี้

— Totty.js

4

วิธีเดียวที่ฉันสามารถคิดว่าคุณสามารถบรรลุสิ่งที่คุณต้องการอย่างหมดจดด้วย CSS คือการใช้ภาชนะบรรจุของเหลวสำหรับเครื่องมือของคุณ หากความกว้างของคอนเทนเนอร์ของคุณเป็นเปอร์เซ็นต์ของหน้าจอคุณสามารถใช้คิวรีสื่อเพื่อจัดรูปแบบตามความกว้างของคอนเทนเนอร์ได้ในขณะนี้คุณจะทราบขนาดของหน้าจอแต่ละขนาดว่าขนาดของคอนเทนเนอร์ของคุณเป็นอย่างไร ตัวอย่างเช่นสมมติว่าคุณตัดสินใจที่จะทำคอนเทนเนอร์ 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

ฉันยังคิดถึงข้อความค้นหาสื่อ แต่จากนั้นฉันก็พบสิ่งนี้

เพียงสร้าง wrapper ที่<div>มีค่าเปอร์เซ็นต์สำหรับpadding-bottomเช่นนี้

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

<div></div>

ขยายตัวอย่างข้อมูล

มันจะส่งผลให้<div>มีความสูงเท่ากับ 75% ของความกว้างของภาชนะ (อัตราส่วน 4: 3)

เทคนิคนี้ยังสามารถเชื่อมโยงกับการสืบค้นสื่อและความรู้เฉพาะเล็กน้อยเกี่ยวกับเค้าโครงหน้ากระดาษเพื่อการควบคุมที่ละเอียดยิ่งขึ้น

มันเพียงพอสำหรับความต้องการของฉัน ซึ่งอาจเพียงพอสำหรับความต้องการของคุณด้วย

— Hendy Irawan
แหล่งที่มา

2

คุณสามารถใช้ResizeObserver API มันยังอยู่ในช่วงแรก ๆ ดังนั้นจึงยังไม่รองรับเบราว์เซอร์ทั้งหมด (แต่มีโพลีฟิลหลายตัวที่สามารถช่วยคุณได้)

โดยทั่วไป API นี้ให้คุณแนบผู้ฟังเหตุการณ์เพื่อปรับขนาดขององค์ประกอบ DOM

การสาธิต 1 - การสาธิต 2

— José Salgado
แหล่งที่มา

มี polyfill สำหรับข้อมูลจำเพาะฉบับร่าง github.com/juggle/resize-observer

— Trevor Karjanis

บทความของ Heydon ให้ตัวอย่างการใช้งานสิ่งนี้ ค้นหา "ResizeObserver" บนหน้า: heydonworks.com/article/the-flexbox-holy-albatross

— Gabe Rogan

0

สำหรับฉันฉันทำได้โดยตั้งค่าความกว้างสูงสุดของ div ดังนั้นสำหรับเครื่องมือขนาดเล็กจะไม่ได้รับผลกระทบและวิดเจ็ตขนาดใหญ่จะถูกปรับขนาดเนื่องจากสไตล์ความกว้างสูงสุด

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

— Jacky Choo
แหล่งที่มา

คำถามที่กล่าวถึงว่าขนาดวิดเจ็ตอาจแตกต่างกันการตั้งค่าความกว้างสูงสุดจะไม่เปลี่ยนขนาดของวิดเจ็ตเมื่อคอนเทนเนอร์มีความกว้าง .widgetเป็นเพียงตัวอย่างเป็นคลาสสำหรับ div ของวิดเจ็ต

— Jacky Choo

เคียวรีสื่อสามารถปรับขนาดตามองค์ประกอบ div แทนหน้าจอได้หรือไม่?

ปรับปรุง

แบบสอบถามน้ำหนัก

แบบสอบถามความสูง

จำนวนการค้นหา

ตัวเลือกพิเศษ