Согласованный.
Кроме того, если точки останова уже определили ширину, зачем снова определять ее с помощью JavaScript, верно?
Не уверен, поможет ли следующее, но у меня давно возникла мысль о сценарии.
Я назвал его «скриптом на основе CSS», и он выглядит следующим образом: страница имеет массив текстов, и страница должна отображать один из ТЕКСТА вместе с его ДЛИНОЙ в зависимости от ширины экрана.
Первую задачу можно решить с помощью медиа-запросов CSS, но не вторую (с учетом длины текста).
Тогда мне не удалось решить проблему, но теперь вот что я придумал:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1,0">
<title>a css based script test</title>
<style>
/* define breakpoints */
@media screen and (max-width: 599px){
div:before{
content: 'narrow';
}
}
@media screen and (min-width: 600px) and (max-width: 799px){
div:before{
content: 'medium';
}
}
@media screen and (min-width: 800px){
div:before{
content: 'wide';
}
}
/* hide breakpoints */
div:before{
display: none;
}
</style>
<script>
//based on settimeout() example in: [URL='https://lumtu.com/yti/eQaaQemVodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZy9lbi1VUy9kb2NzL1dlYi9FdmVudHMvcmVzmcv']https://developer.mozilla.org/en-US/docs/Web/Events/resize[/URL]
window.addEventListener('resize', resizeThrottler, false);
var resizeTimeout;
function resizeThrottler() {
if ( !resizeTimeout ) { // ignore resize events as long as an actualResizeHandler execution is in the queue
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
}, 66); // The actualResizeHandler will execute at a rate of 15fps
}
}
function actualResizeHandler() { // handle the resize event
var txtEl = document.getElementById('txt'),
//ref: [URL='https://lumtu.com/yti/b5RR5bGVodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZy9lbi1VUy9kb2NzL1dlYi9BUEkvV2luZG93L2dldENvbXB1dGVkU3kVG']https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle[/URL]
currWidth = getComputedStyle(txtEl, ':before').content.slice(1,-1);
if (currWidth != prevWidth){
switch(currWidth){
case 'narrow':
txtEl.childNodes[0].nodeValue = txtArr[0];
break;
case 'medium':
txtEl.childNodes[0].nodeValue = txtArr[1];
break;
case 'wide':
txtEl.childNodes[0].nodeValue = txtArr[2];
break;
}
document.getElementById('len').value = txtEl.childNodes[0].nodeValue.length;
prevWidth = currWidth;
}
}
var prevWidth,
txtArr = [
'for narrow screens < 600px. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur quis est risus.
Nunc porta nibh libero, nec lacinia dui volutpat eget.
Nunc ut est id neque semper facilisis.
Etiam sed blandit felis.
Donec tempor metus metus, non facilisis urna faucibus ac.',
'for medium screens, 600px to 800px. Aliquam non ante nisi.
Nam vitae felis eu enim elementum porttitor nec eu nulla.
Donec ut lorem faucibus mauris tristique faucibus et at augue.
Vestibulum egestas ante ut odio mattis elementum.
Pellentesque egestas posuere velit, id pulvinar ligula pretium sed.',
'for wide screens > 800px. Nam accumsan metus in ligula dignissim condimentum.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Mauris at iaculis lectus.
Etiam scelerisque faucibus lorem tristique vulputate.
Maecenas aliquam sapien non purus tincidunt congue.'
];
</script>
</head>
<body>
<div id="txt">Try resize my screen!</div>
<label>
<span>Length of text:</span>
<input id="len" readonly>
</label>
</body>
</html>
HTML: PS: Возможно, вы захотите сначала игнорировать обработку изменения размера MDN.
![[леонид Каюм] Осознанность](/assets/images/icons/forum3.png){kind=icon}
![Заработок на собственном сервисе по e-mail рассылкам [Закрытая]](/assets/images/icons/forum4.png){kind=icon}
