Меню

Таблица стилей для телефона



Адаптивная таблица для мобильных устройств на CSS

Ранее мы рассматривали, как адаптировать простую HTML-таблицу под мобильные устройства. На этот мы раз затронем схожую тему, но возьмем таблицу посложнее, с заголовками.

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

Нарисуем таблицу графика работы службы доставки со сменными курьерами и ценами, добавив атрибут aria-label (текстовую метку) к ячейкам с данными.

Время доставки Курьер Оплата картой Стоимость доставки
8:00-12:00 Николай Нет 20 руб.
12:00-18:00 Вадим Да 50 руб.
18:00-23:00 Алексей Да 120 руб.
1:00-6:00 Евгений Нет 90 руб.

Внешний вид таблицы на ПК с фиксированным разрешением 1140 пикс. будет выглядеть примерно так.

HTML-таблица для службы доставки

При уменьшении разрешения дисплея до 334 пикс. ячейки сожмутся на сколько это возможно и оставят часть информации скрытой.

Режим адаптивного дизайна, таблица

С помощью CSS мы сможем добиться нужно эффекта – разделение таблицы на понятные посетителю блоки при разрешении экрана меньше 800 пикс. Просто добавим к уже созданным стилям следующий код:

На скриншоте ниже вы можете наглядно оценить превосходство данного метода.

Адаптивная HTML-таблица для мобильных устройств

Спасибо за внимание! Не забывайте ставить оценку в рейтинге статьи!

Источник

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

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

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

Решение возникшей проблемы – адаптивная верстка, при которой CSS-стили меняются динамически для разной ширины окна браузера.

Пример

Пример адаптивной верстки — сайт domportretov.ru, где страницы адаптируется под несколько интервалов ширины окна браузера, сохраняя максимальный комфорт для посетителя:

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

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

  1. просто менять размер экрана браузера,
  2. расположить справа панель инспектора компонентов и менять ее ширину,
  3. использовать адаптивный дизайн браузера, нажав Ctrl+Shift+M в Firefox или Google Chrome.
Что используют для оптимизации сайта под мобильные устройства?

Метатег viewport

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

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

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

Пример

Основные свойства метатега

Контент шире экрана – часто возникающая проблема, как только задан viewport.

Это происходит, если каким-то элементам задана большая фиксированная ширина.

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

Пример

Медиа-запросы. CSS-стандарт Media Queries

Возможность применять различное оформление в зависимости от ширины окна дает CSS-стандарт Media Queries.

Медиа-запрос начинается с правила @media, после которого следует условие применения стилей, состоящее из типа носителя (в приведенном примере all), логического оператора (and) и медиа-функции (max-width: 360px).

Типы носителей

Устаревшие, хотя и корректные типы, которые не дают результата

Логические операторы

Основные медиа-функции

Пример

Задан размер заголовка:

На большом экране компьютера такой заголовок смотрится нормально, но для вертикального экрана смартфона он слишком крупный. Для экранов, ширина которых меньше или равна 360px, можно уменьшить размер шрифта с помощью медиа-запроса:

Новые единицы размеров (vw, vh, rem)

Благодаря этим единицам теперь в CSS стало легко указать относительную высоту элемента.

Пример

Размер шрифта при адаптивной верстке удобно задавать в rem (root em). Эта единица измерения вычисляется на основе размера шрифта корневого элемента . По умолчанию 1rem = 16px. Для простоты вычислений размер шрифта корневого элемента можно задать равным 10px.

Пример

Flexbox

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

Спецификация Flexbox позволяет контролировать размер, порядок и выравнивание элементов по горизонтали и вертикали, распределение свободного места между ними. Блоки при этом могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.

Flexbox определяет CSS свойства для flex-контейнера и его дочерних элементов (в приведенном примере соответственно ul.flex и li.flex).

Пример

В результате: элементы списка растягиваются на всю доступную ширину (с ограничением в 300px):

Flexbox

На узком экране список станет вертикальным:

Flexbox

Используя Flexbox, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.

Адаптивная верстка таблиц

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

Источник

Оптимизация таблиц для просмотра на мобильных устройствах

Совсем недавно, а если быть точным – 2 февраля, подписчики блога Яндекса, получили письмо “Как быть мобильным”. В данном письме указано только два условия, по которым Яндекс считает страницы пригодными для мобильных устройств:

  • не должно быть горизонтальной прокрутки;
  • не должно быть элементов, которые не работают в популярных мобильных платформах.

Оптимизированные страницы для мобильных устройств по мнению Яндекса

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

table

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

Для реализации такого вида адаптивности таблиц необходимо добавить следующий код в таблицу стилей:

Источник

Типы устройств

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

В следующей таблице указаны ключевые слова обозначающие в CSS разные типы устройств и их описание.

Типы устройств и их обозначения

all Таблица стилей используется для всех устройств.
aural Для речевых синтезаторов.
braille Устройства для слепых людей.
embossed Страничные принтеры для слепых людей.
handheld Для устройств с небольшими экранами (мобильные телефоны, карманные компьютеры и т.д.).
print Используется при выводе документа на печать.
projection Для проектора.
screen Экран компьютерного монитора.
tty Устройства, использующие символьную сетку экрана фиксированного шага, например телетайп.
tv Для экранов подобно телевизионным (низкое разрешение, ограниченная цветопередача, отсутствует прокрутка и т.д.).

Отдельные таблицы стилей могут быть удобны по многим причинам. Ну, например, зачем при выводе на принтер печатать меню сайта или какие-то рекламные блоки, их можно просто убрать. Также можно изменить шрифт, так как давно известно, что из-за особенностей зрения человека, текст написанный шрифтами без засечек (Arial, Verdana и т.д.) гораздо удобней читать с монитора компьютера, а вот с засечками (Times, Times New Roman и т.д.) наоборот, с бумаги.

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

Выбор устройств с помощью правила @import

Как вы знаете, правило @import позволяет встраивать файлы с CSS во внутренние или внешние таблицы стилей. При этом можно указать одно или несколько (через запятую) устройств к которым они будут применены, если же этого не сделать — стили применятся ко всем устройствам.

Пример выбора устройств в CSS через правило @import

Пример подключения во внешних таблицах стилей

В этих примерах стили в файле all.css будут использоваться в любом случае, но если сайт будет просматриваться на мониторе или телефоне, то к ним добавятся стили из scr_hand.css, а при выводе на печать — из print.css.

Выбор устройств с помощью правила @media

В отличие от предыдущего способа, правило @media подключает не файлы со стилями, а непосредственно сами стили, которые берутся в скобки, < >. Оно также может указываться во внутренних или внешних таблицах стилей.

Пример выбора устройств в CSS с помощью правила @media

Результат в обычном браузере

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

Результат при выводе на принтер (имитация)

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

Выбор устройств с помощью тегов

В этом примере первый стиль предназначен для мониторов, а второй — для принтеров.

Источник

Читайте также:  Таблица социального статуса детей
Adblock
detector