Сообщений в теме: 44

[CB9TOIIIA]

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

 

Я же привел пример на: http://forum.jbzoo.c...ge-2#entry49380

 

По аналогии:

.jbzoo .width33 {
width: 100% !important;
}

меняем на:

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.jbzoo .width33 {
width: 49% !important; /*или 48%*/
}
}

Это портретник... на landscape все прекрасно смотрится.

 

 

[sebafurego]

Короче если у тебя уже есть сайт и в нем прописаны стили, что логично ) то это примерно выглядит так

#wrapper {
min-height:100%;
background-color:#fff;
}

#header {
width:960px;
margin-left:auto;
margin-right:auto;
}

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

 

Пишешь медиа запрос и в нем переписываешь стили header

@media (max-width:960px){
#header {
width:100%;
margin-left:10px;
margin-right:10px;
}
}

Вот и вся магия, просто переписываешь стили в медия, то есть когда дисплей меньше 960 он стили начинает брать из медиа который ты прописал

Главное не забудь в шапке сайта добавить параметр

 

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

 

Ну и бутстрап тебе в помощь http://getbootstrap.com/

Сообщение отредактировал sebafurego: 09 September 2014 - 22:01

[Save Tibet]

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

 

Не понял, при чем тут header, wrapper — речь не о них, а о сетке вывода товаров. Я пробовал поставить .jbzoo .width33 {width: 49%} — да, становится 2 колонки, но почему-то некоторые товары переносятся на новую строку, образуя во второй колонке пустое место.

[CB9TOIIIA]

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

 

Не понял, при чем тут header, wrapper — речь не о них, а о сетке вывода товаров. Я пробовал поставить .jbzoo .width33 {width: 49%} — да, становится 2 колонки, но почему-то некоторые товары переносятся на новую строку, образуя во второй колонке пустое место.

 

А если немного посмотрели стили, то просто надо убрать clr

    /* iPads (portrait) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait) {
    .jbzoo .width33 {
    width: 49% !important; 
    }
.jbzoo .clear, .jbzoo .clr {
clear: none !important; }
    }

[Save Tibet]

 

А если немного посмотрели стили, то просто надо убрать clr

    /* iPads (portrait) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait) {
    .jbzoo .width33 {
    width: 49% !important; 
    }
.jbzoo .clear, .jbzoo .clr {
clear: none !important; }
    }

Поставил эти правила и сейчас на планшете все норм, за исключением одного момента — см. фото

[CB9TOIIIA]

Поставил эти правила и сейчас на планшете все норм, за исключением одного момента — см. фото

 

Видимо по высоте не может выстроится или еще что-то - писать правила опять же в CSS.

Хотя... я так подумал можно по хардкору - сделать через rereplacer например проверку на устройство - если ipad (например или планшет) - то изменить HTML с width33 на двух колоночный width44 или иной. Почему этой дорогой тоже не пойти? меньше костылей...

[Save Tibet]

Дружище, я бы рад, но я не знаю, что такое rereplacer. Я не такой продвинутый, как вы тут все ))

[CB9TOIIIA]

Дружище, я бы рад, но я не знаю, что такое rereplacer. Я не такой продвинутый, как вы тут все ))

 

http://www.nonumber....ions/rereplacer

http://www.nonumber....lacer/userguide

 

 

[Save Tibet]

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

[CB9TOIIIA]

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

 

А я как по Вашему смотрю?   - chrome используйте

 

https://developer.ch...ocs/device-mode

http://zencoder.ru/р...муляции-chrome/

http://blog-dotsenko...ye-ustrojjstva/