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

[konoplya]

Здравствуйте. Cверстал часть блока, который хочется видеть адаптивным. И вроде всё как-то работает, но... хотелось бы выслушать комментарии на предмет косяков.

Расстояние между элементами 1 и 3 в нормальном разрешении сохраняется в районе 680px. 1й всегда жмётся к левому верхнему краю. Третий - к правому верхнему. Второй элемент жмётся к первому элементу справа(вот тут у меня пока не получилось сделать так, чтобы при увеличении количества букв он(второй элемент) всегда жался сбоку вверху, а не скатывался вниз(поперёд текста). Касательно четвёртого, пятого и шестого элементов, то они всегда находятся внизу слева, под первым элементом(при этом они не меняют размера своих шрифтов в отличии от первого и третьего элементов). Ориентировочная блок-схема того, как это примерно должно выглядеть - в приложении + зип с хтмл-кой..

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

А пока(кому не сложно) взгляните пожалуйста и напишите, можно ли что-то улучшить\оптимизировать\подправить в том, что уже имеется.

 

[shake1]

Cверстал часть блока, который хочется видеть адаптивным.

Он же зумируется, для адаптивности надо
<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

[konoplya]

Он же зумируется, для адаптивности надо
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Зуммируется, тянется, увеличивается, уменьшается... да, верно. В адаптивной вёрстке я скорее дилетант, нежели профи - могу чего-то не знать. Мета с випортом для меня нечто новое, по сему возьму на заметку ваш комментарий (благодарю).

Почитал немного об этом и, как понимаю, в данном случае и при таком написании випорт масштабирует всю страницу 1:1 под экран того устройства, на котором просматривается текущий сайт. Однако, не будет ли кое-что лишним, если человек захочет увеличить какой-либо элемент на просматриваемой странице? Ведь, как вы пишите, в текущем scc предусмотрено зуммирование. А випорт это самое зуммирование при initial-scale=1.0 сведёт к жёсткому креплению по бокам(просто уменьшит страницу до размеров экрана). И тогда страничку(либо какой-то её элемент) не получится увеличить. Для меня этот момент видится немножко важным, так как на некоторых "адаптивных" сайтах, когда мне хотелось что-то увеличить, возникала эта самая проблема - жёсткое закрепление за краями, никак не реагирующее при попытке зума. То есть я развожу пальчиками по экрану, чтобы что-то рассмотреть повнимательнее, а элемент не увеличивается, и вот это... мне очень не нравилось(субъективно). Естественно, я не раз размышлял о том, что за ерунда такая, ведь на других сайтах зум нормально проходит, а тут какой-то бред. Думал может с мобильником что не так, а это оказывается в прописанном метатеге дело(предполагаю)...

По этому встречный вопрос: если я включаю данный метатег с випортом в текущую конструкцию, но прописываю его не как <meta name="viewport" content="width=device-width, initial-scale=1.0">, а как <meta name="viewport" content="width=device-width, user-scalable=yes">, то проблема с жёстким креплением полностью разрешится? (просто тут задача ещё и в том, чтобы не перегрузить тем, без чего можно свободно обойтись. а с учётом того, что современные мобильные устройства и так масштабируют страницы по умолчанию, то возникает сомнение по поводу того, так ли обязателен данный метатег на самом деле). То есть понятно, что для... скажем... сайта, состоящего не из дивов, а из таблиц, он может вполне и пригодиться. Однако, если див изначально подстроен на тянучку\зуммирование, то.. нужен ли этот випорт вообще... вот я к чему.