Как реализовать эту логику в CSS?

Question

Я хочу два div, первый из которых большой квадрат, а второй - небольшой квадрат. И второй находится внутри большого. Большой квадрат не менее 640 пикселей, если> 640px, он получит ширину экрана 80%. Вторая ширина - ширина большого квадрата -200px.

Могу ли я реализовать эту логику в CSS? или мне нужен javascript для динамического его установки? Спасибо.

Answer 1

Это квадраты, о которых вы говорите о предполагаемых реальных квадратах (ширина == высота), или вам просто нужно, чтобы ширина и прямоугольники были в порядке? В последнем случае это может быть сделано с простым CSS:

#big{ 
    width:80%; 
    min-width:640px; 
    padding:100px; 
} 
<div id="big"> 
    <div id="small"> 
    </div> 
</div> 

в действии здесь: http://jsfiddle.net/2evFx/