Я думаю, что ваш клиент вполне прав, чтобы указать на это. Обычно причина, по которой люди устанавливают размеры шрифта браузера выше «нормального» порога, заключается в плохом зрении. По этой причине это не только хорошая практика, но и знак порядочности, чтобы приспособиться к людям, которым не повезло иметь зрение 20/20.
Решение проблемы - использование em размеров и min-widths. в то время как это не приведет к идеальным макетам в пикселях, оно создаст идеальные относительные макеты. Все макеты будут иметь одинаковые пропорции независимо от размера шрифта.
Оказывается, что вычисление размеров таких вещей, как кнопки, также намного проще при использовании em.
Вот как ты это делаешь.
body {
// Allow the font size to be as big as the browser wants.
font-size: 100%;
}
.main-container {
// allow you body container to stretch as big as it needs
// You could also specify this in em's
min-width: 960px;
}
.button {
// want some bigger text, that's fine
font-size: 1.2em;
// the rest of button is now normalised so 1em is actually 1.2em
// set the width by counting the characters in the button text
// remember to take any padding on the button into account
// in the width
width: 10em;
padding: 1em;
}
Довольно просто приблизиться к идеальному пикселю, используя em, просто попробуйте запомнить, что обычный размер шрифта в браузере составляет около 16px, поэтому 5px примерно 1/3 от 16
так в em х 0.3em.
Другими словами, в качестве ориентира или общего правила расчета размеров.
0.3em = 5px
О em нужно помнить, что они наследуются от родительского контейнера.
, например
.my-content {
font-size: 1.2em;
}
.my-content .my-paragraph {
font-size: 1em;
// this is actually 1.2em because it inherits and normalises
// from it's parent
}
my.content .my-paragraph .my-span {
font-size: 1.2em;
// is 1.2 + 20%
}
так будет цепляться вниз. Таким образом, правило гласит: указывайте размеры шрифта непосредственно для элемента, который нужно стилизовать, а не для его родителя.
Самое замечательное в вашем сайте сейчас в том, что он будет отлично выглядеть в любом размере. Это будет здорово на множестве мобильных устройств, планшетов, мониторов с высоким разрешением, 50-дюймовых плоских экранов или 50-футовых информационных дисплеев.
И вы помогли всем людям с плохим зрением увидеть ваш сайт и вашу тяжелую работу во всей его относительной красоте.