Лишние блоки в адаптивном дизайне

110

Kepus

1 июня 2015, 22:54

1099

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

Сейчас я скрываю лишнее с помощью style display none, но такое решение не лучшее, тк все эти элементы все-равно прогрузятся.

Движок вордпресс

I3

115

ivan34502

1 июня 2015, 23:11

#1

Kepus:
Подскажите, можно ли как-то в адаптивной верстке меня блоки местами, добавлять различные возможности например для версии под планшеты и смартфоны. Также хотелось бы в мобильной версии полностью избавиться от плагина популярных записей.
Сейчас я скрываю лишнее с помощью style display none, но такое решение не лучшее, тк все эти элементы все-равно прогрузятся.
Движок вордпресс

Я так делал:

<!DOCTYPE html>

<html>

  <head>

    <title>foobar</title>

    <style>

      @media screen and (max-width:300px){

        #parent{

          display:flex;

          flex-flow: column;

        }

        #a{order:2;}

        #c{order:1;}

        #b{order:3;}

      }

    </style>

  </head>

  <body>

    <div id="parent">

      <div id="a">one</div>

      <div id="b">two</div>

      <div id="c">three</div>

    </div>

  </body>

</html>

http://jsfiddle.net/devnull/qyroxexv/

K

110

Kepus

2 июня 2015, 00:28

#2

ivan34502:
Я так делал:

<!DOCTYPE html>
<html>
  <head>
    <title>foobar</title>
    <style>
      @media screen and (max-width:300px){
        #parent{
          display:flex;
          flex-flow: column;
        }
        #a{order:2;}
        #c{order:1;}
        #b{order:3;}
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="a">one</div>
      <div id="b">two</div>
      <div id="c">three</div>
    </div>
  </body>
</html>

http://jsfiddle.net/devnull/qyroxexv/

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

334

TF-Studio

2 июня 2015, 06:44

#3

на уровне php / движка определять устройства и грузить что вам надо

Всё ещё лучший способ заработка для белых сайтов: GoGetLinks (https://www.gogetlinks.net/?inv=fahbn8).

209

Ayavryk

2 июня 2015, 08:26

#4

Те блоки, которые не обязательно показывать можно подгружать через Ajax

TF-Studio:
на уровне php / движка определять устройства и грузить что вам надо

Плохой способ. Тип устройства не определяет ширину экрана даже на одном девайсе. Без js все равно не справиться.

Ну и опять же проблема с Гуглом - "устройство" у робота одно и то же. И ему вряд ли понравится большой hidden-блок

Тынгыр, мынгыр, комсомол (http://erum.ru). Ехари, ехари, (жалобно) аяврик. /народная тунгусская песня/

Спрашиваем и отвечаем по В php не выводить как на JavaScript определить

K

110

Kepus

2 июня 2015, 08:29

#5

Ayavryk:
Те блоки, которые не обязательно показывать можно подгружать через Ajax

Плохой способ. Тип устройства не определяет ширину экрана даже на одном девайсе. Без js все равно не справиться.
Ну и опять же проблема с Гуглом - "устройство" у робота одно и то же. И ему вряд ли понравится большой hidden-блок

Можно пожалуйста конкретный пример?

K

110

Kepus

2 июня 2015, 14:38

#6

slavik2504:
Могу посоветовать верстку средствами фреймворков (аля Bootstrap), а если ФВ по вашему ИМХО - это плохо, тогда смотрим в сторону медиа-запросов CSS, будет конечно геморнее, но эффект тот же :)

Как понять геморнее? Просто через display: none скрывать? Я сейчас так делаю)

---------- Добавлено 02.06.2015 в 18:44 ----------

Еще подскажите пожалуйста, можно ли как-то задать этот параметр для устройств с шириной экрана менее 400 пикселей?

Как удалить мобильную версию Скроллинг в отзывчивом дизайне Сайт http:// не оптимизирован

1609

SeVlad

2 июня 2015, 18:04

#7

Ayavryk:
Ну и опять же проблема с Гуглом - "устройство" у робота одно и то же. И ему вряд ли понравится большой hidden-блок

Гугл-то, оказывается, считает как раз наоборот. Или это переводчики всё напутали...

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.

PN

103

proksey-net

2 июня 2015, 19:41

#8

SeVlad:
Гугл-то, оказывается, считает как раз наоборот. Или это переводчики всё напутали...

что вполне логично, т.к. контент никуда не должен деваться:)

Мой совет помог? Не скупись! Bitcoin 1Lseddet1o1B6odgXQHbGaWGwRkt1Db8Ef Ethereum 0x450f1a17461e25194B7F9226cDEe70173F39e1e1

1609

SeVlad

3 июня 2015, 06:53

#9

proksey-net:
что вполне логично, т.к. контент никуда не должен деваться

1. Контент для мобильного и стационарного может быть разный. Или частично разный.

2. Речь не только о контенте, но и о способе его выдачи. Объёме и времени загрузки прежде всего. Всегда можно подгрузить аяксом или перейти на след страницу, если потребуется.

Съезжает верстка когда загружается "Страница для печати" и Как сделать уникальный H1?

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах

Что такое Power BI и зачем это нужно бизнесу