Содержание

Как изменить CSS на мобильной версии сайта – info-effect.ru

CSS

Автор Илья Журавлёв На чтение 1 мин. Опубликовано

 Привет! Сегодня вы узнаете как можно изменить CSS стили на мобильной версии сайта. Вы можете сделать так, чтобы изменённые стили отображались только на мобильном устройстве. Вы можете указать максимальный размер экрана, на котором будут отображаться изменённые CSS стили.

 

Пример CSS стилей для мобильных устройств:

 

@media screen and (max-width: 650px) {
.post-item .post-title {
margin: 10px;
padding: 9px;
font-weight: bold;
}
}

 

Разберём стили:

1 строчка – здесь показана максимальная ширина экрана, на которой будут отображаться данные CSS стили.

2 строчка – название элемента, который вы хотите изменить.

3,4,5 строчка – CSS стили.

В конце обязательно должны быть две закрывающие скобки.

 

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

 

 Как изменить CSS стили на сайте WordPress:

SiteOrigin CSS

Simple Custom CSS

Custom CSS Pro

 

Остались вопросы? Напиши комментарий! Удачи!

 

info-effect.ru

CSS3 | Мобильные интерфейсы

145

Веб-программирование — CSS3 — Мобильные интерфейсы

Если вы когда-либо работали в Интернете более-менее продолжительное время с мобильного устройства, то, несомненно, обнаружили, что крохотный экранчик (каким бы большим он не был для мобильного устройства) — не лучшее окно в Интернет.

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

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

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

Представляем запросы о возможностях отображения (media queries). Эта возможность CSS3 предоставляет простой способ изменять стили веб-страницы для разных устройств и разных настроек просмотра. Аккуратное использование таких запросов может помочь вам предоставить свою веб-страницу любому устройству — от сверхширокого экрана домашнего компьютера до экрана смартфона iPhone. И все это без изменения ни единой строчки кода HTML.

Запросы о возможностях отображения

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

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

professorweb.ru

Применение CSS в мобильных приложениях

Применение CSS в мобильных приложениях

Последнее обновление: 31.10.2015

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

В CSS2 уже было решение в виде правила media, которое позволяет указать устройство, для которого используется данный стиль:


<html>
 <head>
  <title>Мобильный сайт</title>
  <link media="handheld" rel="stylesheet" href="mobile.css">
  <link media="screen" rel="stylesheet" href="desktop.css">
 </head>
 <body>
 ......................

Правило media="handheld" указывает, что стили в mobile.css будут применяться к мобильным устройствам, в то время как правило

media="screen" применяется к десктопным сайтам.

Однако многие современные мобильные браузеры по умолчанию считают, что страница предназначена для десктопов, поэтому в любом случае применяет правило media="screen". Поэтому на подобное решение не стоит полагаться.

Для решения этой проблемы в CSS3 были введен механизм CSS3 Media Query. Например, чтобы применить стиль только к мобильным устройствам мы можем написать так:


<html>
 <head>
  <title>Мобильный сайт</title>
  <link rel="stylesheet" type="text/css" media="screen" href="desctop.css" />
  <link rel="stylesheet" type="text/css" media="screen and (max-device-width:480px)" href="mobile.css" />
 </head>
 <body>
 ................................

Значение атрибута media screen and (max-device-width:480px)

говорит нам о том, что стили из файла mobile.css будут применяться к тем устройствам, максимальная ширина экрана которых составляет 480 пикселей — то есть фактически это и есть мобильные устройства.

Как вариант, можно использовать правила CSS3 Media Query в самом файле css:


@media screen{
	body {
		background-color: red;
	}
	/*Далее остальные стили*/
}
@media screen and (max-device-width:480px){
	body {
		background-color: blue;
	}
	/*Далее остальные стили*/
}

К примеру настройка стилей под смартфоны, планшеты и десктопы может выглядеть так:


/*Стили только для смартфонов*/
@media screen and (max-device-width:480px){
	body {
		background-color: blue;
	}
	/*Далее остальные стили*/
}
/*Стили только для планшетов*/
@media screen and (min-device-width:481px){
	body {
		background-color: red;
	}
	/*Далее остальные стили*/
}
/*Стили только для десктопов*/
@media screen and (min-width:769px){
	body {
		background-color: yellow;
	}
	/*Далее остальные стили*/
}

Применяемые функции в CSS3 Media Query:

  • aspect-ratio: отношение ширины к высоте области отображения (браузера)

  • device-aspect-ratio: отношение ширины к высоте экрана устройства

  • max-width/min-width и max-height/min-height: максимальная и минимальная ширина и высота области отображения (браузера)

  • max-device-width/min-device-width и max-device-height/min-device-height: максимальная и минимальная ширина и высота экрана мобильного устройства

  • orientation: ориентация (портретная или альбомная)

