min/max larghezza/altezza con più valori

Question

voglio limitare la larghezza di un <div> non più di 50%, e non più di 200px.

Il che significa che, quando 50% è inferiore a 200px, dovrebbe avere lo stesso comportamento max-width: 50%, altrimenti il ​​suo comportamento diventa max-width: 200px.

Come posso definire questo con i CSS?
(senza min funzione, che non sono stati ancora supportato)

<div class="some_element">Text here</div> 
<style> 
.some_element { 
    background: red; 
    float: left; 
    width: auto; 
    max-width: 200px; 
    max-width: 50%; /* this will override previous one, but i want both of them work */ 
} 
</style> 

Answer 1

Si può provare come menzione qui sotto

.some_element { 
    background: red; 
    float: left; 
    width: auto; 
    width: 50%; 
    max-width: 200px;   
} 

Answer 2

Non è possibile impostare max-width sia 200px e il 50%. Si potrebbe mettere l'elemento in un altro elemento con max-width di 400px:

<div id="parent"> 
    <div id="child">Text here</div> 
</div> 


#parent { 
    background-color: red; 
    max-width: 400px; 
} 
#child { 
    background-color: green; 
    max-width: 50%; 
} 

Answer 3

creare classi separate e aggiungerli in modo dinamico sulla base outerWidth()

.some_element { 
     background: red; 
     float: left; 
     width: auto; 
    } 

    .widthClass1{ 
    max-width:50%; 
    } 

    .widthClass2{ 
    max-width:200px; 
    } 


    $(document).ready(function(){ 
     if($("textDiv").outerWidth()<400){//instead of dividing by 2 I am comparing with 400 
     $("textDiv").addClass('widthClass1') 
     }else{ 
     $("textDiv").addClass('widthClass2') 
     } 
    }); 

Answer 4

<div id="parent"> 
    <div id="sub">test content</div> 
</div> 

// css

#parent { 
    max-width: 200px; 
} 
#sub { 
    width: 50%; 
} 

Answer 5

È possibile specificare la regola desiderata come larghezza massima del 50% quando la larghezza della pagina è inferiore o uguale a 400 px e 200 px quando la pagina w l'ID è maggiore o uguale a 400 px. Sembra molto simile a una query sui media! Mi occupo larghezza dello schermo più piccoli e poi override per larghezze di grande, che è questo CSS:

.some_element { 
    background: red; 
    float: left; 
    width: auto; 
    max-width: 50%; 
} 
@media (min-width: 400px) { 
    .some_element { 
    max-width: 200px; 
    } 
} 

Se si preferisce, è possibile scambiare la 50% e la 200px e cambiarne anche l'min-width-max-width.