Верстка: можно ли ресайзить сайт (не путать с адаптивностью)?

Question

[4elentano]

При изменении ширины окна браузера сайт должен ресайзиться, т.е. увеличиваться размеры шрифтов и картинок (например, векторные в SVG) при сохранении пропорций.

Как будто бы мы просто изменяли размеры изображения, а не сайта. Насколько это реализуемо?

Answer 1

[4elentano]

Вот тут есть решение: CSS zoom есть ли аналог?

Answer 2

[Максим Пак]

@media screen and (min-width:100px) and (max-width:2000px) {
body .wrapper {
width : 90%;
max-width: 980px;
margin : 0 auto;
font-size: 14px;
}

h1 { font-size: 100%; }
h2 { font-size: 95%; }
h3 { font-size: 85%; }
}

@media screen and (min-width:100px) and (max-width:768px) {
body .wrapper {
width : 100%;
margin : 0 auto;
font-size: 16px;
}

h1 { font-size: 110%; }
h2 { font-size: 100%; }
h3 { font-size: 90%; }
}

Или JS-ом определяешь размеры окна браузера и подставляешь вычисленные значения нужным блокам.

Comments

[pomeo]

@PML на background-image это не действует

[Максим Пак]

с бэкграундом еще интересней:)

Answer 3

[pomeo]

В css есть zoom, выглядит нормально, всё пропорционально.
Как в хроме ctrl+ +/-

Answer 4

[Максим Пак]

Для бэкграунда

$(document).ready(function() {
	var windowHeight = $(window).height();
		$('.box').css('height', windowHeight-92);
	});
});

где 92 это высота твоей шапки.

<div class="box">
	<img src="img.jpg" style="position:absolute; z-index:0; height:100%; width:100%;">

</div>

Comments

[pomeo]

@PML это адовые костыли =) Вот works.sovechkin.com/abrau-durso/promo.html сделано через zoom, работает сносно

[4elentano]

Почти то, что нужно. Но пропорции все же меняются, если посмотреть на расстояние от блока текста до «Условия акции». Хотя м/б и нереально получить эффект ресайза картинки

[4elentano]

Я прокомментировал ссылку в первом комменте)

[pomeo]

@4elentano потому что там не только zoom, а ещё и резина. Логично что при увеличении ширина окна, элементы по ширине разъезжаются. Неясно только чего вы увидели в другом вопросе и выбрали его ответом.