Например, мы можем задать разные стили для разных ориентаций мобильных устройств:


/*Стили для портретной ориентации*/
@media only screen and (orientation: portrait){

}
/*Стили ландшафтной ориентации*/
@media only screen and (orientation: landscape){

}

Таким образом, мы меняем лишь определение стилей в зависимости от устройства, а сами стили css по сути остаются теми же, что мы используем для создания обычных сайтов. Теперь посмотрим, как мы можем создавать мобильные приложения непосредственно на платформе ASP.NET MVC 4.

metanit.com

@media screen для мобильных устройств

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

/* monitors and laptops */
@media screen and (min-width: 1240px)  {}

/* tablet */
@media screen and (min-width: 1024px) and (max-width: 1240px)  {}

@media screen and (min-width: 768px) and (max-width: 1024px) {}

/* mobile */
@media screen and (max-width: 768px) {}

/* iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {}

/* iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

/* iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

/* Retina iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {}

/* Retina iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {}

/* Retina iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}

/* iPad 1 & 2 in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){}

/* iPad 1 & 2 in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad 1 & 2 in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}

/* iPad mini in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad mini in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad mini in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPhone 5 in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}

/* iPhone 5 in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}

/* iPhone 5 in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}

/* iPhone 2G-4S in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

/* iPhone 2G-4S in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}

/* iPhone 2G-4S in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}

htmlweb.ru

Адаптивный дизайн на основе медиа-запросов / Google corporate blog / Habr

Уровень подготовки веб-мастера: средний/высокий

Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.

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

  1. четкое отображение страниц на экране с любым разрешением;
  2. возможность просмотра группы контента на любом устройстве;
  3. отсутствие горизонтальной полосы прокрутки независимо от размера окна.



Изменяется расположение контента, навигация и масштаб изображений – Хромбуки
Реализация

Начнем с того, что семантическая разметка содержания упрощает перекомпоновку страниц в случае необходимости. С помощью таблицы стилей мы создали резиновый макет. Это первый шаг на пути к достижению нашей цели. Вместо атрибута width для контейнеров мы стали указывать max-width. Атрибут height был заменен атрибутом min-height, чтобы крупный шрифт или многострочный текст не нарушал границы контейнера. Чтобы картинки с фиксированной шириной не ломали резиновые столбцы, применяется следующее правило CSS:
img {
   max-width: 100%;
}

Резиновый макет – хорошая идея, но использование такой компоновки накладывает некоторые ограничения. К счастью, медиа-запросы теперь поддерживаются всеми современными браузерами, в том числе IE9+ и браузерами основной части мобильных устройств. Это позволяет создавать сайты, качество отображения которых в мобильных браузерах не снижается, поскольку они оптимизируются под тот или иной интерфейс. Но сначала необходимо определить, какие особенности смартфонов должны учитываться веб-серверами.
Области просмотра

Когда пиксель не является пикселем? В том случае, если речь идет о смартфоне. Обычно браузеры смартфонов имитируют браузеры настольных компьютеров с высоким разрешением, поэтому страницы отображаются в них, как на экране монитора. Вот почему появился «режим обзора» с мелким текстом, который невозможно прочитать без увеличения. Ширина области просмотра по умолчанию в стандартных браузерах Android составляет 800 пикселей, а в браузерах iOS – 980 пикселей, независимо от фактического количества физических пикселей на экране.

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

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

Существует множество вариантов разрешения экранов мобильных устройств, но стандартное значение device-width, сообщаемое браузерами, обычно составляет около 320 пикселей. Если ширина экрана вашего мобильного устройства равна 640 физическим пикселям, изображение шириной 320 пикселей будет масштабировано на всю ширину экрана, и в обработке будет использоваться в два раза больше пикселей. Таким образом, вдвое большая плотность пикселей обеспечивает более четкое отображение на небольшом экране по сравнению с экраном настольного компьютера.

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

@media screen and (min-width:480px) and (max-width:800px) {
  /* Target landscape smartphones, portrait tablets, narrow desktops

  */
}

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}

В зависимости от того, как функционирует и выглядит ваш сайт на экранах различных устройств, может потребоваться использовать разные контрольные точки. Вы можете также использовать медиа-запрос для выбора определенной ориентации без учета соотношения размеров в пикселях, если эта функция поддерживается.
@media all and (orientation: landscape) {
  /* Target device in landscape mode */
}

@media all and (orientation: portrait) {
  /* Target device in portrait mode */
}

Изменяется расположение контента и масштаб изображений – Институт культуры

