Liquid Layout: Как до

Question

Если я пометить все свои divs в процентах, они заполняют все пространство красиво. Я столкнулся 2 проблемы:

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

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

Пожалуйста, укажите мне, как сделать жидкие макеты.

Answer 1

Что касается пункта б), то есть, имхо, хорошая практика, чтобы использовать относительные размеры шрифтов, а не абсолютные, так что шрифты размера по сравнению с браузерами базовых настроек (I» m, угадывая, из вашей проблемы, что вы используете точечные или пиксельные размеры, да?). Конечно, у вас есть теги заголовков, но у вас также есть атрибут CSS шрифта и возможность изменять шрифты в% или ems. У вас есть одна веская причина использовать относительные размеры - на мониторах с высоким разрешением это может сделать нечитаемые шрифты абсолютного размера (я видел, в прежние времена, когда 14 "мониторов 800x600 были стандартными, веб-сайт, который отображался примерно в размере Matchbox на 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; 
} 

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