divİçinde bulundukları bir öğenin boyutuna göre öğeleri yeniden boyutlandırmak için medya sorguları kullanmak istiyorum . divSadece web sayfası içinde bir widget gibi kullanıldığı gibi ekran boyutunu kullanamıyorum ve boyutu değişebilir.

Güncelleme

Şu anda bu konuda iş yapılıyor gibi görünüyor: https://github.com/ResponsiveImagesCG/cq-demos

css media-queries

— Yazz.com
kaynak

2

Bu sorunun iyi bir cevap alamayacak kadar kısa olduğunu düşünüyorum. Belki de yapmaya çalıştığınız şeyin bir örneğini verebilir misiniz? Belki fikrinizi test etmek ve başkalarının size yardım etmesine izin vermek için jsfiddle.net kullanın? Genellikle sorduğunuz şey için hiçbir neden olmamalı, medya sorguları olmadan CSS ile istenen sonuçları elde edebilmelisiniz. İç içe öğeleri ölçeklemek için yazı tiplerinde yüzde boyutlarını ve ems değerlerini kullanabilirsiniz. Ama belki de daha iyi anlamak için html kodunuzun ve css'inizin bir örneğini görmem gerekiyor?

— BenSwayne

1

Widget'ınızın boyutu nasıl değişebilir? Sayfanız 1024 pikselin üzerinde görünüm alanlarına sahip sabit genişlikte mi (örnek olarak 960 piksel) mı yoksa her ikisi de akıcı mı? Bu belirsiz ve bilmek faydalı olacaktır

— FelipeAls

3

Aslında şu anki projem de benzer bir duruma sahip. Bir öğe listesi, geniş aygıtlar için 2-sütun düzeninde veya dar aygıtlar için 1-sütun düzeninde görüntülenir, ancak tek bir öğe ne olursa olsun 1 sütunluk düzende olacaktır. Hem liste hem de tek sürümde oldukça geniş ve kısa olan 2 öğe vardır. Daha geniş cihazlarda, 2 öğe en iyi yan yana görünür. İdeal olarak, dar cihazlar: her zaman dikey, geniş cihazlar: her zaman paralel, arasında bir yerde (1 veya 2-col'ye bağlı): dikey veya paralel. Yüzen basit bir çözümdür, ancak genişliğin düzene bağlı olarak da değişmesi gerekir.

— cimmanon

1

LESS CSS'de derlenecektir, bu nedenle CSS desteklemiyorsa, LESS size de yardımcı olamaz.

— jvannistelrooy

3

Bağlantı artık etkin değil mi?

— mix3d

228

Hayır, medya sorguları bir sayfadaki öğelere göre çalışmak üzere tasarlanmamıştır. Cihazlara veya medya türlerine göre çalışmak üzere tasarlanmıştır (bu nedenle bunlara neden medya sorguları denir ). width, heightve diğer boyut tabanlı ortam özelliklerinin tümü, ekran tabanlı ortamdaki görünümün veya cihazın ekranının boyutlarını ifade eder. Bir sayfadaki belirli bir öğeye atıfta bulunmak için kullanılamazlar.

divSayfanızdaki belirli bir öğenin boyutuna bağlı olarak stiller uygulamanız gerekiyorsa div, medya sorguları yerine o öğenin boyutundaki değişiklikleri gözlemlemek için JavaScript kullanmanız gerekir .

— BoltClock
kaynak

Bir şekilde bir elemandan boyutu almak için medya sorguları ile fonksiyonları kullanabileceğimi duydum. Öğeleri yeniden boyutlandırmak için bunu medya sorgularıyla birleştirebilmemin bir yolu var mı?

— Yazz.com

1

Öğenizin genişliğini periyodik olarak almak ve buna göre tepki vermek için JS'yi kullanmanız gerekir (periyodik olarak = her saniye ya da daha fazla ya da bazı tarayıcıları yavaşlatır; buna göre = en hızlı yöntemi istiyorsanız widget'ınızı şekillendiren sınıfları değiştirerek).

— FelipeAls

6

Bunu yerel olarak başarmak için @elementsorgulara ihtiyacımız var . W3C'nin kafiye / @mediasorgulama nedeni hakkında bazı iyi belgeleri vardır : w3.org/TR/css3-mediaqueries/#width (bu bağlantı sizi, içinde bulunan öğeler değil genişlik --- ortam türünün genişliklerini tartışan bölüme götürür)

— Dawson

E-postalarda çalışmasını sağlama şansınız var mı? Kapsayıcı div çok küçük olduğunda (örneğin, Gmail masaüstü sürümü e-posta alanı, örneğin pencere yeniden boyutlandırma nedeniyle, 2 sütunlu bir tasarıma sığacak kadar küçük olduğunda) e-postalara mobil stil uygulamaya çalışıyorum.

— Lev

Bu arada, @element sorguları css'i bir Turing tam dili yapar

— Nick

117

Bu hedefe ulaşmak için bir javascript şim oluşturdum. İsterseniz bir göz atın, bu bir kavram kanıtıdır, ancak dikkat edin: erken bir sürümdür ve yine de biraz çalışmaya ihtiyaç duyar.

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

