Размер окна браузера 1000 пикселей на страницу добавили блок с шириной 50

Обновлено: 06.07.2024

Мы тут рассказывали про размеры текста в вёрстке. Но что, если задавать размеры не только текста, но вообще всего? В CSS это делается так же легко, как и в случае с текстом.

Как задаются размеры

У большинства элементов в CSS есть такие параметры для работы с размером:

height, width — высота и ширина;

max-height, max-width — высота и ширина, больше которых элемент не может быть (а меньше — может);

min-height, min-width — минимальная высота и ширина;

margin — размер поля вокруг элемента. Другие элементы не должны влезать в это поле;

padding — отступы внутри элемента, например, если внутри будет написан текст.

Например, нам нужно нарисовать кнопку, внутри которой будет текст. Описание стиля кнопки может быть таким:

.button width:75%;
max-width:600px;
min-width:300px;
padding: 15px 15px 19px 15px;
margin: 20px auto 50px auto;
>

Перевод: кнопка должна занимать от 300 до 600 пикселей в ширину, а в этом диапазоне быть 75% ширины от содержащего ее контейнера; внутри кнопки отступи сверху 15 пикселей, справа 15, снизу 19, слева 15 (по часовой стрелке). Саму кнопку от ближайшего элемента сверху отодвинь на 20 пикселей, слева и справа отодвинь одинаково, чтобы она встала по центру, а снизу отступи еще 50 пикселей до следующего элемента.

Запись в стиле padding: 15px 15px 19px 15px — это короткий способ задать отступы по часовой стрелке. Первое значение — отступ сверху, второе — справа, третье — снизу, четвёртое — слева. Вместо короткой записи можно ещё так:

Но так обычно не пишут, потому что много текста.

Размеры в пикселях — жёстко, но точно

Самый простой способ задать размер элемента — указать его в пикселях. Например, если нам нужна ширина элемента 100 пикселей, то можно написать:

В пикселях можно задавать размеры почти чему угодно, потому что пиксели есть везде:

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

С пикселями есть только одна проблема: так как размеры и плотность пикселей на разных экранах разные, то может получиться так:

на экране 5-дюймового телефона с разрешением 1920 на 1080 пикселей баннер шириной 200 пикселей получит размер в 5 сантиметров;
а на мониторе с диагональю 24 дюйма, но с тем же разрешением 1920 на 1080 те же 200 пикселей будут иметь длину 10 сантиметров.

Чтобы было нагляднее, сделаем тестовую страницу с тремя блоками одинаковой высоты, но с шириной 100 пикселей.

Справедливости ради, браузеры понимают эту проблему, поэтому умеют пересчитывать пиксели так, чтобы сайты не ломались. Например, если у вас есть современный экран с разрешением 288 точек на дюйм и тут же рядом старый экран с разрешением 72 точки на дюйм, то браузер поймёт, что надо пересчитать одни пиксели в другие. Если поставить два сайта рядом на этих экранах, они будут не один в один, но похожи.

В зависимости от размеров экрана — гибко, но надо перепроверять на разных экранах

Чтобы не зависеть от размера пикселей, а масштабировать элементы в зависимости от размера экрана, придумали другие единицы измерения:

vh — это 1% от высоты окна;
vw — это 1% от ширины окна.

Получается, программисту уже не надо думать, сколько пикселей надо сделать картинку, чтобы она занимала половину ширины экрана на разных экранах. Вместо этого достаточно указать так:

В этом случае браузер сделает так:

Посмотрит, что за единица измерения — vw, значит нужна ширина экрана.
Узнает, какой ширины в пикселях окно, в котором открывается эта страница.
Поделит её на 100, чтобы узнать размер одного vw в пикселях.
Умножит это значиние на 50, чтобы понять размер в пикселях нужного нам элемента.
Установит это значение в пикселях при вёрстке.
Если в процессе просмотра у браузера поменяется размер экрана — он сам всё пересчитает и отрисует заново.

Используем страницу из предыдущего раздела и немного переделаем её — установим такой размер блоков:

первый блок — 10vw
второй блок — 20vw
третий — 50vw

Если нам нужно, чтобы блоки по высоте занимали всю высоту экрана, то для этого достаточно указать в стилях div такой параметр:

