Сделайте div занимаемой оставшейся шириной на основе% и на px

Question

То, что я хочу достичь, имеет 1 левый угол, который будет занимать минимум 300 пикселей или если экран больше 25% от него, рядом с ним Я хочу поставить еще один div, который будет занимать остальную часть экрана с возможностью добавления третьего div рядом с теми 2, которые будут сжимать среднюю, чтобы получить ширину 25% или минимум 300 пикселей; Вот образец DIV я создал:

.parents{ 
    width:25%;; 
    min-width:300px; 
    height:100%; 
    background-image:url(img/background_parents.jpg); 
    border-right:3px solid darkgray; 
    overflow:auto; 
} 

Теперь у этого DIV мне нужно 1 с регулируемой шириной из-за возможностью добавления третьей панели с той же шириной, который вы видите выше. Я могу сделать это с помощью jquery, но мне интересно, есть ли возможность достичь этого через CSS, потому что я хочу избежать маршрута постоянных вычислений ширины экрана.

Answer 1

Попробуйте использовать медиа-запросы, чтобы определить свою ширину на основе экрана обнаруженного устройства. Это моя обычная установка:

/* Smaller than standard 960 (devices and browsers) */ 
@media only screen and (max-width: 959px) {} 

/* Tablet Portrait size to standard 960 (devices and browsers) */ 
@media only screen and (min-width: 768px) and (max-width: 959px) {} 

/* All Mobile Sizes (devices and browser) */ 
@media only screen and (max-width: 767px) {} 

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width: 480px) and (max-width: 767px) {} 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media only screen and (max-width: 479px) {}