— Marc J. Schmidt
kaynak

5

Teşekkürler, etkilendim

— Yazz.com

5

Bu inanılmaz. Duyarlı bootstrap ile birlikte sadece @media ile elde edilemeyen harika şeyler yapıyorum. Aferin.

— Aku

3

Hayatlarımızı kurtardın

— Broda Noel

Vay be, gerçekten güzel, işleri çok daha kolay hale getiriyor

— kaiser

Güzel. Soruyu sor. Нow bu eklenti tespit 's - hangi unsurların min-widthöznitelik yenilemek gerekir; min-widthyenileme için etkin olan css sınıfı listesini, işaretli öğeleri elle yazmam gerekir mi?

— Alexander Goncharov

38

Bir iframe'in içindeki Medya Sorgusu, öğe sorgusu olarak işlev görebilir. Bunu başarıyla uyguladım. Fikir , Zurb'in Duyarlı Reklamlar hakkındaki son yayınlarından geldi. Javascript yok!

— haddnin
kaynak

Bunun en iyi çözüm olduğunu düşünüyorum, çünkü medya sorguları iframe içinde çalışıyor.

— emfi

25

@BoltClock kabul edilen cevaba yazdığı için şu anda sadece CSS ile bu mümkün değildir, ancak JavaScript kullanarak bu sorunu çözebilirsiniz.

Bu tür bir sorunu çözmek için bir konteyner sorgusu (aka öğe sorgusu) prolyfill oluşturdum. Diğer komut dosyalarından biraz farklı çalışır, bu nedenle öğelerinizin HTML kodunu düzenlemeniz gerekmez. Tek yapmanız gereken komut dosyasını dahil etmek ve CSS'nizde şu şekilde kullanmaktır:

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

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

— ausi
kaynak

2

JS ile dolu. Amaç sadece CSS'de işlevselliğe sahip olmaktır.

— Yeşil

13

Prolyfills (ve polyfills ), genellikle henüz tarayıcı tarafından desteklenmeyen bir özelliği etkinleştirmek için JS yazılır. Prolyfill'in amacı, bu özellik CSS'de desteklendikten sonra eski hale gelmektir.

— ausi

3

@ius, soruda “sadece CSS” den bahsedilmiyor. Nasıl bu kanıya vardın?

— ausi

1

sen hariç @ius olamaz css bir çözüm dışında sunan mükemmel makul yani muhtemelen CSS'de bunu. "Hayır yapamazsın" dan çok daha iyi değil mi;)

— Wesley Smith

1

@ DelightedD0D yorumumdan sonra cevabı değiştirdi ve değişiklik için +1 oy verdim. Şu anki cevap benim için sorun değil çünkü bunun sadece CSS ile mümkün olmadığını söylüyor.

— Ius

17

Birkaç yıl önce aynı problemle karşılaştım ve işimde bana yardımcı olacak bir eklentinin geliştirilmesini finanse ettim. Eklentiyi açık kaynak olarak yayınladım, böylece diğerleri de bundan yararlanabilir ve Github'da yakalayabilirsiniz: https://github.com/eqcss/eqcss

Sayfadaki bir öğe hakkında bildiklerimize bağlı olarak farklı duyarlı stiller uygulamanın birkaç yolu vardır. İşte EQCSS eklentisinin CSS'de yazmanıza izin vereceği birkaç öğe sorgusu:

@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 ile uyumlu stiller için hangi koşullar destekleniyor?

Ağırlık Sorguları

min genişliği px
min genişliği %
maksimum genişlik px
maksimum genişlik %

Yükseklik Sorguları

min yükseklik px
min yükseklik %
maksimum yükseklik px
maksimum yükseklik %

Sorguları Say

min-karakterler
max-karakterler
Min hatları
Maksimum hatları
min-çocuk
max-çocuk

Özel Seçiciler

EQCSS öğesi sorgularının içinde, stillerinizi daha spesifik olarak uygulamanıza izin veren üç özel seçici de kullanabilirsiniz:

$this (sorguyla eşleşen öğeler)
$parent (sorguyla eşleşen öğelerin üst öğeleri)
$root(belgenin kök öğesi, <html>)

Öğe sorguları, mizanpajınızı, her biri sayfada nasıl görüntülendiğini biraz 'öz-farkında' olan bireysel olarak duyarlı tasarım modüllerinden oluşturmanıza olanak tanır.

EQCSS ile tek bir widget'ı 150 piksel genişlikten 1000 piksel genişliğe kadar iyi görünecek şekilde tasarlayabilir, ardından bu widget'ı herhangi bir şablon (herhangi bir sitede) kullanarak herhangi bir sayfadaki herhangi bir kenar çubuğuna güvenle bırakabilirsiniz ve

— innovati
kaynak

1

Güzel proje! Yaptıklarınıza bir göz

— attım

@innovati Bu gönderiyi öğeler üzerinde sorgu yapmanın bir yolunu ararken buldum. İşe yaramıyor gibi görünmüyorum. Biletimi incelemek ister misiniz? github.com/eqcss/eqcss/issues/96