Ещё есть vmin и vmax, которые работают так:

vmin находит минимальное значение из пары (vh, vw);
а vmax находит максимальное значение из пары (vh, vw).

Это нужно, например, для адаптивной вёрстки, когда вам требуется привязаться к короткой стороне экрана и в зависимости от её размеров построить всю остальную страницу.

Проценты — очень гибко, но всегда нужен родительский элемент

Кажется, что vh и vw — это и есть те самые проценты от ширины экрана и что можно обойтись без обычных процентов. Но на самом деле просто проценты в вёрстке тоже используются, но с одним важным моментом:

👉 Чтобы использовать проценты, нужен родительский элемент, от которого эти проценты будут считаться.

Родительский элемент — тот, внутри которого находятся другие наши элементы. Например, мы хотим сделать на странице блок шириной 500 пикселей:

У этого блока есть точный размер, который браузер может взять или посчитать. Теперь внутри этого блока мы легко можем расположить свои блоки в тех же процентах, что и в предыдущем примере:

первый блок — 10%;
второй блок — 20%;
третий — 50%.

Если мы явно не указали размер родительского элемента, то браузер постарается угадать его или посчитать самостоятельно. Но получится это не всегда.

Нужно ли в этом разбираться?

Вообще в современном мире взрослые фронтендеры верстают с помощью css-grid и готовых верстальных фреймворков: в них все размеры стандартизированы и прописаны под капотом, а верстальщики просто говорят «большое», «среднее», «сбоку», «на три четверти», «на всю ширину» и т. д. А уже как это интерпретировать и какие конкретно там размеры — этим занимается фреймворк.

1.34Александру требуется написать химическую формулу тетрасульфида димышьяка (As2S4). Каким образом это можно сделать?

1.35Какой вариант написан с ошибкой?

1. 36 Какой тег существует:

a) <code>

1. 37 Какого тега НЕ существует:

c) <adress>

1. 38 Размер окна браузера 1000 пикселей. На страницу добавили блок с шириной 40%. Затем в этот блок добавили таблицу с шириной 50%. Какова будет ширина таблица в пикселях?

A) 200 пикселей.

c) Недостаточно данных.

1.39Какое свойство используется для задания отступов у блока?

B) margin

1.40Как изменить цвет фона для всех элементов h1 на странице?

1.41Какой вариант задания цвета НЕ сработает?

1.42Константин написал такой код:

a) Но при попытке его выполнить у него возникла ошибка. С чем она связана?

b) После начала сессии необходимо её использовать, а в коде она никак не используется.

C) Нельзя выводить информацию до начала сессии.

d) В этом коде нет ошибок.

e) Функции session_start() не существует, правильная функция - start_session().

1.43Какого типа данных в PHP нет?

d) Указатель.

1.44Есть массив $arr. Как вывести все элементы массива $arr?

b) Это возможно сделать только через цикл.

c) print_r($arr);

1.45Что будет, если запустить такой скрипт:

if (null == 0) echo "true";

A) true

b) Ошибка, поскольку null нельзя сравнивать с 0.

d) Ошибка, поскольку null в PHP нет.

1.46Каков результат выполнения у данного скрипта:

echo "Переменная $x = 5";

a) Переменная x = 5

b) Переменная 5 = 5

c) Ошибка, поскольку строки с переменными должны быть всегда в одинарных кавычках.

d) Переменная $x = 5

1. 47 Леопольд попытался выполнить следующий запрос:

SELECT * FROM `my_table` WHERE 1=1

Что получится в результате?

a) Синтаксическая ошибка (из-за *).

b) Синтаксическая ошибка (из-за 1=1).

c) Выведутся все записи из таблицы "my_table".

d) Не выведется ни одной записи.

1.48Как удалить таблицу "my_table":

a) DELETE FROM "my_table"

c) DROP TABLE "my_table"

d) DELETE TABLE "my_table"

1.49Что делает команда CREATE?

a) Добавляет запись.

b) Такой команды не существует.

c) Может и создавать таблицу, и добавлять запись.

D) Создаёт таблицу.

1.50Что означает [a-z] при задании шаблона для LIKE?

a) Он означает наличие 1-го символа НЕ из диапазона от a до z.

b) Он означает любое количество символов НЕ из диапазона от a до z.

