Данное поведение достигается за счет заданной минимальной ширины, с помощью свойства min-width
. В случае с Яндекс это min-width: 936px;
. Вот пример их CSS:
.rows {
min-width: 936px;
}
Ниже приведен полный пример требуемой вами верстки:
.container {
min-width: 1200px;
}
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dolorum nihil explicabo, dolores iure, consequuntur voluptatem autem nesciunt aliquam officia, suscipit ullam repellendus sit. Reiciendis architecto, eveniet a quisquam nemo doloremque
ullam nam consectetur eligendi repellendus. Numquam illum, minus perferendis nostrum hic ducimus expedita accusamus iste molestiae neque quo distinctio quam eligendi ex eos consequatur nihil sapiente incidunt quis nulla ab beatae atque provident
est vel.</p>
<p>Iusto officiis iure provident dignissimos eligendi dolorem, vitae aliquid tempore eum itaque, vero deleniti qui. Delectus sequi voluptas provident magnam, hic minima maxime ab ducimus perferendis, aspernatur quis sunt minus veniam dolorum, id, tenetur
officia. Quos sint dicta minima, possimus quia illum ex maiores eligendi aut doloremque suscipit non earum omnis fugiat eius eum veniam sed nesciunt ratione nulla temporibus, voluptatem, optio debitis.</p>
<p>Unde, odit at illo rem aliquam est libero, magni hic ipsa aut, nihil dicta, facere! Numquam officia, iusto laboriosam qui minima aliquam, necessitatibus quod, excepturi nulla accusamus optio. Quae architecto cupiditate quos animi officiis dicta sequi
minus aliquam, dolorem dolore officia libero ut deserunt vitae dolor similique consequatur perspiciatis natus, commodi incidunt odit adipisci ad eveniet accusamus! Veritatis in nihil iusto numquam sunt ullam deserunt facere temporibus ex odio, sapiente
iure.</p>
</div>
</body>
</html>
Вот такой meta
тег запретит мобильным устройствам масштабировать страницу:
<meta name="viewport" content="width=device-width, initial-scale=1">
А вот эти стили не дадут содержимому страницы сжаться меньше, чем до 1200px по ширине.
.container {
min-width: 1200px;
}
px
элементам сайта. Или вы об этом : значениеfixed
свойстваposition
задаёт элементу фиксированное позиционирование.overflow: hidden;