1

Как сделать, чтобы текст заменялся другим при изменении разрешения экрана посредством css?

3
  • По-видимому, вы ошиблись, у экрана есть «разрешение»
    – installero
    8 окт 2015 в 19:37
  • для этого используйте @media screen - пример jsfiddle.net/yy3t17uz
    – soledar10
    8 окт 2015 в 19:43
  • Да, верно, ошибся) спасибо! 8 окт 2015 в 19:46

3 ответа 3

2

Например, так:

html:

<div class="for-small-screens">Текст для маленьких экранов</div>
<div class="for-large-screens">Текст для больших экранов</div>

css:

@media(max-width:960px) {
  .for-large-screens {
    display:none;
  }
}

@media(min-width:961px) {
  .for-small-screens {
    display:none;
  }
}
2
  • 2
    И увидите прикол при ширине 960px ;)
    – Visman
    9 окт 2015 в 3:17
  • Угу, спасибо, поправил (min-width: 960pxmin-width: 961px)!
    – installero
    9 окт 2015 в 10:53
1

Например при помощи псевдоклассов, свойства content и @media screen. Выполнить код расположенный в ответе надо на всю страницу, что бы увидеть результат.

p {
  margin: 10px 0;
  text-align: center;
}
p:before {
  content: "large screen";
}
@media screen and (max-width: 800px) {
  p:before {
    content: "small screen";
  }
}
<p></p>

3
  • Можно ещё позабавиться и брать значения из data-атрибутов. Текст всегда проще писать в html)
    – Rolandius
    9 окт 2015 в 11:18
  • @Rolandius смотря для каких целей. Не могу согласится с вами полностью, например если текст относится к статичному оформлению сайта
    – korytoff
    9 окт 2015 в 12:01
  • Поэтому я и написал, что текст )
    – Rolandius
    9 окт 2015 в 12:05
1
@media screen and (max-width:350px) {
    .object {
        display: none;
    }
}
1
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 9 апр 2022 в 13:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.