Какой режим сетки Boostrap3 для мобильных/настольных компьютеров вы используете?

Bootstrap 3 поставляется с 4-мя режимами сетки:Какой режим сетки Boostrap3 для мобильных/настольных компьютеров вы используете?

XS: Дополнительные устройства небольших телефонов (< 768px)
СМ: небольшие устройства таблетки (≥768px)
MD: Средние устройства Desktops (≥992px)
LG: Большие устройства Desktops (≥1200px)

в реальном мире это не зависит от разрешения экрана, но в устройстве. Например, Nexus 5 (1920px) использует XS, а iPad 1 (1024px) использует MD.

Я хочу сделать сайт отзывчивым, но не использовать 4 режима (поскольку сайт сложный, есть части, которые вообще не пригодны для использования в мобильных устройствах - то есть сложная сетка изображений -). Я просто хочу использовать только 2 режима: один для рабочего стола (и планшеты), а другой для мобильных телефонов.

Использование режима Google Canary Emulation я обнаружил, что:

XS: BB Z10/Z30; HTC Evo, Touch HD, Desire HD, Desire; IPhone 3GS/4/5; Nexus S/4/5; Samsung Galaxy Note/S3/S4; Sony Xperia S
SM: Amazon Kindle Fire HD 7; Nexus 7/7.2
MD: BB PlayBook; IPAD 1/2/iPad Mini; IPAD 3/4
LG: Amazon Kindle Fire/Fire HD 8,9 "; Nexus 10

(Дa, Ipad 4 с Retina является MD, но Kindle Fire является LG)

Где я должен положить предел между мобильным и рабочим столом? Я имею в виду: MD и ниже для мобильных телефонов и LG для бит-планшетов и рабочего стола? или SM для мобильных телефонов, а остальные для больших планшетов/настольных ПК ...

Спасибо!

источник

2013-12-07 4lberto

Вы упомянули выше, что iPad1 использует «md», я не знаю знайте, правда ли это, но я знаю, что последние iPad действительно используют сетку «sm», которая заставляет меня абсолютно орехами, каким-либо образом изменить это? –

Привет, У меня нет реальных устройств для тестирования.список разработан с помощью эмулятора Chrome. Насколько мне известно, изменить его невозможно, потому что это связано с соотношением между разрешением экрана и коэффициентом Pixel. Это соотношение равно 1 в Ipad 1 и 2 для 3/4 и другой сетчатки. Я понимаю, что пользователь может изменить его в своей конфигурации браузера, но вы не можете просить всех, кто использует вашу веб-страницу, сделать это ... – 4lberto

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

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

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

Я поднял этот немного от их документации:

Stacked к горизонтальной

http://getbootstrap.com/css/#grid

"Использование единого набора .col-MD- классов сетки, вам может создать базовую сетчатую систему, которая начинается с уложенных на мобильных устройствах и планшетных устройствах (от малого до малого), прежде чем они станут горизонтальными на настольных (средних) устройствах. Поместите столбцы сетки в любую строку."

И, конечно, вы можете просто использовать медиа-запросы, чтобы изменить то, что вы хотите.

источник

2013-12-07 21:55:36 nil

Привет, спасибо за ваш ответ. Наверное, я неправильно сказал. Моя проблема связана с тем, что Ipad 4 использует режим SM, а другие планшеты, такие как Nexus 10, используют режим LG. Для пользователя Ipad и Nexus 10 в той же категории и (с моей точки зрения) они оба должны использовать более близкий режим режима LG в режиме SM. Что я хотел знать, если ohter люди начинают в .col-md-grid «режим рабочего стола» или запускают его в .col-sm-grid (так что Ipad 4 показывает сайт, как рабочий стол) или запускает его на .col -lg сетки. Таким образом, моя проблема заключается в том, где установить разделение между модным и настольным режимами (XS, SM, MD или LG) Thnx! – 4lberto

@ 4lberto, хорошо также учитывайте Landscape vs Portrait и как они будут отображаться на этих устройствах. Опять же, я думаю, вы уже думали об этом. Для меня лично я считаю col-md стандартным размером рабочего стола. Все, что ниже этого, - это мобильный макет. md и что-нибудь выше, я рассматриваю как рабочий стол. Так что действительно что-то 768 и выше. Затем я просматриваю, а иногда сложный контент не работает в секциях, поэтому я буду менять свои divs соответственно - xs-col-6 или col-md или даже смешать его как «div class =» col-xs-6 col-sm-6 col-md-3 ' – nil

И да, некоторые устройства отображают вещи так, как вы этого не ожидали. Поэтому вы делаете все возможное и находите хороший компромисс. – nil

Я только что услышал хороший момент на Lynda.com course. Начните с самой большой и самый маленький первый. Как уже говорилось выше, старт с наименьшей сетки . Разработайте этот макет для мобильного пользователя, а затем разместите самую большую сетку для настольного браузера. Остальное работает, как он разбивается и адаптируется к средним размерам экрана.

источник

2013-12-12 09:55:13 user3094792

Какой режим сетки Boostrap3 для мобильных/настольных компьютеров вы используете?

ответ

Смежные вопросы