Текст под текстовым ответом

Question

Как я могу отредактировать свой текст. Например, на рабочем столе

-------------------------------- 
    12 0 12 15    | 
           | 
           | 
           | 
-------------------------------- 

И я хочу на мобильный телефон, чтобы идти ниже, если размер шрифта является большой

------ 
    12 | 
    0 | 
    12 | 
    15 | 

Прямо сейчас мой текст не responsive..my цифры против друг друга ,

Вот код, я использую:

.hasCountdown { 
    text-shadow: transparent 0px 1px 1px; 
    overflow: hidden; 
    padding: 30px; 
    /*cursor:pointer;*/ 
} 

.countdown_rtl { 
    direction: rtl; 
} 
.countdown_holding span { 
    background-color: #ccc; 
} 
.countdown_row { 
    clear: both; 
    width: 100%; 
    padding: 3px 2px; 
    text-align: center; 
} 


.countdown_show4 .countdown_section { 
    width: 24.5%; 
} 


.countdown_section { 
    display: block; 
    float: left; 

    text-align: center; 
    line-height: 200%; 
    margin:3px 0; 
    font-family:'halvetica_light'; 
} 
.countdown_amount { 
    font-size: 450%; 
} 


.countdown_amount_red 
{ 
    color:red; 
} 

Answer 1

Вы можете попробовать просто добавить ниже (как вы не предоставили HTML для тестирования)

html{ 
    font-size: 2vw; 
} 

h1{ 
    font-size: 1em; /*Change h1 or size to fit requirements */ 
} 

Answer 2

Взгляните на this

Это бутстрап отзывчивый дизайн. Просто прочитав ссылку Grid System, вы можете сделать свой текст отзывчивым.

Answer 3

К сожалению, с вышеуказанной настройкой ваши шрифты никогда не будут реагировать, поскольку у вас нет ничего, что учитывает размер устройства/окна. Ваш подход (или, по крайней мере, то, как вы его положили) принимает шрифт как элемент, который сделает все это отзывчивым. Я настоятельно рекомендую, чтобы получить и начать с помощью мобильного-первого подхода, и Luke Wroblewski explained it quite well back in '09

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

Ниже некоторые очень краткое объяснение и некоторые ссылки для вашего удовольствия чтения (по крайней мере, в качестве отправной точки), конечно же, все эти решения используют медиазапросы, поэтому обязательно знать, что это тоже:

1. Используйте % или em для мер размера шрифта, это самое основное и немедленное решение для того, что вы ищете. ИМО немного сложно поддерживать в долгосрочной перспективе, но он может работать для простых виджетов/компонентов (How to make your typography responsive).
2. Использование rems в качестве размера блока: это стоит исследовать, и это может потребовать немного понимания основных концепций позади него (Responsive typography with REMs: How to build a scalable typographic foundation in three steps)
3. Используйте vh или vw как единичного размера, то есть высота окна просмотра и ширина окна просмотра, соответственно. (Viewport Sized Typography)

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

Если вы заинтересованы в копании немного больше в веб-типографии, вы также можете принять во внимание modular scale and vertical rhythm, но это уже другая история.

Я надеюсь, что это поможет вам решить вашу проблему и выбрать правильное решение.