C) Он означает наличие 1-го символа в диапазоне от a до z.

d) Он означит любое количество символов в диапазоне от a до z.

1.51Выберите верное утверждение относительно индекса:

a) Индекс позволяет сэкономить место, занимаемое таблицей.

b) Индекс ускоряет абсолютно любые запросы с таблицей.

C) Индекс позволяет ускорить выборку с тем полем, для которого он сделан.

d) Индекс ускоряет добавление записей в таблицу

1.52Что сделает данный запрос:

INSERT INTO `users`

a) Вставит запись в таблицу с нулевыми значениями в каждом поле.

b) В MySQL 5.5 и ниже вставит запись со значениями по умолчанию, а в более старших версиях будет ошибка.

C) Такой запрос не сработает.

d) Вставит запись в таблицу со значениями по умолчанию.

1.53Выберите верное утверждение относительно следующего запроса:

SELECT `name` FROM `users`

a) Результат будет содержать 3 столбца

B) Результат будет содержать 1 столбец

c) Результат будет содержать 2 столбца

d) В запросе ошибка

1.54Для чего используется ключевое слово DISTINCT?

a) Такого ключевого слова не существует.

B) Для выборки только уникальных записей по конкретному полю.

c) Для снижения нагрузки на сервер с потерей производительности выполнения запроса.

d) Для ускорения выборки по конкретному полю.

1.55В некоторой таблице есть поле "field". Как правильно вывести все записи, где значение поля "field" содержит строку (либо подстроку) "string":

a) WHERE `field` LIKE "%string%"

b) WHERE `field` LIKE "string"

c) WHERE `field` = "string"

d) WHERE `field` == "string"

1.56Что делает конструкция:

b) Сортирует записи по возрастанию.

c) ASC вообще не существует.

d) Сортирует записи по убыванию.

e) ASC - это функция, которая здесь некорректно использована.

1.57Какой CSS-код написан правильно?

1.58Как правильно подключать файл стилей?

d) <link rel='stylesheet' type='text/css' href='styles/main.css' />

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

a) a:link, a:active

c) a:active, a:visited

d) a:link, a:visited

1.60В каком из представленных ниже вариантов содержится явная ошибка:

c) p text (font-size: 150%;>

1.61Василий обнаружил, что границы его страницы не примыкают к краям окна браузера. Он решил, что надо добавить свойство margin: 0; Но вот куда?

D) body

1.61Как правильно вставляются комментарии в CSS-код?

a) // Мой комментарий

b) /* Мой комментарий */

1.62Александр задал шрифт следующим образом: font-family: Arial, Times New Roman, Helvetica, sans-serif;. Что он сделал не так?

Если в CSS размеры блока не заданы, то они формируются следующим образом:

Ширина определяется шириной окна страницы или шириной внешнего блока. Блок занимает всю ширину окна страницы или внешнего блока за исключением отступов.
Высота блока устанавливается такой, чтобы в блок поместилось всё содержимое.

Для примера создадим блок без указания размеров и посмотрим, как он выглядит. Чтобы видеть размеры блока, зададим рамку с помощью свойства border .

Попробуйте менять ширину окна браузера, Вы увидите, что ширина блока тоже меняется.

Установка размеров блока в CSS

Для установления размеров блока есть свойство width , которое устанавливает ширину блока, и свойство height , которое устанавливает высоту блока. Значениями этих свойств являются размеры блока в любых единицах, существующих в CSS, например в пикселях. При указании значения, единицы обязательно нужно указывать.

Для примера добавим на страницу ещё один блок с шириной 500 пикселей и высотой 200 пикселей.

Размеры можно указывать в процентах от внешнего блока. Если внешнего блока нет, то размер будет в процентах от размера окна страницы. Попробуем оба варианта. В созданный нами блок с размерами поместим ещё один блок и укажем ему ширину 70%. Также создадим отельный блок и тоже укажем ширину 70%

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

У размеров есть значение:

При этом значении размеры блока определяются также, как если они не заданы. Это значение используется, если размер ранее был задан, а теперь его нужно вернуть к начальному.

Также у размеров есть значение:

При этих свойствах блок получает значения размеов от родительского элемента.

Браузеры, особенно старые, по-разному определяют CSS размеры блока. Поэтому при установлении размеров нужно тщательно проверять отображение страницы.

Минимальные и максимальные размеры блока

Если в CSS размер блока не задан точно и может меняться, то можно установить минимальный и максимальный размер. Для этого есть свойства min-width , max-width , min-height , max-height .

Для примера создадим ещё один блок размером также 70%. Установим ему минимальную ширину 600 пикселей. Когда Вы будете уменьшать окно браузера, этот блок уменьшится только до 600 пикселей, а далее будет неизменным.

Содержимое за пределами блока

Если блоку заданы размеры, то часть содержимого может не поместиться в блок и оказаться за его пределами. Свойство overflow определяет, как отображается эта часть содержимого. Значения:

overflow: visible - отображается и не учитывает границы (по умолчанию)

overflow: hidden - не отображается

overflow: scroll - содержимое не выходит за границы, а у блока есть полосы прокрутки

overflow: auto - пока содержимое полностью помещается в блок, полос прокрутки нет. А когда содержимое перестаёт помещаться, они появляются

overflow: inherit - значение принимается от родительского элемента

Для примера создадим блок с контентом, выходящим за его пределы. Свойство overflow пока не устанавливаем.

Текст этого блока выходит за границы и накладывается на другие элементы страницы. Установим свойство overflow :

Теперь содержимое за границами блока не отображается. Для текста это не подходит, ведь пользователь не сможет его прочитать. Попробуйте установить другие значения. Со значением scroll блок имеет обе полосы прокрутки. А со значением auto горизонтальной прокрутки нет, ведь содержимое помещается в блок по ширине.

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

В этой статье я попытаюсь рассказать, как сделать простой шаблон адаптивным. И, конечно же, я попытаюсь объяснить, что такое адаптивный дизайн.

Что такое адаптивный дизайн?

Я уверен, что вы часто «серфите» по сайтам с мобильных устройств и не раз замечали, что есть сайты, где надо масштабировать страницу, чтобы прочитать текст. А бывает, что еще хуже — текст может не поместится на всю страницу и вам придется крутить страницу и по горизонтали, и по вертикали.

Зайдя на сайт с адаптивным шаблоном все меняется, ибо текст «подстраивается» под ваш телефон (разрешение экрана).

Теория (основы)

Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).

max-width и width

Тоже очень важная часть в дизайне. Например, ширина нашего сайта 1000 пикселей, но при изменение окна (по ширине, меньше 1000 пикселей), появится горизонтальная прокрутка. Но все поменяется, если мы укажем width: 100%, ибо сайт будет «подстраиваться» под наш экран.

С большими мониторами не так все просто, поскольку текст растянется на весь экран. А получается, если монитор широкоформатный, то текст будет нечитабельным.

Если вам нужно, чтобы сайт остался с такой же шириной, но при этом остался «адаптивным» — надо изменить CSS-код, как указано ниже.

min-width и width

Если чуть выше мы ставили максимальную ширину, то здесь мы устанавливаем минимальную ширину. К примеру, если установить минимальную ширину 200 пикселей, то окно браузера достигает этой ширины и оно больше не будет уменьшаться (появится горизонтальная прокрутка).

Практика

Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).

Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.

Использование media screen

Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.

Таким образом выглядит тег media screen в CSS

Как можно увидеть, мы используем максимальную ширину — 1024px. Данное свойство будет предаваться только тогда, когда ширина окна будет меньше 1024 пикселей.

1024 пикселя

Допустим, что наша цель — чуть-чуть сузить шаблон при этом разрешении, но основной контент и сайтбар должны оставаться на месте.

Вот, что необходимо прописать в CSS

768px

Теперь мы пишем настройки для окон, ширина которых 768 пикселей и меньше. Сейчас мы будем распологать сайтбар под основным контентом.

Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.

Для того, чтобы картинки также сужались нужно использовать этот код

Адаптивная верстка — это неотъемлемая часть современной web-разработки. В этом случае дизайн страницы делается так, чтобы подстраиваться под любой экран. 10 лет назад, когда mobile-friendly еще не был придуман, верстальщикам приходилось делать сразу несколько web-страниц, чтобы сайт правильно отображался на десктопе, телефонах и планшетах. К счастью, все это давно в прошлом.

