Жидкий макет: как

Question

Если я отмечу все мои деления в процентах, они хорошо заполнят все пространство. У меня 2 проблемы:

a) Размеры изображения: как определить размеры изображения, чтобы они не становились больше или меньше, чем хотелось бы при изменении размера окна

б) Размеры шрифта. Как увеличить или уменьшить размер шрифта в зависимости от разрешения - нужно ли это вообще делать? (Проблема, с которой я сталкиваюсь, заключается в том, что текст становится неразборчивым при очень высоком разрешении)

Пожалуйста, укажите мне хороший справочник о том, как делать жидкие макеты.

Answer 1

Что касается пункта b), IMHO, это хорошая практика - использовать относительные размеры шрифтов, а не абсолютные, так что размер шрифтов сравнивается с базовыми настройками браузера (я полагаю, из вашей проблемы, что вы используя размеры точек или пикселей, да?). Конечно, у вас есть заголовочные теги, но у вас также есть CSS-атрибут font-size и возможность изменять размер шрифта в% или ems. У вас есть одна веская причина использовать относительные размеры - на мониторах с высоким разрешением это может сделать шрифты абсолютного размера нечитаемыми (я видел, что в старые времена, когда мониторы с разрешением 14 × 800x600 были стандартными, веб-сайт отображался размером примерно спичечный коробок на 21 "мониторе в высоком разрешении). Существует также проблема «вежливости» и доступности - пользователь, возможно, установил размер базового шрифта в своем браузере больше или меньше из-за личных предпочтений и / или проблем с доступностью, и переопределить его на произвольный размер мне не кажется , чтобы быть хорошей идеей.

прочитайте раздел размера шрифта на этой странице: http://www.w3schools.com/css/css_font.asp

Если вам нужны реальные примеры, пожалуйста, опубликуйте немного своего кода и CSS.

Answer 2

Хорошая статья здесь http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Answer 3

а) Я люблю использовать это

img {
    width:100%;
    max-width:400px;
}

затем, если вам нужно, добавьте одно из множества исправлений javascript для максимальной ширины в старых браузерах.