Менять dinámicamente текст на странице responsive

Я программирую страницу responsive, но нуждаюсь в том, чтобы иметь различные тексты в зависимости от размера той же самой. А именно:

  • 900px: Автономная Ассоциация Автомобильного спорта;
  • 450px: Asoc. Автономная Автомобильный спорт;
  • <400px: AAA;

Он был бы должен загружать все их и показывать их с display: block и скрывать их с hidden? Или более работоспособный способ есть?

4
задан 26.11.2016, 16:02
3 ответа

В он мне нравится больше asГ-:

.texto_responsive:before{
  content: attr(data-desktoptext);
}

@media (max-width:900px) {
    .texto_responsive:before {
        content: attr(data-tablettext);
    }
}

@media (max-width:400px){
    .texto_responsive:before {
        content: attr(data-phonetext);
    }
}
<span class="texto_responsive" data-desktoptext="Asociación Autónoma del Automovilismo" data-tablettext="Asoc. Autónoma Automovilismo" data-phonetext="AAA"></span><br>
<span class="texto_responsive" data-desktoptext="Mi texto para desktop" data-tablettext="Mi texto para tablet" data-phonetext="Mi texto para movil"></span>

2 преимущества:

  1. ты Можешь менять текст на html и asГ - иметь несколько языков
  2. , ты Можешь делать это genГ©rico и использовать это в большем количестве случаев
7
ответ дан 24.11.2019, 12:23
  • 1
    Не sabí в который podí an использовать признаки внутри content. Очень хороший ответ +1 – Francisco Romero 25.11.2016, 11:58
  • 2
    Очень хорошая идея, прежде всего он мне нравится, что тот же CSS servirí в для mú ltiples случаи. Даже así я продолжаю думать, что deberí чтобы помещать главный текст внутри этикетки и despué s использовать té cnica @Error404 или эта. – blonfu 25.11.2016, 12:07
  • 3
    Не sabí в который podí чтобы это делать, большое спасибо. У меня есть добавочное сомнение. ¿ Có mo я это использую с queries mySQL? ¿ Или я могу делать ловушку? А именно: ¿ content: $ texto1? Спасибо, probaré когда у него будет время. Но он мне нравится. – Armando García 25.11.2016, 22:31

Пример CSS

Ты можешь реализовывать это просто с CSS со свойством content, селектор :before и media-queries.

Здесь - твой пример:

#texto:before{
  content: "Asociación Autónoma del Automovilismo";
}

@media (max-width:900px) and (min-width:450px) {
    #texto:before {
        content: "Asoc. Autónoma Automovilismo";
    }
}

@media (max-width:400px){
    #texto:before {
        content: "AAA";
    }
}
<span id="texto"></span>

Пример Javascript

Кроме того, это также ты можешь реализовывать это посредством Javascript сигара. Каково главное преимущество? Что есть много программных средств, которые соглашаются прямо на DOM страницы (HTML), и следовательно с первым примером эти приложения не будут мочь соглашаться на тексты. Однако, Javascript измени прямо DOM страницы и следовательно эти программные средства, если, что смогут соглашаться на эти тексты.

Пример с Javascript:

window.addEventListener("resize", cambiarTexto);

function cambiarTexto() {    
    var width = document.documentElement.clientWidth;
    
    if (width < 900 && width > 450){
      document.getElementById("texto").innerHTML = "Autónoma Automovilismo";
    }else if(width < 400){
      document.getElementById("texto").innerHTML = "AAA";
    }else{
      document.getElementById("texto").innerHTML = "Asociación Autónoma del Automovilismo";
    }
}
<span id="texto">Asociación Autónoma del Automovilismo</span>
5
ответ дан 24.11.2019, 12:23
  • 1
    Изобретательная идея, он мне нравится. Проблема - что, если текст значимый deberí чтобы быть в HTML. Может быть podrí чтобы помещать " Asociació n Autó noma Automovilismo" в HTML и скрывать это из-за CSS, если дезактивируются стили aparerecerá текст – blonfu 25.11.2016, 09:33
  • 2
    @blonfu podrí an создавать три spans и показывать видимость каждого из них. Однако, я верю в то, что таким образом как HTML, так и CSS quedará n много má s чистые. – Francisco Romero 25.11.2016, 09:34
  • 3
    Sí поэтому я выдвигаю мысль это помещать в HTML и это скрывать, но использовать твой té cnica :before, чтобы показывать тексты. И если дезактивируются стили aparecerá первоначальный текст и лекторат экрана также leerá n без проблемы. – blonfu 25.11.2016, 09:37
  • 4
    @blonfu ¿ Ты имеешь в виду помещать назначенный по умолчанию текст, если дезактивируются стили? – Francisco Romero 25.11.2016, 09:39
  • 5
    Точный, и для лектората экрана, поисковых служб, и т.д., которые читают HTML и не CSS – blonfu 25.11.2016, 09:43

Я поставил бы серьезно, если необходимо изменять текст. Я думаю, что оно - лучшее существо minimalista в изменениях. Поэтому каждый раз, когда был возможным eligiría один из 3 выборов для всех версий.

Если мы выбираем акроним, мы можем использовать этикетку соответствующий HTML, который кроме того дает нам возможность консультировать значение акронима:

<acronym title="Asociación Autónoma del Automovilismo">AAA</acronym>

И в случае, если было абсолютно необходимо показывать различные тексты он выбрал бы выбор использовать несколько DIV и спрятать тех, которые не querramos показывать. Он мне кажется лучше для КАФЕДРАЛЬНОГО СОБОРА, indexadores распознают тебе тексты, легкие для того, чтобы быть осуществленным и он мне не кажется неудобным. Он не был бы должен увеличивать много размер страницы.

1
ответ дан 24.11.2019, 12:23

Теги

Похожие вопросы