Разновидности верстки

Макеты бывают разными по типу отображения.

Фиксированный или статический. Дизайн страницы создается под один размер. Все четко, конкретно и просто, но есть недостаток — сайт нормально откроется не на всех экранах, а только на мониторах с заранее известным скрином. К примеру, на смартфоне веб-страница не влезет в браузерное окно.

Резиновый. Более сложный вариант для реализации, чем фиксированная верстка. Основные блоки макета сжимаются, пока не встанут под разрешение конкретного девайса. Если экран чересчур маленький, то блоки располагаются друг под другом — в виде ленты.

Адаптивный. Самый передовой макет — страница подстраивается под каждого пользователя, независимо от используемого им устройства. Реализуется несколькими способами — смещением, перестройкой блоков, изменением дизайна элементов страницы и т. д.

Все типы версток, включая адаптивную, делаются с помощью таблиц или блоков.

Табличная верстка устарела, хотя элемент table поддерживается HTML5. Поэтому некоторые программисты продолжают использовать табличные данные.
Блочная верстка представляет собой каркас, на который через CSS накладывается тот или иной шаблон. Особое значение здесь имеют теги: <div>, <header>, <footer>, <nav> и др.

Как сделать адаптивную верстку сайта

Чтобы сделать адаптивную верстку, надо знать все применяемые типы. Это позволит сочетать их, если в этом появится необходимость. К примеру, совместить резиновый и адаптивный дизайн или таблицы с блоками.

Делается современная адаптивная верстка комбинированием двух технологий.

HTML5. Нужна для разметки элементов на сайте.
CSS3. Каскадные стили, предназначенные для декоративного оформления веб-страниц. При помощи CSS также задаются единицы измерения главных блоков сайта — хедера, боди, футера.

Адаптивная верстка CSS

Специалисты называют такую адаптивную верстку самой правильной с технической точки зрения. К тому же, через CSS сделать это проще. Вот, например, как создать шапку или любой другой элемент. В этом случае находим хорошее изображение и задаем ему свойство растягиваться по всему экрану. По правилам HTML5 — просто упаковываем картинку в div.

Далее задаем width img — чтобы картинка меняла свой размер при уменьшении или увеличении контейнера. Получается готовый блок, занимающий весь экран любого монитора по ширине.

Однако на этом верстка не заканчивается, ведь нужно задать предельную ширину для max/min разрешения. В противном случае при изменении типа экрана, изображение потеряет качество.

Добавляем в код автоматическое свойство margin для внешнего отступа на всех 4-х сторонах элемента. Задаем width в 1000px, максимальную ширину элемента max-width в 90% и минимальную ширину в 50px.

Тем самым грани контейнера вместе с изображением будут меняться только в пределах 500-1000px.

Усложняем задачу — сделаем мини-галерею. Принципы верстки остаются те же. Делаем такой же контейнер, упакованный в <div >

В CSS прописываем то же, что и в первом случае.

Таким образом, каждое изображение будет работать по правилам контейнера, и изменять свой размер в зависимости от экрана пользователя. Для улучшения качества между картинками ставится отступ в 1%.

Остается немного доработать верстку. В частности, на экранах смартфонов изображения в галерее могут отображаться слишком мелко.

Верстаем адаптивный сайт

Используя такой подход, удастся сверстать сайт целиком. По сути, web-страница состоит из 3-х основных элементов — хедера, центрального блока с сайдбарами и подвала. Условно можно задать контрольные точки breakpoints для:

скрывания шапки;
помещения сайдбара под контейнер;
оптимизации элементов верхней части страницы.

Должна получиться такая вот страничка.

Теперь нужно доработать раздел <head> — добавить обязательные файлы (библиотеку джава, ссылки на применяемые шрифты). Чтобы не прописывать префиксы Chrome, Safari и т. д, добавляем плагин PrefixFree.

Также нужно разместить в <header> необходимые элементы — лого, верхнее меню, поиск.

Блок с оглавлением статьи обертываем в <article>.

Для боковой колонки прописываем <aside> — размещаем рубрики и другие необходимые элементы. В футер можно поместить значок копирайта, социальные кнопки и контактные данные.

