Nano Hash - криптовалюты, майнинг, программирование

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

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

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

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

У меня есть 2 тега div с тегами ID для 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, отличные от этих значений в представлении на рабочем столе, все меняется сразу. Я хочу, чтобы текст оставался прежним в режиме рабочего стола и менялся только в виде планшета. Надеюсь, это имеет смысл.

Ценю ответ.

html css responsive-design
07.11.2013

Ответы:


1

Используйте медиазапросы

Например,

@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. Значения в пикселях используются в качестве приблизительных значений в иллюстративных целях. Вы можете заменить их нужными значениями.

07.11.2013
  • Спасибо, у меня все получилось после проб и ошибок снова и снова, но теперь текст перемещается повсюду. Я был центральным в том же положении. Это нормально на рабочем столе, но на планшете или маленьком он смещается вправо. 08.11.2013
  • Хорошо, это беспорядок, и изображения отсутствуют, но основная проблема, с которой я сталкиваюсь, заключается в том, что с каждой стороны есть поля, я действительно не хочу этого и устанавливаю поля и отступы на 0 перед кодированием сайта, но с тех пор, как изменился медиа-запросы он появился. jsfiddle.net/fSYSJ/11 Я очень ценю ваше время. 08.11.2013

    • 2

    См. рабочий пример медиа-запроса здесь: 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; }
}

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

    07.11.2013

    3

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

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

    поскольку div является элементом BLOCK, он займет все пространство по оси X, поэтому вам не нужно устанавливать свойство ширины. По умолчанию это 100% ;)

    07.11.2013
  • Пожалуйста, не используйте слово «Потому что» в ответах. Пожалуйста, напечатайте свои слова. stackoverflow.com/help/how-to-answer (пишите как можно лучше) 08.11.2013
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..