#javascript #jquery #css
#javascript #jquery #css
Вопрос:
Я следовал инструкциям к письму на flowtype demo, используя шаги 1-4.
Когда я показываю свою страницу, шрифты огромны. Используя Chrome на моем компьютере, который имеет разрешение 1920 * 1200, я получил доступ к инструментам разработчика в полноэкранном режиме и посмотрел на свой H1 элемент.
В нижней части моего наследования для font-size свойства находится мое 18px из шага 1 инструкций. Затем я получаю значение 40px из чего-то, называемого «таблицей стилей пользовательского агента», которая, как я предполагаю, является flowtype.js сценарием. В соответствии с шагом 1 инструкций, которые я затем H1 установил в 4em , что приводит к окончательному размеру 160px !
Я вызываю скрипт, используя рекомендацию на шаге 4. Он изменяет размер всего, когда я изменяю размер своего окна, но я не могу понять, почему он начинается с таких огромных шрифтов.
Комментарии:
1. » таблица стилей пользовательского агента » — это браузеры, встроенные в настройки CSS по умолчанию.
2. Покажите свой CSS, пожалуйста.
3. Мой CSS соответствует веб-сайту flowtype example:/* следующее предназначено для flowtype.js плагин */ body { размер шрифта: 18 пикселей; } h1, h2, h3, h4, h5, h6, p { высота строки: 1.45; } h1 { размер шрифта: 4em; } h2 { размер шрифта: 3em; } h3 { размер шрифта: 2em; } h4 { размер шрифта: 1em; }
4. Странно, как «Таблица стилей пользовательского агента» переопределяет мой CSS выше.
Ответ №1:
Возможно, вам потребуется указать «базовый» размер шрифта в body . Допустим: body {font-size:12px;} .
Код:
$('body').flowtype({
minFont : 12,
maxFont : 40,
fontRatio: 30,
minimum : 500,
maximum : 1200
});
Укажите minimum ширину, maximum width, minFont maxFont , fontRatio и the -.
http://simplefocus.com/flowtype /
Комментарии:
1. Это, как я называю flowtype:<script> $(‘body’). flowtype({ минимум: 500, максимум: 1200, минимальный шрифт: 12, максимальный шрифт: 40, шрифт: 30 }); </script>
2. Вам также необходимо добавить следующий код CSS:
body {font-size:12px;}