Каков наилучший способ создания экрана навигации кнопки значка для jQuery mobile?

Question

Я создал несколько сайтов в jQuery mobile, и я использовал либо список, либо кнопки для навигации. Это просто, потому что ширина экрана не является фактором.

В настоящее время я создаю сайт, который использует квадратные значки для навигации, которые будут отображаться в виде сетки. Каков наилучший способ поддерживать различные размеры и разрешения экрана? Нужно ли создавать разные значки для разных экранов? Например, iphone - 480 × 320, iphone 4 - 960 × 640, а ipad - 2048 x 1536, не говоря уже о других устройствах.

Каков наилучший способ справиться с этим? Будет ли платформа jquery mobile помочь мне выбрать, какие значки отображать, или мне нужно делать все в CSS самостоятельно?

Answer 1

Я думаю, вам придется сделать это.

Я использую Jquery Mobile listview, в котором я переопределяю большую часть CSS, чтобы оставить только 80x80 миниатюр (мои значки).

Затем установите элементы списка ListView с фиксированной шириной 25% (мин/макс ширина эскиза в рх) и отображать их в линию, так что они будут просто выстраиваются в строках 4.

Для эскизов I» m с помощью CSS-спрайта (все значки, разрешение экрана s/m/l). В зависимости от ширины экрана я переключаю положение фона на соответствующий размер значка. Не идеально (маленькие экранные устройства также загружают большие значки), но на данный момент их хватает.

Пример:

HTML

<ul data-role="listview" class="iconList menuList"> 
    <li data-icon="false"><a href="" data-transition="slide" class="iconsMenu iconSearch"><h3>text</h3></a></li> 
    <li data-icon="false"><a href="" data-transition="slide" class="iconsMenu i1"><h3>text</h3></a></li> 
    <li data-icon="false"><a href="" data-transition="slide" class="iconsMenu i2" ><h3>text</h3></a></li> 
    <li data-icon="false"><a href="" data-transition="slide" class="iconsMenu i3"><h3>text</h3></a></li> 
    <li data-icon="false"><a href="" data-transition="slide" class="iconsMenu i4"><h3>text</h3></a></li> 
    <li data-icon="false"><a href="" data-transition="slide" class="iconsMenu i5"><h3>text</h3></a></li> 
    <li data-icon="false"><a href="" data-transition="slide" class="iconsMenu i6"><h3>text</h3></a></li> 
    <li data-icon="false"><a href="" data-transition="slide" class="iconsMenu i7"><h3>text</h3></a></li> 
    <li data-icon="false"><a href="" data-transition="slide" class="iconsMenu i8"><h3>text</h3></a></li> 
</ul 

CSS - переопределяет JQM ListView

.iconList { 
    display: inline-block; 
    margin: 1em 0px !important; 
    padding: 0 2%; 
    width: 96%; /* prevent overlapping */ 
    } 
.iconList li { 
    display: inline; 
    float: left; 
    width: 24%; 
    min-width: 65px; 
    max-width: /*114px*/ 100px; 
    padding: 0 0 16px 0; 
    border-width: 0 !important; 
    background: none !important; 
    } 
.iconList li:first-child { 
    border-width: 0 !important; 
    border: 1px solid #ccc; 
    border-top-right-radius: 0px; 
    -moz-border-radius-topright: 0px; 
    -webkit-border-top-right-radius: 0px; 
    border-top-right-radius: 0px; 
    } 
.iconList li:last-child { 
    border-bottom-width: 0 !important; 
    border-bottom-left-radius: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    -webkit-border-bottom-left-radius: 0px; 
    border-bottom-left-radius: 0px; 
    } 
.iconList li div.ui-btn-inner { 
    width: auto; 
    border-width: 0 !important; 
    text-align: center; 
    } 
.iconList li a { 
    margin-right: 0; 
    padding: 0 2px 0 0 !important; 
    } 
.iconList li .ui-link-inherit { 
    padding-left: 0px; 
    } 
.ui-li-thumb, .ui-li-icon { 
    max-width: 114px; max-height:114px; 
    } 
.iconList li img { 
    margin-right: 0; 
    width: 100%; 
    position: static !important; 
    float: none !important; 
    } 
.iconList li h3 { 
    /*color: #fff; 
    text-shadow: 0 1px 0 black; */ 
    display: block; 
    max-width: 80px; 
    position: static !important; 
    margin: 0 auto; 
    padding-top: 0; 
    font-size: /* inherit*/ .875em; 
    font-weight: normal; 
    text-align: center; 
    width: 100%; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    } 

CSS: Iconsprite

.iconsMenu { 
    width: 72px; 
    height: 72px; 
    background-image: url(../icons.png); 
      -moz-background-size: 1350px 200px; 
      -o-background-size: 1350px 200px; 
      -webkit-background-size: 1350px 200px; 
      background-size: 1350px 200px; 
} 
    .iconsMenu { background-position: 0px 0px; } 
    .i1 { background-position: -525px 0px; } 
    .i2 { background-position: -375px 0px; } 
    .i3 { background-position: -150px 0px; } 
    .i4 { background-position: -225px 0px; } 
    .i5 { background-position: -300px 0px; } 
    .i6 { background-position: -600px 0px; } 
    .i7 { background-position: -975px 0px; } 
    .i8 { background-position: -675px 0px; } 
    .i9 { background-position: -750px 0px; } 
    .i10 { background-position: -825px 0px; } 
    .i11 { background-position: -900px 0px; } 
    .i12 { background-position: -450px 0px; } 

@media all and (max-width: 480px) { 
    .iconsMenu { width: 57px; height: 57px;} 
    // change y to -72px for all icons, x as above 
    .i1 { background-position: 0px -72px;} 
    ... 
    } 

@media all and (max-width: 240px) { 
.iconsMenu { width: 35px; height: 35px; } 
    // change y to -129px for all icons, as above 
    .i1 { background-position: 0px -129px;} 
    ... 
    } 

Это дает вам трамплин типа iOS. Значки теперь измеряют 114x114 (ipad-res), но с использованием этого CSS они будут уменьшаться в зависимости от размера экрана из-за CSS sprite @ 480px и @ 240px.

Это довольно много копии & паста, ожидайте для рисования iconsprite, так что я думаю, вы должен мне обед :-)