Как адаптировать дизайн для разных мониторов?

Question

[Andranikk]

Всем привет.
Имеется веб-сайт с резиновым дизайном, точнее хотелось бы, чтоб дизайн был резиновый. Ширина всех блоков указана в процентах и проблем с этим не возникает. Но высота некоторых элементов и размер шрифта указаны в em, погугил, прочел про media.
В css прописал такое:

@media (min-width: 1000px) and (max-width: 1300px) {
	body {
		font-size: 0.8em;
	}
}

@media (min-width: 1330px) and (max-width: 1499px) {
	body {
		font-size: 0.95em;
	}
}

@media (min-width: 1500px) and (max-width: 1800px) {
	body {
		font-size: 1em;
	}
}

@media (min-width: 1800px) {
	body {
		font-size: 1.2em;
	}
}

Но проблема осталась, даже если указывать значение em для разных размеров монитора, все равно при разных пропорциях ширины и высоты дизайн отображается растянутым. Может делаю что-то не так или делаю недостаточно? Возможно ли полностью адаптировать дизайн, так чтоб он одинакого отображался при всех расширениях?

Answer 1

[Михаил Лялин]

не надо сочетать px и em

habrahabr.ru/post/157115

Comments

[Andranikk]

Может читал невнимательно, но не нашел связи между вопросом и материалом. А как именно указывать различные значения фонт в зависимости от расширения монитора?