Пример использования медиа-запросов

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

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

Только при разрешении экрана менее 800 пикселей неосновной контент будет отображаться в нижней части страницы:

@media screen and (max-width: 800px) {
  /* specific CSS */
}

Последний медиа-запрос предназначен для смартфонов:
@media screen and (max-width: 479px) {
  /* specific CSS */
}

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

Эти простые приемы позволили оптимизировать сайт для просмотра на самых разных типах устройств.

Изменяется расположение контента, удалено большое изображение – О Google

Заключение

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

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

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

Другие примеры адаптивного веб-дизайна в Google:


Авторы публикации: Руперт Брейени, Эдвард Юнг, Мэтт Зюррер, команда веб-мастеров Google.

habr.com

Верстка для мобильных устройств / Habr

Общая информация


Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо поддерживать неправильно.

Но большинство устройств среднего и уж тем более hi-end класса поддерживают HTML/CSS в той или иной степени. Таким образом, язык WML для разработки сайтов под мобильные устройства устарел и практически не используется. На смену ему постепенно приходит общепризнанный стандарт в разработке сайтов — XHTML/CSS. Кодировка — строго UTF-8 (No BOM).

DOCTYPE, используемый для мобильных устройств


Практически везде на известных мобильных сайтах, таких как Google, Яndex, используется DOCTYPE XHTML Mobile 1.0:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

Также, иногда встречаются сайты с DOCTYPE XHTML Basic 1.1:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

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

Особенности верстки


Подключение CSS

Некоторые устройства не поддерживают стили, подключаемые из внешних файлов, поэтому есть рекомендация описывать все стили внутри самого документа:
    <style type="text/css">
        body {
            background-color: #E9E9CC;
            font-family: sans-serif;
            font-size: small;
            }
   </style>

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

Есть мнение, что стили вроде padding и margin нужно прописывать отдельно, используя padding-left, padding-top, margin-right и т.д. Точно так же следует поступать со всеми свойствами, которые имеют короткую запись. Например красный цвет фона стоит лучше записать как background-color: #ff0000;, а не background-color: #f00; и тем более не background: #f00;.
Фон элементов

Нежелательно использовать изображения в качестве фонов, т.к. многие устройства их могут просто не поддерживать. Если они все-таки используются, то необходимо задавать подходящий под фон цвет и проверять, как будет смотреться сайт без изображения.
Изображения

Все изображения на сайте желательно заключать в тег <img> и не забывать добавлять атрибут alt, потому что загрузка изображений на устройстве может быть отключена, и вместо него нужно вывести замену текстом, ну и в конце концов, — мы ведь XHTML используем. 😉 При подготовке изображений желательно ужимать их до минимального размера. При добавлении изображения в документ необходимо указывать его размеры атрибутами width и height.

В итоге, каждое изображение, вставленное в документ должно иметь вид:

    <img src="image.gif" alt="Текстовая замена" />

Таблицы

Старайтесь избегать сложных, в том числе вложенных таблиц, т.к. некоторые браузеры могут не справиться с их рендерингом и вывести кашу вместо таблицы. Также нельзя использовать атрибуты cellpadding и cellspacing, они не включены в DOCTYPE. И ни в коем случае не следует применять таблицы для верстки страниц. Таблицы не удобны в применении на маленьких экранах: чтобы прочитать объёмную таблицу, приходится применять горизонтальную прокрутку, чего тоже следует избегать учитывая, что разрешение экранов мобильных устройств несравнимо меньше, чем у настольного монитора.
Списки

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

Мобильные устройства в большинстве своем имеют очень плохую поддержку шрифтов, поэтому полагаться на то, что текст будет отображен именно тем шрифтом, который был задан в стилях не стоит. Но указывать хотя бы гарнитуру (serif или sans-serif) все равно нужно. Размер шрифтов желательно задавать в относительных единицах или, что еще лучше указывать аргументы свойства font-size в значениях small, medium, или large.
Плавающие элементы

Нельзя использовать плавающие элементы. Большинство браузеров просто не умеют их обрабатывать. Т.е. при создании верстки старайтесь не использовать такие свойства, как float, clear, overflow, clip.

Тестирование


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

Для тестирования сайтов удобно пользоваться эмулятором Opera Mini, а также встроенной функцией в Opera (для десктопа) в меню «Вид» -> «Небольшой экран».

Мобильные браузеры



Ссылки


habr.com

Как сделать таблицы адаптивными с CSS

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

Моя недавняя статья на HackerNews Пишите HTML, как будто сейчас 1999 год, получила намного больше внимания, чем я ожидал. Последовало несколько комментариев, в которых говорилось о том, что элементы table не очень хорошо работают с мобильными устройствами или о невозможности использования удобного макета на небольших экранах. Это просто неправда.

