<section id="description">
<p>Медиа-запросы - это новый метод, введенный в CSS3, который изменяет представление контента на основе разных размеров видовых экранов. Окно просмотра - видимая область пользователя на веб-странице и отличается в зависимости от устройства, используемого для доступа к сайту. Медиа-запросы состоят из типа носителя, и если этот тип носителя соответствует типу устройства, на котором отображается документ, применяются стили. Вы можете иметь столько селекторов и стилей внутри вашего медиа-запроса, сколько хотите. Ниже приведен пример медиа-запроса, который возвращает содержимое, когда ширина устройства меньше или равна 100px: <code>@media (max-width: 100px) { /* CSS Rules */ }</code> и следующий медиа-запрос возвращает содержимое, когда Высота устройства больше или равна 350px: <code>@media (min-height: 350px) { /* CSS Rules */ }</code> Помните, что CSS внутри медиа-запроса применяется только в том случае, если тип материала соответствует типу используемого устройства.</p></section>

Create a Media Query

<section id="description">
<p>Создание изображений с учетом CSS очень просто. Вместо применения абсолютной ширины к элементу: <code>img { width: 720px; }</code> Вы можете использовать: <blockquote> img { <br> max-width: 100%; <br> display: block; <br> высота: авто; <br> } </blockquote> Свойство <code>max-width</code> 100% масштабирует изображение в соответствии с шириной его контейнера, но изображение не будет растягиваться шире его первоначальной ширины. Установка свойства <code>display</code> для блокировки изменяет изображение с встроенного элемента (по умолчанию) на элемент блока в его собственной строке. Свойство <code>height</code> автоматически сохраняет исходное соотношение сторон изображения.</p></section>

Make an Image Responsive

<section id="description">
<p>Самый простой способ сделать ваши изображения «сетчаткой» (и оптимизировать их для дисплеев retina) - это определить их значения <code>width</code> и <code>height</code> как только половину исходного файла. Вот пример изображения, использующего только половину исходной высоты и ширины: <pre class="language-js"><code>&#x3C;style>
  img {
    height: 250px; 
    width: 250px; 
  } 
&#x3C;/style>
&#x3C;img src="coolPic500x500.jpg" alt = "Самая прекрасная картина" /> </code></pre></p>
</section>

Use a Retina Image for Higher Resolution Displays

<section id="description">
<p>Вместо использования текста <code>em</code> или <code>px</code> для размера вы можете использовать единицы просмотра для гибкой типографии. Единицы просмотра, такие как проценты, являются относительными единицами, но они основаны на разных позициях. Единицы Viewport относятся к размеру видового экрана (ширина или высота) устройства, а проценты относятся к размеру элемента родительского контейнера. Четыре различных видовых экрана: <ul><li> <code>vw: 10vw</code> будет составлять 10% от ширины <code>vw: 10vw</code> просмотра. </li><li> <code>vh: 3vh</code> будет 3% высоты просмотра. </li><li> <code>vmin: 70vmin</code> будет на 70% меньше размера <code>vmin: 70vmin</code> просмотра (высота и ширина). </li><li> <code>vmax: 100vmax</code> будет на 100% больше размера <code>vmax: 100vmax</code> просмотра (высота и ширина). </li></ul></p>
</section>