CSS'de maksimum veya maksimum hesaplama hesaplaması

122

Böyle bir şey yapmak mümkün mü

max-width: calc(max(500px, 100% - 80px))

veya

max-width: max(500px, calc(100% - 80px)))

CSS'de mi?

css

— Arnaud
kaynak

Onları kendiniz denediniz mi?

— Kyle G.

5

@ Gert-sønderby'nin dediği gibi, sadece şu ikisini kullanın: min-width: 500px; genişlik: hesap (% 100 - 80 piksel);

— paulie4

11

min(), max()Ve clamp()nihayet mevcuttur!

Firefox 75, Chrome 79 ve Safari 11.1'den (hariç clamp) başlayarak .

min()ve max()herhangi bir sayıda argüman alın.

clamp()sözdizimine sahiptir clamp(MIN, VAL, MAX)ve eşdeğerdir max(MIN, min(VAL, MAX)).

min()ve max()yuvalanmış olabilir. Hem içinde calc()hem de dışında kullanılabilirler , ayrıca matematik ifadeleri de içerebilirler, bu calc()onları kullanırken kaçınabileceğiniz anlamına gelir .

Bu nedenle orijinal örnek şu şekilde yazılabilir:

max-width: max(500px, 100% - 80px);

— kullanıcı
kaynak

1

Ne olursa olsun, macOS için MS Edge (Sürüm 81.0.416.68) da bunlara izin veriyor. Windows sürümünün de çalıştığını varsayabiliriz. Desteklenen minimum sürümü bilmiyorum.

— jhelzer

1

Yeni Edge aslında Chrome'dur, sürümleri Chrome'u takip eder. Tam tarayıcı uyumluluk verileri bağlantılı sayfaların sonundadır .

— kullanıcı

115

Artık medya sorguları kullanılarak 'saf' bir css çözümü mümkündür:

.yourselector {
  max-width: calc(100% - 80px);
}

@media screen and (max-width: 500px) {
  .yourselector {
    max-width: 500px;
  }
}

— Andy
kaynak

3

Harika çözüm! Aslında minimum yükseklik için kullandım, görünüşe göre medya sorgularını da kullanabilirsiniz max-height+1

— avishic

102

Hayır yapamazsın. max()ve min()CSS3 Değerleri ve Birimlerinden çıkarılmıştır. Onlar olabilir yeniden tanıtıldı CSS4 Değerler ve Birimler içinde ancak. Şu anda onlar için bir özellik yoktur ve calc()şartname, her ikisinin de bir calc()işlev içinde geçerli olduğundan bahsetmez .

— David Storey
kaynak

1

Öğenin hesaplanan stilini (aslında kullanılan stili) almak için JavaScript'i kullanabilirsiniz. 80px'i ondan çıkarın ve hangisinin daha büyük olduğunu görmek için 500 ile karşılaştırın. Genişlik - 80'i elde etmek için var val = parseInt (window.getComputedStyle (el, null) .getPropertyValue ("width")) - 80) ve maks. Genişliği ayarlamak için el.style.maxWidth gibi bir şey.

— David Storey

10

Teşekkür ederim. Bununla birlikte, saf bir CSS çözümünü tercih ederim.

— Arnaud

41

Bir CSS sorusu olduğunda ve bir yanıt "JavaScript'i kullanabilirsiniz" ile başladığında, bu yanlıştır. Tüm sunum kodunu CSS'de tutmak istemenin birçok geçerli nedeni vardır. Hepsi-- çoğu değil.

— b264

8

Görünüşe göre min () ve max () CSS Değerleri ve Birimleri Modül Seviye 4'e geri döndü (Editör Taslağı, 1 Eylül 2017) Bağlantı: drafts.csswg.org/css-values/#calc-notation

— Jakob E

5

ANCAK soruna bir çözüm var, aşağıdaki @andy cevabına kaydırmaya devam edin

— Offirmo

44

Bir çözüm, widthkendini kullanmak olacaktır .

max-width: 500px;
width: calc(100% - 80px);

— David Mangold
kaynak

3

Bu iyi bir fikir, ancak @ Arnaud'un sorusunu doğru anlarsam, ya 500pxda maksimum genişliğini istiyor 100% - 80px. Çözümünüz, maksimum genişliği daha büyük 500pxolsa bile sınırlar 100% - 80px.

— Theophilus

2

Ancak kullanmakla aynıdır, min()bu nedenle başkalarına yardımcı olabilir.

— Seika85

17

Bana öyle geliyor ki, yukarıdaki örnekte max-width yerine min-width kullanmak, istenen davranışa eşdeğer olabilir.

— Gert Sønderby

1

Cevap, sayfa genişliği küçüldükten sonra esnek bir konteynere bir kenar boşluğu eklememe yardımcı oldu. codepen.io/OBS/pen/wGrRJV

— ofer.sheffer

@ GertSønderby'nin yorumunun gerçekten doğru çözüm olduğunu gösteren bir çözüm yayınladım.

— SherylHohman

13

İken @ david-Mangold'ın yanıt yukarıda , "yakın" olduğunu yanlış oldu.
(Sen olabilir Bir isterseniz onun çözümü kullanın asgari genişliği yerine ait, maksimum genişliği).

Bu çözüm şu cevabı o @ Gert-Sønderby comment gösteriyor yapar işi:
cevap kullanılmış olmalıdır min-width, değil max-width.

Söylemesi gereken şey buydu:

min-width: 500px;
width: calc(100% - 80px);

Evet, max () işlevini taklit etmek için minimum genişlik artı genişliği kullanın .

İşte codepen (demoyu CodePen'de görmek daha kolay ve kendi testiniz için düzenleyebilirsiniz).

.parent600, .parent500, .parent400 {
    height: 80px;
    border: 1px solid lightgrey;
}
.parent600 {
    width: 600px;
}
.parent500 {
    width: 500px;
}
.parent400 {
    width: 400px;
}

.parent600 .child, .parent500 .child, .parent400 .child {
    min-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid blue;
    height:60px;
}

.ruler600 {
    width: 600px;
    border: 1px solid green;
    background-color: lightgreen;
    height: 20px;
    margin-bottom: 40px;
}
.width500 {
    height: 20px;
    width: 500px;
    background-color: lightyellow;
    float: left;
}
.width80 {
    height: 20px;
    width: 80px;
    background-color: green;
    float: right;
}

.parent600 .wrong, .parent500 .wrong, .parent400 .wrong {
    max-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid red;
    height:60px;
}

<h2>(Min) min-width correctly gives us the Larger dimension: </h2>
<div class="parent600">
    600px parent
    <div class="child">child is max(500px, 600px - 80px) = max(500px, 520px) = 520px</div>
</div>

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

<div class="parent500">
    500px parent
    <div class="child">child is max(500px, 500px - 80px) = max(500px, 420px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent400">
    400px parent (child expands to width of 500px)
    <div class="child">child is max(500px, 400px - 80px) = max(500px, 320px) = 500px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>


<h2>(Max) max-width <em>incorrectly</em> gives us the Smaller dimension: </h2>
<div class="parent400">
    400px parent
    <div class="wrong">child is min(500px, 400px - 80px) = min(500px, 320px) = 320px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent500">
    500px parent
    <div class="wrong">child is min(500px, 500px - 80px) = min(500px, 420px) = 420px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent600">
    600px parent
    <div class="wrong">child is min(500px, 600px - 80px) = min(500px, 520px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

Snippet'i genişlet

Bununla birlikte, @ andy'nin yukarıdaki cevabı daha kolay anlaşılabilir ve birçok kullanım durumunda daha uygun olabilir.

Ayrıca, sonunda şunu unutmayın: a max()ve a min()işlevinin CSS'ye eklenebileceğini, ancak Nisan 2019 itibarıyla spesifikasyonun bir parçası olmadığını unutmayın.

Burada max()Tarayıcı uyumluluğunu kontrol edebilirsiniz :
https://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility .
Teklifin taslağı:
https://drafts.csswg.org/css-values-4/#comp-func .
Son revizyon tarihini görmek için sayfanın en üstüne gidin (Bugün itibariyle, en son 5 Nisan 2019'da revize edilmiştir).

— SherylHohman
kaynak

1

Neden olumsuz oy? Belirtilen her şey doğrudur ve tüm kaynaklar bağlantılı ve kredilendirilmiştir.

— SherylHohman

1

@Amaud Aynı sonuca sahip olmak için bir alternatif var mı?

Benzer sonuçlar elde edecek js olmayan saf bir css yaklaşımı vardır. Ana öğeler konteyner dolgusunu / kenar boşluğunu ayarlamanız gerekir.

.parent {
    padding: 0 50px 0 0;
    width: calc(50%-50px);
    background-color: #000;
}

.parent .child {
    max-width:100%;
    height:50px;
    background-color: #999;
}

<div class="parent">
  <div class="child"></div>
</div>

Snippet'i genişlet

— Jicub
kaynak