Angel700
@Angel700
новичок в программирований!

Как сделать чтобы при разных разрешениях менялся текст?

Нужно чтобы менялся текст на разных разрешениях.

Например:

"Feature Phone" (<240px)
"Smartphone" (241-575px)
"Tablet" (576-991px)
"Netbook/Laptop" (922-1200px)
"Large Laptop/PC" (1200-2560px)
"4K TV" (>2560px)


Код:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tinyone</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style type="text/css">
        @media (max-width: 240px) {
            .alert--test {
                background-color: #0004ff;
            }
        }
        
    	@media (min-width: 241px) and (max-width: 575px) {
            .alert--test {
                background-color: var(--primary);
            }
        }

		@media (min-width: 576px) and (max-width: 991px) {
    		.alert--test {
        		background-color: var(--success);
    		}
		}

		@media (min-width: 992px) and (max-width: 1999px) {
    		.alert--test {
        		background-color: var(--warning);
   			}
		}

		@media (min-width: 1200px) {
    		.alert--test {
        		background-color: var(--danger);
    		}
		}
		
		@media (min-width: 2560px) {
    		.alert--test {
        		background-color: maroon;
    		}
		}
    </style>
	<div class="container">
    	<div class="alert--test" role="alert">
    		Screen resolution checker
    	</div>
    	<h1>browser requirements</h1>
    	<p>firefox 31+</p>
        <p>chrome 49+</p>
        <p>opera 36+</p>
        <p>ios 9+</p>
    </div>
</body>


Сайт: https://infinitynetsystem.000webhostapp.com/

Как это сделать?
  • Вопрос задан
  • 111 просмотров
Решения вопроса 3
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
display:none на разрешениях, где текст не нужен.

Сам текст в контенте указать весь и прятать ненужный. Либо запихнуть его в after\before, если он захардкожен. Ну как варик.
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Создаёте локальную переменную. В неё вставляете текст который будет по умолчанию. Затем вставляете переменную в качестве внутреннего контента для псевдоэлемента. При разных разрешениях просто обновляете переменную разным текстом и всё.

.chameleon-text {
position: relative;
display: flex;
justify-content: center;
align-items: center; 
--before-text-content: "Large Laptop/PC"; /* это локальная переменная CSS объявленная внутри селектора .chameleon-text  */
}

.chameleon-text:before {
content: var(--before-text-content); /* добавляем переменную сюда в качестве содержимого свойство content: "";  */    
position: absolute;
font-size: 20px;
text-transform: uppercase;
color: #252525;
}


@media (max-width: 1200px) {
.chameleon-text {
--before-text-content: "Netbook/Laptop";   /* обновляем содержимое переменной */
}
}

@media (max-width: 1000px) {
.chameleon-text {
--before-text-content: "Tablet";   /* обновляем содержимое переменной */
}
}

@media (max-width: 800px) {
.chameleon-text {
--before-text-content: "Smartphone";  /* обновляем содержимое переменной */
}
}

@media (max-width: 500px) {
.chameleon-text {
--before-text-content: "Feature Phone";  /* обновляем содержимое переменной */
}
}


Ответ написан
develx
@develx
Web developer
.alert--test {
    position: relative;
}
.alert--test::before {
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 240px) {
  .alert--test::before {
    content: '<=240px';
  }
}
@media (min-width: 241px) and (max-width: 575px) {
  .alert--test::before {
    content: '[241px-575px]';
  }
}
@media (min-width: 1200px) {
  .alert--test::before {
    content: '>=1200px';
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы