Как я могу сделать текст в теге div отзывчивым?

У меня есть базовые навыки веб-дизайна atm, я работаю над своим портфолио и нуждаюсь в помощи с целевой страницей, пожалуйста.Как я могу сделать текст в теге div отзывчивым?

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

Цвет тела 12px, но я хочу, чтобы шрифт изменялся в тегах div, а не в тексте тела.

У меня есть 2 тега div с идентификационными тегами для CSS, например.

<div id="heading"> 
    this is my heading text 
</div> 

<div id="subheading"> 
    this is my subheading text 
</div>

Это css.

#heading { 
    float: left; 
    width: 100%; 
    padding-top: 3%; 
    padding-bottom: 1%; 
    font-size: 55px; 
    color: #FFF; 
    position: relative; 
} 

#subheading { 
    float: left; 
    width: 100%; 
    padding-top: 3%; 
    padding-bottom: 3%; 
    font-size: 36px; 
    position: relative; 
}

Я хочу, чтобы оба заголовков, чтобы уменьшить в размере примерно 20/30%, когда окно/браузер изменен , но при изменении значения для планшета CSS, отличного от этих значений в режиме Рабочего стола все сразу меняется. Я хочу, чтобы текст оставался прежним на рабочем столе и менялся только размер в виде планшета. Надеюсь, это имеет смысл.

Цените ответ.

источник

2013-11-07 user2966441

Использование медиа-запросов. – Nitesh

Применение Media Queries

Например,

@media only screen and (min-width: 1920px) { 
    #heading { 
      float:left; 
      width:100%; 
      padding-top:3%; 
      padding-bottom:1%; 
      font-size:55px; 
      color:#FFF; 
      position:relative; 
      font-size: xxpt; /*put your size here*/ 
} 

#subheading { 

      float:left; 
      width:100%; 
      padding-top:3%; 
      padding-bottom:3%; 
      font-size:36px; 
      position:relative; 
      font-size: xxpt; /*put your size here*/ 

@media only screen and (min-width: 1024px) /* for ipad */ { 
      #heading { 
      float:left; 
      width:100%; 
      padding-top:3%; 
      padding-bottom:1%; 
      font-size:55px; 
      color:#FFF; 
      position:relative; 
      font-size: xxpt; /*put your size here*/ 
} 

#subheading { 

      float:left; 
      width:100%; 
      padding-top:3%; 
      padding-bottom:3%; 
      font-size:36px; 
      position:relative; 
      font-size: xxpt; /*put your size here*/ 
}

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

источник

2013-11-07 20:25:18 Nitesh

Спасибо, я заработал после проб и ошибок снова и снова, но теперь текст перемещается повсюду. Я был центральным в том же положении. Это нормально на рабочем столе, но в планшете или маленьком, он сдвигается вправо. – user2966441

Вы можете сделать скрипку и показать проблему. - @ user2966441 – Nitesh

Хорошо, что это беспорядок, и изображения отсутствуют, но основная проблема, с которой я сталкиваюсь, заключается в том, что с каждой стороны есть разница, я действительно этого не хочу и устанавливаю margin и padding на 0 перед кодированием сайта, но с тех пор, как он меняет медиа-запросы, он появился. http://jsfiddle.net/fSYSJ/11/ Я очень ценю ваше время – user2966441

Не устанавливайте ширину на 100% когда-либо! Еще лучше - убрать ширину, и она будет работать; d

#heading { 
padding-top:3%; 
padding-bottom:1%; 
font-size:55px; 
color:#FFF; 
position:relative; 
}

becouse DIV является блоковый элемент, он будет принимать все пространство по оси X, так что вы не должны установить свойство ширины. По умолчанию его 100%;)

источник

2013-11-07 20:27:08

Пожалуйста, не используйте слово «Cuz» в ответах. Пожалуйста, напишите свои слова. http://stackoverflow.com/help/how-to-answer (пишите в меру своих способностей) –

См рабочий пример запроса СМИ здесь: http://jsfiddle.net/fSYSJ/

body { background:silver; } 
#heading { 
float:left; 
width:100%; 
padding-top:3%; 
padding-bottom:1%; 
font-size:55px; 
color:#FFF; 
position:relative; 
} 

#subheading { 
float:left; 
width:100%; 
padding-top:3%; 
padding-bottom:3%; 
font-size:36px; 
position:relative; 
} 

@media screen and (max-width: 768px) 
{ 
    #heading { color:red; } 
    #subheading { color:red; } 
} 

@media screen and (max-width: 420px) 
{ 
    #heading { color:blue; } 
    #subheading { color:blue; } 
}

Обратите внимание, я в настоящее время только изменяя цвет заголовков, просто настроить его, чтобы изменить размер вместо этого, а также настроить точки разрыва в пикселях по своему вкусу.

источник

2013-11-07 20:27:39 HaukurHaf

Как я могу сделать текст в теге div отзывчивым?

ответ

Смежные вопросы