Ниже приведены две отдельные демо-версии, показывающие, как оптимизировать HTML table для мобильных устройств, используя только минимальное количество CSS. Эти реализации могут быть неидеальными, но они намного лучше реализации множества пользовательских элементов div в виде таблиц.

Демо 1: Просто позвольте им прокручиваться

Хорошо, я признаю, что эта реализация не самая лучшая, но я считаю, что она хорошо работает с огромными наборами данных. Просто установите min-width для родительского элемента table, и браузер просто потребует от пользователя прокручивать содержимое по горизонтали.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

table { min-width: 800px; /* Установите здесь нужный min-width */ }

table {

    min-width: 800px; /* Установите здесь нужный min-width */

}

Посмотрите CodePen ниже, чтобы увидеть ее в действии:

Я на самом деле предпочитаю этот метод из-за его простоты и функциональности. Пользователи на мобильных устройствах знакомы с прокруткой, поскольку это одно из основных необходимых действий. «Обрезка» таблицы дает им мгновенный визуальный сигнал, что они могут прокручивать контент.

Демо 2: Более гибкая, чем вы думаете

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

/* Используем 800px для мобильного экрана */ @media(max-width: 800px) { /* Скрываем заголовки таблицы */ table thead { left: -9999px; position: absolute; visibility: hidden; } table tr { border-bottom: 0; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 40px; } table td { border: 1px solid; margin: 0 -1px -1px 0; /* Удаляем двойную границу */ width: 50%; } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/* Используем 800px для мобильного экрана */

@media(max-width: 800px) {

    /* Скрываем заголовки таблицы */

    table thead {

        left: -9999px;

        position: absolute;

        visibility: hidden;

    }

    table tr {

        border-bottom: 0;

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        margin-bottom: 40px;

    }

    table td {

        border: 1px solid;

        margin: 0 -1px -1px 0; /* Удаляем двойную границу */

        width: 50%;

    }

}

Посмотрите демонстрацию на CodePen:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Есть некоторые предостережения, относящиеся к этому подходу:

В настоящее время мы скрываем строку thead в мобильном представлении (только визуально — программы чтения с экрана все еще могут сканировать ее)

Может потребоваться дополнительная работа в зависимости от того, сколько элементов в строке flexbox имеет смысл размещать (на основе проекта и набора данных)

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

/* Стили span по умолчанию — скрыты на настольных устройствах */ table td span { background: #eee; color: dimgrey; display: none; font-size: 10px; font-weight: bold; padding: 5px; position: absolute; text-transform: uppercase; top: 0; left: 0; } /* Простой CSS для flexbox-таблиц на мобильных устройствах */ @media(max-width: 800px) { table thead { left: -9999px; position: absolute; visibility: hidden; } table tr { border-bottom: 0; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 40px; } table td { border: 1px solid; margin: 0 -1px -1px 0; padding-top: 35px; /* дополнительный отступ для предотвращения склеивания заголовков */ position: relative; width: 50%; } /* Отображение span заголовков */ table td span { display: block; } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

/* Стили span по умолчанию — скрыты на настольных устройствах */

table td span {

    background: #eee;

    color: dimgrey;

    display: none;

    font-size: 10px;

    font-weight: bold;

    padding: 5px;

    position: absolute;

    text-transform: uppercase;

    top: 0;

    left: 0;

}

 

/* Простой CSS для flexbox-таблиц на мобильных устройствах */

@media(max-width: 800px) {

    table thead {

        left: -9999px;

        position: absolute;

        visibility: hidden;

    }

    table tr {

        border-bottom: 0;

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        margin-bottom: 40px;

    }

    table td {

        border: 1px solid;

        margin: 0 -1px -1px 0;

        padding-top: 35px; /* дополнительный отступ для предотвращения склеивания заголовков */

        position: relative;

        width: 50%;

    }

    /* Отображение span заголовков */

    table td span {

        display: block;

    }

}

Обновление: как указал пользователь mmoez, гораздо чище будет использовать псевдо-селекторы :nth-child для реализации полей заголовков на мобильных устройствах.

Почему я должен обращать внимание на использование элементов table?

Если в двух словах: доступность и правильная семантика. Зачем использовать отвертку, когда вам нужен молоток? Конечно, вы можете заставить эту отвертку выглядеть и работать почти так же, как молоток, но с какой целью? Просто используйте молоток. Получайте удовольствие, делая свои таблицы адаптивными!

Автор: Bradley Taunt

Источник: https://bradleytaunt.com

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

webformyself.com

Отправить ответ

avatar
  Подписаться  
Уведомление о