Скрыть элементы страницы чисто при изменении размера

Question

У меня есть страница с несколькими блоками контента произвольного размера.Есть ли способ, которым я могу:

1. Разрешить этим блокам изменять размер больше или меньше, чтобы заполнить все доступное пространство при изменении размера окна,
2. Указать минимальный размер для каждого из этих блоков,
3. Скрыть блок полностью, когда он не помещается на странице в указанном минимальном размере.

У меня есть полный контроль над HTML и CSS.Я бы сильно предпочел решение без Javascript.

Answer 1

@ темно; может быть, вы хотите веб-сайт жидкости. Таким образом,

1) передайте width в процентах вместо px в div для увеличения или уменьшения размера. проверить больше http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

http://www.alistapart.com/articles/fluidgrids/

2) да, вы можете определить min-width для своего блока, как

.block{
 min-width:20%;
}

3) Для сокрытия блока или изменения дизайна с определенным размером окна вы должны задать min-width или max-width в media query. проверьте ссылку

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://nathanstaines.com/demo/media-queries.html

http://css -tricks.com / CSS-медиа-запросы /

Answer 2

Для 1-го вы можете установить width и height со значением%. Это приведет к изменению размера «блоков» при изменении размера окна. Для второго вы можете установить min-width и min-height, чтобы при любом размере окна блоки не сжимались меньше заданных вами значений. Что касается 3-го, вам придется использовать javascript.