Отдельная работа должна проводиться по медиа-запросам. Они помогут улучшить отображение сайта на экранах с минимальным разрешением. Другими словами, это правила адаптации для каждой возможной ширины экрана. А их бывает, как известно, несколько — вот эти самые важные. Рекомендуется все их прописать через @media screen и внести правила элементов для каждого разрешения.

Также особое внимание в адаптивной верстке уделяется размеру шрифта и строк. Многочисленные исследования последних лет доказали, что большинство современных читателей не фокусируются на конкретном предложении или слове, а просматривают информацию на web-странице саккадами или вкруговую. Поэтому используем короткие строки, которые лучше воспринимаются посетителями. В интернете хорошо заходят строки, размером 40-50 символов.

Что касается размера шрифта, то здесь будет немного сложнее. Из-за того что контент в такой верстке применяется для всех экранов, символы могут отображаться слишком маленькими или большими, в зависимости от скрина устройства. Частично данная задача решается применением стандартных, а не пользовательских шрифтов. Правда, дизайн не будет смотреться изысканно, но и посетителям не придется ждать загрузки файла со шрифтами.

Что менять в HTML и CSS коде?

Первым делом нужно вставить между тегами <head></head> следующий код.

А также прописать в CSS файле строку с правилом (медиа-запросом) для мобильных экранов (1440-1599px).

Вообще, в адаптивной верстке все завязано на единицах измерения. К примеру, ширина вашего сайта составляет 1000 пикселей. Если его откроют со смартфона, то появится горизонтальная прокрутка, так как по ширине страница не влезет. Указывая в коде width 100%, мы подстраиваем сайт под маленький экран. А чтобы текст не растянулся на широкоформатном мониторе (более 1000px) и оставался адаптивным, прописываем в CSS-код еще и максимальное значение.

Предельное значение можно установить и для мобильных экранов. Например, чтобы текст не сжимался, прописываем минимальную ширину — допустим, когда окно браузера достигнет 200px, оно не будет больше уменьшаться, и появится горизонтальная прокрутка.

Bootstrap

Если вы не очень дружите с кодом, и сверстать сайт в одиночку не сможете, то есть уникальное решение — использовать трехъязычный фреймворк Bootstrap. Здесь изначально прописаны все стили для адаптации различных элементов сайта — кнопок, таблиц и блоков. Ваша задача лишь правильно присвоить классы к элементам. Официальную и последнюю версию можно скачать отсюда.

Что включает Бутстрап:

адаптивную сеточную систему;
переменные и миксины Sass;
готовые компоненты;
собственную библиотеку иконок SVG;
мощные плагины JS;
премиальные темы и многое другое.

Bootstrap подходит для нескольких CMS — WP, Joomla и Opencart.

Проверка адаптивности сайта

На завершающем этапе, когда прописаны все media запросы, подключен bootstrap и задействованы нужные классы, остается проверить корректность работы сайта на всех популярных экранах. Сегодня это можно осуществить на различных сервисах. Например, в Screenfly.

Сервис очень точный, а самое главное — целиком бесплатный.

Заключение

Адаптивная верстка позволяет сэкономить и не делать несколько дизайнов под каждый скрин — достаточно прописать правила для отдельных частей блоков. Сайты с таким дизайном получают одобрение и со стороны поисковиков. Например, Гугл официально заявил, что отдает предпочтение ресурсам, адаптированным под mobile-first.

Краткое резюме по статье

Какие самые необходимые скрины экрана при адаптивной верстке?

Это наиболее популярные устройства, с которых заходят пользователи. Смартфон (320-480px), планшет (600-1024 px), ноутбуки и компьютеры (1280 px и более).

Выше был приведен обзор сервиса Screenfly. Есть и другие инструменты — Google Mobile Friendly, Iloveadaptive, Adaptivator.

Чем поможет адаптивная верстка сайта конкретно бизнесу?

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

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

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

Adaptive web design или отдельная мобильная версия?

Хотя мобильная версия и создается специально для мини-экранов и максимально оптимизирована под эти параметры, она уступает адаптивной верстке по нескольким пунктам. Во-первых, усложняется администрирование — чтобы поменять цены или добавить какую-то кнопку, надо вносить изменения и там и здесь. Во-вторых, не решается вопрос отображения на экранах с более широким разрешением.

Читайте также: