CSS3 Media Queries с вкладками css3

Question

CSS3 Media Queries с вкладками css3

0

! [введите описание изображения здесь] [1] По сути, я создал несколько приятных вкладок в ccs3 с помощью переключателей. Который выглядит фантастически в браузере и работает.

Однако это не так на мобильном устройстве, текст переполняется из вкладок довольно маленького контейнера. Запросы в средствах массовой информации, похоже, ничего не делают, любые идеи о том, как это сделать?

.tabs {
    position: relative;   
    min-height: 260px; /* Changes the height of the tabs section, enables you to change it for your text */
    clear: both;
}

@media only screen and (max-width: 480px)  {
    .tabs {
        min-height: 480px; /* Changes the height of the tabs section (MOBILE), enables you to change it for your text */
    }
}

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

http://mdixon94.co.uk/HTML/elements.html

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

mdixon18 22 окт. 2013, в 19:45

Источник

0

На каком мобильном устройстве вы тестируете? Какая версия? Какой браузер? и альбомная или портретная ориентация?
Simon Arnold 22 окт. 2013, в 17:25
0

Portrait & Landscape не работают на iPhone и во всех браузерах, все, что я хочу сделать, это увеличить высоту, но это как если бы медиа-запрос не работал! 480px идеально подходит для iphone, я просто не могу получить запрос, чтобы внести изменения.
mdixon18 22 окт. 2013, в 17:31
0

При разработке для мобильных устройств вы должны держаться подальше от размеров пикселей. Они не очень гибкие или отзывчивые, попробуйте использовать % или em .
Josh Powell 22 окт. 2013, в 18:32
0

Не относящийся к вашему вопросу, я рекомендую добавить: -webkit-transition: .6s ease; -moz-transition: .6s ease; -ms-transition: .6s ease; -o-transition: .6s ease; в .priceblock , это будет выглядеть очень хорошо, я обещаю. :]
Josh Powell 22 окт. 2013, в 18:34

Показать ещё 2 комментария

Теги:

html

css

css3

media-queries

2 ответа

Ещё вопросы

На каком мобильном устройстве вы тестируете? Какая версия? Какой браузер? и альбомная или портретная ориентация?
Portrait & Landscape не работают на iPhone и во всех браузерах, все, что я хочу сделать, это увеличить высоту, но это как если бы медиа-запрос не работал! 480px идеально подходит для iphone, я просто не могу получить запрос, чтобы внести изменения.
При разработке для мобильных устройств вы должны держаться подальше от размеров пикселей. Они не очень гибкие или отзывчивые, попробуйте использовать % или em .
Не относящийся к вашему вопросу, я рекомендую добавить: -webkit-transition: .6s ease; -moz-transition: .6s ease; -ms-transition: .6s ease; -o-transition: .6s ease; в .priceblock , это будет выглядеть очень хорошо, я обещаю. :]

Simon Arnold · Answer 1 · 2013-10-22T14-52-00.000Z

Вы можете использовать многоточие в CSS

.tabs {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

который должен дать вам что-то вроде этого:

рабочий стол
| Это текст моей вкладки |
мобильный
| Это мое... |

DaniP · Answer 2 · 2013-10-22T14-17-00.000Z

Вы также можете добавить эту собственность:

.tabs {
   white-space:normal;
}

Я просто пытаюсь заставить медиазапрос работать так, чтобы я мог изменить высоту вкладки, содержащей ...
Да, обычно ширина устройства составляет от 320 до 480 пикселей, но я вижу на вашей странице, что у вас есть фиксированная ширина для каждого из тд, так что это будет проблемой
эм, посмотрите на вкладки, а не на таблицу ...