— Andrew Newby

10

Bir düzen perspektifinden, modern teknikler kullanılarak mümkündür.

Heydon Pickering tarafından yapıldı (inanıyorum). Süreci burada detaylandırıyor: http://www.heydonworks.com/article/the-flexbox-holy-albatross

Chris Coyier bunu alıyor ve burada bir demo ile çalışıyor: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/

Sorunu yeniden ifade etmek için, aşağıda her biri etiketli üç turuncu div'den oluşan aynı bileşenden 3 tanesini görüyoruz a , bve c.

İkinci ikinin blokları dikey olarak görüntülenir, çünkü bunlar yatay odada sınırlıdır, üstteki bileşenler 3 blok yatay olarak yerleştirilir.

flex-basisBu efekti oluşturmak için CSS özelliğini ve CSS Değişkenlerini kullanır .

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

gösteri

Heydon'un makalesi, ayrıntılı olarak açıklayan 1000 kelimedir ve okumanızı şiddetle tavsiye ederim.

— Djave
kaynak

Heydon'un makalesindeki o şey ... Görünüşe göre sihir gibi çalışıyor! Yanıtınız için teşekkür ederim, harika.

— ptyskju

2

Bu soruda tökezleyen herkesin aradığı cevap budur

— TehShrike

7

Soru çok belirsiz. BoltClock'un dediği gibi, medya sorguları yalnızca cihazın boyutlarını bilir. Ancak, ayarlamaları yapmak için medya sorgularını alçaltıcı seçicilerle birlikte kullanabilirsiniz.

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

Diğer tek çözüm JS gerektirir.

— cimmanon
kaynak

47

Soru hiç de belirsiz değil. Aslında bu çok iyi bir soru. Ne yazık ki, bunun iyi bir cevabı yok.

— stepanian

2

Bu yaklaşımı kullanarak korkunç bakım.

— Totty.js

4

Tamamen css ile istediğinizi başarabileceğinizi düşünebilmemin tek yolu, widget'ınız için sıvı kabı kullanmaktır. Konteynerinizin genişliği ekranın bir yüzdesiyse, artık her bir ekranın boyutları için kapsayıcınızın boyutlarının ne olduğunu bildiğiniz için, kapsayıcınızın genişliğine bağlı olarak stil oluşturmak için medya sorgularını kullanabilirsiniz. Örneğin, kapsayıcınızın ekran genişliğinin% 50'sini yapmaya karar verdiğinizi varsayalım. Sonra 1200 piksel ekran genişliği için konteynerinizin 600 piksel olduğunu bilirsiniz

.myContainer {
  width: 50%;
}

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

— Roumelis George
kaynak

Hayır, ekranda çirkin görünüyor. Ekran boyutu daha hızlı değişir, ancak öğe daha sonra ve daha küçük bir ekranda görünür.

— Yeşil

3

Ayrıca medya sorgularını düşünüyordum, ama sonra buldum:

Bunun için <div>yüzde değeri olan bir sarıcı oluşturun padding-bottom:

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

<div></div>

Snippet'i genişlet

<div>Yüksekliği, kabının genişliğinin% 75'ine eşit bir yüksekliğe neden olacaktır (4: 3 en boy oranı).

Bu teknik, daha da hassas bir kontrol için medya sorguları ve sayfa düzeni hakkında biraz geçici bilgi ile de birleştirilebilir.

Benim ihtiyaçlarım için yeterli. Bu da ihtiyaçlarınız için yeterli olabilir.

— Hendy Irawan
kaynak

2

ResizeObserver'ı kullanabilirsiniz API'sını . Hala ilk günlerde, bu yüzden henüz tüm tarayıcılar tarafından desteklenmiyor (ancak size yardımcı olabilecek birkaç çoklu dolgu var).

Temel olarak bu API, bir DOM öğesinin yeniden boyutlandırılmasına bir olay dinleyicisi eklemenize izin verir.

Demo 1 - Demo 2

— José Salgado
kaynak

Taslak belirtimi için bir çoklu dolgu var. github.com/juggle/resize-observer

— Trevor Karjanis

Heydon'un makalesi bunun örnek bir uygulamasını sunmaktadır. Sayfada "ResizeObserver" ifadesini arayın: heydonworks.com/article/the-flexbox-holy-albatross

— Gabe Rogan

0

Benim için div'ın maksimum genişliğini ayarlayarak yaptım, bu nedenle küçük widget için etkilenmeyecek ve büyük widget maksimum genişlik stili nedeniyle yeniden boyutlandırılacak.

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

— Jacky Choo
kaynak

Widget boyutunun değişebileceğini belirten soru, maksimum genişlik ayarlandığında kap geniş olduğunda widget'ın boyutunu değiştirmez. .widgetwidget'ın div sınıfı olarak yalnızca bir örnektir.

— Jacky Choo

Medya sorguları ekran yerine div öğesine göre yeniden boyutlandırılabilir mi?

Güncelleme

Ağırlık Sorguları

Yükseklik Sorguları

Sorguları Say

Özel Seçiciler