Управление макетами столбцов сетки с помощью медиазапросов и точек останова

0

Я пытаюсь познакомиться с гибкими, удобными для мобильных устройств макетами, переработав свой онлайн-портфолио, используя среду SimpleGrid (эта: thisisdallas.github.io/Simple-Grid/) в сочетании с элементами шаблона HTML5, чтобы помочь мне начал.

Вот то, что у меня есть на данный момент: http://pftest.comyr.com/grid/

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

После того, как я обнаружил, что я в конце концов обнаружил, что я в конечном итоге обнаружил, что я могу заставить его свернуть до двух столбцов для устройств размером с планшетный компьютер, применяя класс /ID с шириной: 50% и поплавок: слева до медиа-запроса: @media и (max-width: 908px) {} и (надеюсь) теперь он аккуратно свертывается в два столбца примерно такого размера (по крайней мере, это из моего краткого тестирования)

Проблема, с которой я столкнулась, заключается в том, чтобы выяснить, как заставить ее впасть в один столбец для меньших размеров экрана смартфона (@media (max-width: 22em), @media (max-width: 320px) ect,

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

В рассматриваемом CSS:

@media (max-width: 22em) {
#workgrid {

    width: 100%;
    float: left;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}
}

который применяется к каждому из классов DIV "col-1-3".

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

  • 0
    Использование одного и того же идентификатора ( #workgrid ) в нескольких тегах HTML - плохая практика
  • 0
    Ах да, я должен был знать это ... Итак, могу ли я получить несколько советов о том, каким будет лучший способ применить определенные стили к колонкам? и как решить проблему с одним столбцом?
Теги:
grid
media-queries
breakpoints

1 ответ

0
Лучший ответ

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

Например, у вас есть класс элементов с именем .shape, ширина которого составляет 300 пикселей, этот класс является дочерним элементом #workgrid, ширина которого составляет 50%. В небольшом окне просмотра браузера с шириной #workgrid пикселей ширина #workgrid в пикселе будет равной 160 пикселей, тогда .shape ширина .shape будет одинаковой, 300 пикселей, это приведет к тому, что содержимое выйдет из пространства и обрушится на другие элементы пространство.

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

Чтобы исправить сетку, вы должны использовать max-width и max-height вместо width и height в некоторых классах и изменять некоторые свойства css, такие как background-size. Другим способом решения этой проблемы является использование единиц реагирования вместо фиксированных единиц в размерах. В ответном Интернете требуются гибкие меры.

Исправление, которое требует времени и может быть раздражающим, поэтому, если вы хотите, чтобы альтернативное решение yo могло решить вашу проблему, изменив main.css и simplegrid.css:

@media (max-width: 22em) {

к этому:

@media (max-width: 41em) { // If it doesn't work, test a larger number like 44em or something like that

Ваша сетка начнет сбрасываться, когда окно просмотра браузера меньше 656 пикселей (656 пикселей = 41 м для текущего font-size пикселей), эта сетка становится сеткой с одним столбцом, когда ширина окна просмотра составляет 22 или менее, поэтому смену 22em в 41em мы сделать единый столбец, пока сетка не рухнет, тем самым создавая сетку.

Поделиться
  • 0
    Ну, я попытался добавить max-width и max-height к этим классам, но теперь он еще более разбит, все еще не сворачивается в один столбец, и я запутался как никогда.
  • 0
    лол ... хорошо, что сработало (изменив его на max-width: 41em). Любой шанс, что я мог бы получить краткое объяснение, почему это работает, чтобы я мог понять, что происходит немного лучше? Спасибо - самое быстрое решение не всегда лучшее, что я понимаю, но я должен признать, что я уже достаточно долго откладывал этот проект и хотел бы завершить его в ближайшее время, так что это большая помощь. :) Мне нужно еще немного времени, чтобы просмотреть эти рекомендуемые статьи, поскольку я, конечно, все еще пытаюсь понять, как именно работают свойства max-width и min-width ...
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню