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

Question

Вероятно, глупый вопрос. Я понимаю, что указанная в заголовке проблема легко исправляется средствами JS. Просто отменяем обычный зум, и делаем собственное (кастомное) изменение масштаба для нужных элементов на странице. Наверняка, уже и куча фреймворков реализуют этот функционал. Но мне интересно, можно ли добиться такого через CSS без подключения лишних скриптов?

body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
img { display: block; 
      width: 100vw; height: 100vh; 
      object-fit: cover; }
#cross{ position: fixed; 
        width: 3cm; height: 3cm; 
        left: calc(50vw - 1.5cm); top: calc(50vh - 1.5cm); }

<!-- фиксированный крест -->
<svg id="cross" xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 460 460" style="enable-background:new 0 0 460 460;" xml:space="preserve">
    <polygon style="fill:#0B389C;" points="306.5,153.5 306.5,0 230,0 230,460 306.5,460 306.5,306.5 460,306.5 460,153.5  "/>
    <polygon style="fill:#4370D9;" points="153.5,0 153.5,153.5 0,153.5 0,306.5 153.5,306.5 153.5,460 230,460 230,0  "/>
</svg>
<!-- На фоне для примера большая катинка, которую можно увеличить -->
<img src="https://images.unsplash.com/photo-1636652576067-56f9541f6c57?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=5466&q=80"/>

Answer 1

@AlexeyVladimirov Может быть есть какие-то специфичные единицы измерения размеров, независимых от масштаба?

разумеется есть. проценты.

50% - это половина дисплея при любом масштабе.

еще близкие по смыслу vh vw vmin vmax

#x {
  height: 6vmin;
  width: 55vmin;
  font-size: 6vmin;
  border: 3px solid violet;
}

#y {
  height: 3%;
  width: 15%;
  font-size: 100%; /*но тут проценты немного не те... потому и результат иной*/
  border: 3px solid orange;
}

#z {
  border: 3px solid green;
}

div {
  display: inline-block;
}

<div id='x'>статичный на мин"ах</div><br>
<div id='y'>статичный на процентах</div><br>
<div id='z'>обычный блок</div>

но стоит учесть, что заданные вами габариты блоков\шрифтов могут быть для посетителя неудобными, или даже нечитаемыми. а потому, всё равно придется своё масштабирование изобретать... только теперь еще и воюя с собственноручно заданными процентами\vmin"ами.

шило на мыло, кмк.

БЛОГ НА HUSL

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

Ответы (1 шт):