Как написать css для уменьшения размера шрифта

Question

Я ищу, чтобы уменьшить размер шрифта автоматически (в процентах) в CSS зависит от размера экрана.

цель из этого контролировать размер шрифта на использование платформы (PC или Mobile)

вот мой нормальный CSS

.pagetitle, .menutitle{ 
    font:Verdana, Geneva, sans-serif; 
    font-size:2em; 
    line-height:40px; 
    height:40px; 
    display:block; 
    margin-left:15px; 
} 

спасибо.

Answer 1

Если вы хотите, чтобы различать между мобильным и компьютером, вы можете использовать CSS @media queries, как:

@media all and (max-width: 767px) { 
    // CSS rules for viewport that is narrower than 780px 
} 

Например:

@media all and (max-width: 767px) { 
    .pagetitle, .menutitle { 
     font-size: 12px; 
    } 
} 

Однако запросы CSS СМИ не должны определяться исключительно устройством только размеры - иногда имеет смысл настраивать точки останова на основе содержимого или дизайна вашего систра, в котором вы выбираете произвольную ширину (ширины), где происходит переключение компоновки.

---

Вы можете попробовать использовать единицы просмотра: vh, vw, vmin и vmax. Они объявляются численными значениями, хотя они технически представляют процент измерения в области просмотра, на который они ссылаются.

Например, если ваш экран 1600 * 768 в разрешении, используя размер шрифта:

• 5vw даст вам 80px-5% ширины окна просмотра
• 5vh даст вам 38.4px (вероятно, округленный до 38px, оказывая) -5% высоту окна просмотра
• 5vmax даст вам 80px-5% от наибольшего размера (в данном случае, горизонтальное измерение 1600 пикселей)
• 5vmin даст Вы 38.4px-5% более короткой размерности (в данном случае, вертикальное измерение 768px)

Обратите внимание, что последние две единицы чувствительны к устройства/ориентации видового экрана :)

Answer 2

Настройка медиа-запросов (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) различных целевых разрешений. Затем задайте явные размеры шрифта в теге body {} в каждом запросе на медиа.

Answer 3

Свойство CSS с корректировкой размера текста позволяет веб-разработчикам контролировать, применяется ли и как алгоритм раздувания текста к текстовому содержимому элемента, к которому он применяется. Это в основном означает, что текст будет корректироваться в зависимости от ширины экрана. Приведенный ниже код может быть полезным:

Formal syntax: none | auto | <percentage> 

text-size-adjust: none    /* text is never inflated */ 
text-size-adjust: auto    /* text may be inflated */ 
text-size-adjust: <percentage>  /* text may be inflated of this exact proportion */ 
text-size-adjust: inherit 

ound подробнее об этом на следующем сайте: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust