Масштабирование содержимого при изменении размера браузера

Question

Я работаю над сайтом и хотел бы масштабировать содержимое для масштабирования всякий раз, когда изменяется размер окна браузера. Вот пример того, что я пытаюсь сделать achieve. Идите вперед и измените размер браузера, чтобы увидеть, что мне нужно. Может ли кто-нибудь сказать мне, как автор этого добился? Или что называется эта техника? Я уже хорошо разбираюсь в CSS и знаю о жидких макетах, но техника, используемая на этом сайте, очень различна. Я не могу оборачивать голову тем, как ему удалось масштабировать многие части сайта, даже маленькая картинка на боку масштабируется. Может ли кто-нибудь сказать мне, как это достигается? Я действительно понимаю концепцию или название техники. Благодарю.

Answer 1

Он известен как Отзывчивый дизайн, и на эту тему есть pretty good book.

Проще говоря, он использует медиа-запросы для адаптации вашего контента для ряда разрешений.

/* targets screens matching the specific sizes */ 
@media screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) { 
    /* css rules here */ 
} 

@media screen 
    and (min-device-width: 481px) 
    and (max-device-width: 960px) { 
    ... 
} 

@media screen and (min-device-width: 961px) { 
    ... 
} 

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

Answer 2

Here's a link from "A List Apart". Они используют жидкостные сетки и медиа-запросы, чтобы убедиться, что размеры содержимого в окне. В статье есть код, чтобы вы могли видеть, что происходит.

Answer 3

Я думаю, что эта линия это делает, потому что я проверил его функции css и javascript, и там ничего нет. Попробуйте и посмотрите, работает ли это.

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width">