Catégorie : Responsive Design

[Responsive design][SASS] Un tableau responsive en mode No More Tables (version 2017)

18/09/2017 / admin

Sources sur github.com – responsive-tables.

Source de départ: No more tables – This technique was developed by Chris Coyier (@chriscoyier) and described in his post Responsive Data Tables at css-tricks.com. While you’re there, you should probably check out the Responsive Tables Roundup post, which showcases all these techniques and more.

Demo JSFiddle.net

@mixin no-more-tables-core() {
  /* Force table to not be like tables anymore */
	table, 
	thead, 
	tbody, 
	th, 
	td, 
	tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		white-space: normal;
    &:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      white-space: nowrap;
      /* Label the data	*/
      content: attr(data-title);
    }
	}
}

@mixin no-more-tables-skin(
  $thead-width: 33.33333%,
  $border-width: 1px, 
  $border-color: #ccc,
  $padding-y: 8px,
  $padding-x: 10px,
  $text-align: left,
  $thead-font-weight: 700){
  tr {
    border: $border-width solid $border-color;
  }
  td { 
    /* Behave  like a "row" */
    border-bottom: $border-width solid $border-color; 
    padding-left: $thead-width; 
    text-align: $text-align;
    &:before {
      /* Top/left values mimic padding */
      top: $padding-y;
      left: $padding-x;
      width: $thead-width - ($thead-width/10); 
      padding-right: $padding-x; 
      text-align: $text-align;
      font-weight: $thead-font-weight;
    }
  }
}

.no-more-tables {
  @include no-more-tables-core();
  @include no-more-tables-skin();
}

@mixin no-more-tables-core() {

/* Force table to not be like tables anymore */

table,

thead,

tbody,

th,

td,

tr {

display: block;

}

/* Hide table headers (but not display: none;, for accessibility) */

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

}

td {

/* Behave like a "row" */

border: none;

position: relative;

white-space: normal;

&:before {

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

white-space: nowrap;

/* Label the data */

content: attr(data-title);

}

@mixin no-more-tables-skin(

$thead-width: 33.33333%,

$border-width: 1px,

$border-color: #ccc,

$padding-y: 8px,

$padding-x: 10px,

$text-align: left,

$thead-font-weight: 700){

tr {

border: $border-width solid $border-color;

}

td {

/* Behave like a "row" */

border-bottom: $border-width solid $border-color;

padding-left: $thead-width;

text-align: $text-align;

&:before {

/* Top/left values mimic padding */

top: $padding-y;

left: $padding-x;

width: $thead-width - ($thead-width/10);

padding-right: $padding-x;

text-align: $text-align;

font-weight: $thead-font-weight;

}

.no-more-tables {

@include no-more-tables-core();

@include no-more-tables-skin();

}

<div class="no-more-tables">
  <table>
    <thead>
      <tr>
        <th>Code</th>
        <th>Company</th>
        <th>Price</th>
        <th>Change</th>
        <th>Change %</th>
        <th>Open</th>
        <th>High</th>
        <th>Low</th>
        <th>Volume</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-title="Code">AAC</td>
        <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
        <td data-title="Price">$1.38</td>
        <td data-title="Change">-0.01</td>
        <td data-title="Change %">-0.36%</td>
        <td data-title="Open">$1.39</td>
        <td data-title="High">$1.39</td>
        <td data-title="Low">$1.38</td>
        <td data-title="Volume">9,395</td>
      </tr>
      <tr>
        <td data-title="Code">AAD</td>
        <td data-title="Company">ARDENT LEISURE GROUP</td>
        <td data-title="Price">$1.15</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">1.32%</td>
        <td data-title="Open">$1.14</td>
        <td data-title="High">$1.15</td>
        <td data-title="Low">$1.13</td>
        <td data-title="Volume">56,431</td>
      </tr>
      <tr>
        <td data-title="Code">AAX</td>
        <td data-title="Company">AUSENCO LIMITED</td>
        <td data-title="Price">$4.00</td>
        <td data-title="Change">-0.04</td>
        <td data-title="Change %">-0.99%</td>
        <td data-title="Open">$4.01</td>
        <td data-title="High">$4.05</td>
        <td data-title="Low">$4.00</td>
        <td data-title="Volume">90,641</td>
      </tr>
      <tr>
        <td data-title="Code">ABC</td>
        <td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>
        <td data-title="Price">$3.00</td>
        <td data-title="Change">  +0.06</td>
        <td data-title="Change %">2.04%</td>
        <td data-title="Open">$2.98</td>
        <td data-title="High">$3.00</td>
        <td data-title="Low">$2.96</td>
        <td data-title="Volume">862,518</td>
      </tr>
      <tr>
        <td data-title="Code">ABP</td>
        <td data-title="Company">ABACUS PROPERTY GROUP</td>
        <td data-title="Price">$1.91</td>
        <td data-title="Change">0.00</td>
        <td data-title="Change %">0.00%</td>
        <td data-title="Open">$1.92</td>
        <td data-title="High">$1.93</td>
        <td data-title="Low">$1.90</td>
        <td data-title="Volume">595,701</td>
      </tr>
      <tr>
        <td data-title="Code">ABY</td>
        <td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>
        <td data-title="Price">$0.77</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">2.00%</td>
        <td data-title="Open">$0.76</td>
        <td data-title="High">$0.77</td>
        <td data-title="Low">$0.76</td>
        <td data-title="Volume">54,567</td>
      </tr>
      <tr>
        <td data-title="Code">ACR</td>
        <td data-title="Company">ACRUX LIMITED</td>
        <td data-title="Price">$3.71</td>
        <td data-title="Change">  +0.01</td>
        <td data-title="Change %">0.14%</td>
        <td data-title="Open">$3.70</td>
        <td data-title="High">$3.72</td>
        <td data-title="Low">$3.68</td>
        <td data-title="Volume">191,373</td>
      </tr>
      <tr>
        <td data-title="Code">ADU</td>
        <td data-title="Company">ADAMUS RESOURCES LIMITED</td>
        <td data-title="Price">$0.72</td>
        <td data-title="Change">0.00</td>
        <td data-title="Change %">0.00%</td>
        <td data-title="Open">$0.73</td>
        <td data-title="High">$0.74</td>
        <td data-title="Low">$0.72</td>
        <td data-title="Volume">8,602,291</td>
      </tr>
      <tr>
        <td data-title="Code">AGG</td>
        <td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>
        <td data-title="Price" class="numeric">$7.81</td>
        <td data-title="Change" class="numeric">-0.22</td>
        <td data-title="Change %" class="numeric">-2.74%</td>
        <td data-title="Open" class="numeric">$7.82</td>
        <td data-title="High" class="numeric">$7.82</td>
        <td data-title="Low" class="numeric">$7.81</td>
        <td data-title="Volume" class="numeric">148</td>
      </tr>
      <tr>
        <td data-title="Code">AGK</td>
        <td data-title="Company">AGL ENERGY LIMITED</td>
        <td data-title="Price">$13.82</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">0.14%</td>
        <td data-title="Open">$13.83</td>
        <td data-title="High">$13.83</td>
        <td data-title="Low">$13.67</td>
        <td data-title="Volume">846,403</td>
      </tr>
      <tr>
        <td data-title="Code">AGO</td>
        <td data-title="Company">ATLAS IRON LIMITED</td>
        <td data-title="Price">$3.17</td>
        <td data-title="Change">-0.02</td>
        <td data-title="Change %">-0.47%</td>
        <td data-title="Open">$3.11</td>
        <td data-title="High">$3.22</td>
        <td data-title="Low">$3.10</td>
        <td data-title="Volume">5,416,303</td>
      </tr>
    </tbody>
  </table>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

<table>

<thead>

<tr>

<th>Company</th>

<th>Price</th>

<th>Change</th>

<th>Change %</th>

<th>Volume</th>

</tr>

</thead>

<tbody>

<tr>

<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>

</tr>

<tr>

<td data-title="Company">ARDENT LEISURE GROUP</td>

</tr>

<tr>

<td data-title="Company">AUSENCO LIMITED</td>

</tr>

<tr>

<td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>

</tr>

<tr>

<td data-title="Company">ABACUS PROPERTY GROUP</td>

</tr>

<tr>

<td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>

</tr>

<tr>

<td data-title="Company">ACRUX LIMITED</td>

</tr>

<tr>

<td data-title="Company">ADAMUS RESOURCES LIMITED</td>

</tr>

<tr>

<td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>

</tr>

<tr>

<td data-title="Company">AGL ENERGY LIMITED</td>

</tr>

<tr>

<td data-title="Company">ATLAS IRON LIMITED</td>

</tr>

</tbody>

</table>

</div>

jQuery (si besoin de fixer les hauteurs des rangées)

    $('.no-more-tables td').each(function(){
      var $this = $(this);
      var thisHeight = $this.height();
      var thisGetZero = $this.get(0);
      var thisBeforeHeightPx = window.getComputedStyle(thisGetZero, ':before').height;
      var thisBeforeHeight = parseInt(thisBeforeHeightPx, 10);
      var thisPaddingY = 8;

      if(thisHeight > thisBeforeHeight) {
        $this.css('height', thisHeight + (thisPaddingY*2) + 'px');
      }
      if(thisHeight < thisBeforeHeight) {
        $this.css('height', thisBeforeHeight + (thisPaddingY*2) + 'px');
      }
      else if(thisHeight == thisBeforeHeight) {
        $this.css('height', thisHeight + (thisPaddingY*2) + 'px');
      }
    });

$('.no-more-tables td').each(function(){

var $this = $(this);

var thisHeight = $this.height();

var thisGetZero = $this.get(0);

var thisBeforeHeightPx = window.getComputedStyle(thisGetZero, ':before').height;

var thisBeforeHeight = parseInt(thisBeforeHeightPx, 10);

var thisPaddingY = 8;

if(thisHeight > thisBeforeHeight) {

$this.css('height', thisHeight + (thisPaddingY*2) + 'px');

}

if(thisHeight < thisBeforeHeight) {

$this.css('height', thisBeforeHeight + (thisPaddingY*2) + 'px');

}

else if(thisHeight == thisBeforeHeight) {

$this.css('height', thisHeight + (thisPaddingY*2) + 'px');

}

});

[Responsive design][jQuery][SASS] Un tableau responsive en mode Flip Scroll (version 2017)

13/09/2017 / admin

Sources sur github.com – responsive-tables.

Source de départ: Responsive Tables – Flip Scroll. his technique was first published by David Bushell (@dbushell). For the full low down on this technique visit his post on the technique, Responsive Tables (2). While you’re there, it’s also worth checking out his responsive calendar proof of concept.

Demo jsFiddle.net; Même chose (optimisé par Anthony)

Attention: le système de mediaqueries SASS/JS dans le code qui va suivre est issu de Foundation 6.

<div class="table-flip-scroll">
  <table>
    <thead>
      <tr>
        <th scope="col">Brand</th>
        <th scope="col">Reference</th>
        <th scope="col">Ranges</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>NTN</td>
        <td>6205</td>
        <td>Single row tapered roller bearings</td>
      </tr>
      <tr>
        <td>SNR</td>
        <td>6205, 6205, 6205, 6205, 6205</td>
        <td>Single row tapered roller bearings</td>
      </tr>
      <tr>
        <td>SNR</td>
        <td>6205</td>
        <td>
          <ul>
            <li>Single row tapered roller bearings</li>
            <li>Single row deep groove ball bearings</li>
            <li>Single row tapered roller bearings</li>
            <li>Single row deep groove ball bearings</li>
            <li>Single row tapered roller bearings</li>
          </ul>            
        </td>
      </tr>
      <tr>
        <td>SNR</td>
        <td>6205.E</td>
        <td>
          <ul>
            <li>Single row tapered roller bearings</li>
            <li>Single row deep groove ball bearings</li>
          </ul>
      </tr>
    </tbody>
  </table>
</div>

<table>

<thead>

<tr>

<th scope="col">Brand</th>

<th scope="col">Reference</th>

<th scope="col">Ranges</th>

</tr>

</thead>

<tbody>

<tr>

<td>Single row tapered roller bearings</td>

</tr>

<tr>

<td>Single row tapered roller bearings</td>

</tr>

<tr>

<td>

<ul>

<li>Single row tapered roller bearings</li>

<li>Single row deep groove ball bearings</li>

<li>Single row tapered roller bearings</li>

<li>Single row deep groove ball bearings</li>

<li>Single row tapered roller bearings</li>

</ul>

</td>

</tr>

<tr>

<td>

<ul>

<li>Single row tapered roller bearings</li>

<li>Single row deep groove ball bearings</li>

</ul>

</tr>

</tbody>

</table>

</div>

/*
 * jQuery Table Flip Scroll plug-in
 */
$.tableFlipScroll = function(selector){
  var obj = $(selector);

  function matchCellsHeights(columnIndex){
    columnIndex++
    var columnCellsHeights = $.map(obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')'), function(val){
      return $(val).outerHeight();
    });

    var columnHighestCell = Math.max.apply(null, columnCellsHeights);

    obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')').css('height', columnHighestCell +'px');      
  }

  var $th = obj.find('th');
  $th.each(function(index){
    matchCellsHeights(index);
  });
}



/*
 * Responsive Product List Table
 */
if($('.table-flip-scroll').length == 1){
  if(getCurrentMediaQuery === 'small' || getCurrentMediaQuery === 'medium'){
    $('body').css('border', '12px solid navy');
    $.tableFlipScroll('.table-flip-scroll');
  }
}

* jQuery Table Flip Scroll plug-in

$.tableFlipScroll = function(selector){

var obj = $(selector);

function matchCellsHeights(columnIndex){

columnIndex++

var columnCellsHeights = $.map(obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')'), function(val){

return $(val).outerHeight();

});

var columnHighestCell = Math.max.apply(null, columnCellsHeights);

obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')').css('height', columnHighestCell +'px');

}

var $th = obj.find('th');

$th.each(function(index){

matchCellsHeights(index);

});

}

* Responsive Product List Table

if($('.table-flip-scroll').length == 1){

if(getCurrentMediaQuery === 'small' || getCurrentMediaQuery === 'medium'){

$('body').css('border', '12px solid navy');

$.tableFlipScroll('.table-flip-scroll');

}

@mixin table-flip-scroll-core() {
  table { 
    display: block;
    position: relative;
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0;
    thead {
      display: block; 
      float: left; 
      tr {
        display: block;
      }
    }
    tbody { 
      display: block; 
      width: auto; 
      position: relative; 
      overflow-x: auto; 
      white-space: nowrap;
      tr {
        display: inline-block; 
        vertical-align: top; 
      }
    }
    th,
    td {
      margin: 0; 
      vertical-align: top; 
      display: block;
      text-align: left;
    }
  }
}

@mixin table-flip-scroll-skin(
  $thead-width: 33.33333%, 
  $border-width: 1px, 
  $border-color: #ccc) {
  table {
    thead {
      width: $thead-width;
    }
    th {
      border-bottom: 0;
      border-left: 0;
    }
    td {
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
    }
    tbody {
      tr {
        border-left: $border-width solid $border-color;
      }
    }
    th:last-child,
    td:last-child {
      border-bottom: $border-width solid $border-color;
    }
  }
}

@include breakpoint(medium down) {
  .table-flip-scroll {
    @include table-flip-scroll-core();
    @include table-flip-scroll-skin();
    .thead-second-row,
    .sort {
      display: none;
    } 
  }
}

@mixin table-flip-scroll-core() {

table {

display: block;

position: relative;

width: 100%;

border-collapse: collapse;

border-spacing: 0;

thead {

display: block;

float: left;

tr {

display: block;

}

tbody {

display: block;

width: auto;

position: relative;

overflow-x: auto;

white-space: nowrap;

tr {

display: inline-block;

vertical-align: top;

}

th,

td {

margin: 0;

vertical-align: top;

display: block;

text-align: left;

}

@mixin table-flip-scroll-skin(

$thead-width: 33.33333%,

$border-width: 1px,

$border-color: #ccc) {

table {

thead {

width: $thead-width;

}

th {

border-bottom: 0;

border-left: 0;

}

td {

border-left: 0;

border-right: 0;

border-bottom: 0;

}

tbody {

tr {

border-left: $border-width solid $border-color;

}

th:last-child,

td:last-child {

border-bottom: $border-width solid $border-color;

}

@include breakpoint(medium down) {

.table-flip-scroll {

@include table-flip-scroll-core();

@include table-flip-scroll-skin();

.thead-second-row,

.sort {

display: none;

}

[CSS] Des mediaqueries adaptées à chaque marque et version de smartphones et tablettes

01/09/2017 / admin

Principalement Apple et Samsung, mais pas que … Device Specific CSS Media Queries Collection.

Version de début septembre 2017; vérifier le git pour la version la plus à jour.

/*
  Based on:
  1. http://stephen.io/mediaqueries
  2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/

/* iPhone 6 in portrait & landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
  
}

/* iPhone 6 in landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
  
}

/* iPhone 6 in portrait */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) {
  
}

/* iPhone 6 Plus in portrait & landscape */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {
  
}

/* iPhone 6 Plus in landscape */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) {
  
}

/* iPhone 6 Plus in portrait */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) {
  
}

/* iPhone 5 & 5S in portrait & landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
  
}

/* iPhone 5 & 5S in landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
  
}

/* iPhone 5 & 5S in portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
  
}

/* 
  iPhone 2G, 3G, 4, 4S Media Queries
  It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
*/

/* iPhone 2G-4S in portrait & landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  
}

/* iPhone 2G-4S in landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) {
  
}

/* iPhone 2G-4S in portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) {
  
}

/* iPad in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
  
}

/* iPad in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  
}

/* iPad in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  
}

/* Galaxy S3 portrait and landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Galaxy S3 portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Galaxy S3 landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* Galaxy S4 portrait and landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Galaxy S4 portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Galaxy S4 landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* Galaxy S5 portrait and landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Galaxy S5 portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Galaxy S5 landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* HTC One portrait and landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* HTC One portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* HTC One landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/*
  iPad 3 & 4 Media Queries
  If you're looking to target only 3rd and 4th generation Retina iPads 
  (or tablets with similar resolution) to add @2x graphics,
  or other features for the tablet's Retina display, use the following media queries.
*/

/* Retina iPad in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
  
}

/* Retina iPad in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
  
}

/* Retina iPad in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
  
}

/*
  iPad 1 & 2 Media Queries
  If you're looking to supply different graphics or choose different typography 
  for the lower resolution iPad display, the media queries below will work 
  like a charm in your responsive design!
*/

/* iPad 1 & 2 in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad 1 & 2 in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad 1 & 2 in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad mini in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad mini in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad mini in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* Galaxy Tab 10.1 portrait and landscape */
@media
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Galaxy Tab 10.1 portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Galaxy Tab 10.1 landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

/* Asus Nexus 7 portrait and landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Asus Nexus 7 portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Asus Nexus 7 landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

/* Kindle Fire HD 7" portrait and landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Kindle Fire HD 7" portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
    
}

/* Kindle Fire HD 7" landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* Kindle Fire HD 8.9" portrait and landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Kindle Fire HD 8.9" portrait */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
    
}

/* Kindle Fire HD 8.9" landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* Laptops non-retina screens */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    
}

/* Laptops retina screens */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) {
    
}

/* Apple Watch */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 

}

/* Moto 360 Watch */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

Based on:

1. http://stephen.io/mediaqueries

2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

/* iPhone 6 in portrait & landscape */

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px) {

}

/* iPhone 6 in landscape */

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px)

and (orientation : landscape) {

}

/* iPhone 6 in portrait */

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px)

and (orientation : portrait) {

}

/* iPhone 6 Plus in portrait & landscape */

@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px) {

}

/* iPhone 6 Plus in landscape */

@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px)

and (orientation : landscape) {

}

/* iPhone 6 Plus in portrait */

@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px)

and (orientation : portrait) {

}

/* iPhone 5 & 5S in portrait & landscape */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px) {

}

/* iPhone 5 & 5S in landscape */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : landscape) {

}

/* iPhone 5 & 5S in portrait */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : portrait) {

}

iPhone 2G, 3G, 4, 4S Media Queries

It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.

/* iPhone 2G-4S in portrait & landscape */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

}

/* iPhone 2G-4S in landscape */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px)

and (orientation : landscape) {

}

/* iPhone 2G-4S in portrait */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px)

and (orientation : portrait) {

}

/* iPad in portrait & landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

}

/* iPad in landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

}

/* iPad in portrait */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

}

/* Galaxy S3 portrait and landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2) {

}

/* Galaxy S3 portrait */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Galaxy S3 landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* Galaxy S4 portrait and landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* Galaxy S4 portrait */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Galaxy S4 landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

/* Galaxy S5 portrait and landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* Galaxy S5 portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Galaxy S5 landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

/* HTC One portrait and landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* HTC One portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* HTC One landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

iPad 3 & 4 Media Queries

If you're looking to target only 3rd and 4th generation Retina iPads

(or tablets with similar resolution) to add @2x graphics,

or other features for the tablet's Retina display, use the following media queries.

/* Retina iPad in portrait & landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Retina iPad in landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Retina iPad in portrait */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 2) {

}

iPad 1 & 2 Media Queries

If you're looking to supply different graphics or choose different typography

for the lower resolution iPad display, the media queries below will work

like a charm in your responsive design!

/* iPad 1 & 2 in portrait & landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad 1 & 2 in landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad 1 & 2 in portrait */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad mini in portrait & landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad mini in landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad mini in portrait */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Galaxy Tab 10.1 portrait and landscape */

@media

(min-device-width: 800px)

and (max-device-width: 1280px) {

}

/* Galaxy Tab 10.1 portrait */

@media

(max-device-width: 800px)

and (orientation: portrait) {

}

/* Galaxy Tab 10.1 landscape */

@media

(max-device-width: 1280px)

and (orientation: landscape) {

}

/* Asus Nexus 7 portrait and landscape */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Asus Nexus 7 portrait */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332)

and (orientation: portrait) {

}

/* Asus Nexus 7 landscape */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332)

and (orientation: landscape) {

}

/* Kindle Fire HD 7" portrait and landscape */

@media only screen

and (min-device-width: 800px)

and (max-device-width: 1280px)

and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Kindle Fire HD 7" portrait */

@media only screen

and (min-device-width: 800px)

and (max-device-width: 1280px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: portrait) {

}

/* Kindle Fire HD 7" landscape */

@media only screen

and (min-device-width: 800px)

and (max-device-width: 1280px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: landscape) {

}

/* Kindle Fire HD 8.9" portrait and landscape */

@media only screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Kindle Fire HD 8.9" portrait */

@media only screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: portrait) {

}

/* Kindle Fire HD 8.9" landscape */

@media only screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: landscape) {

}

/* Laptops non-retina screens */

@media screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Laptops retina screens */

@media screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 2)

and (min-resolution: 192dpi) {

}

/* Apple Watch */

@media

(max-device-width: 42mm)

and (min-device-width: 38mm) {

}

/* Moto 360 Watch */

@media

(max-device-width: 218px)

and (max-device-height: 281px) {

}

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

19/08/2016 / admin

Demo en live sur jsFiddle.net.

Fichier global-vars.js :

// Breakpoints
	// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/
	// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss
	// $screen-xs: 320px;
	// $screen-sm: 768px;
	// $screen-md: 1025px;
	// $screen-lg: 1225px;
	var bs_screen_sm_min = '768'; // tablet starts @768px
		bs_screen_md_min = '1025'; // desktop starts @1025px
		bs_screen_lg_min = '1225'; // large desktop starts @1225px
		bs_screen_xs_max = bs_screen_sm_min - 1; // 767px
		bs_screen_sm_max = bs_screen_md_min - 1; // 1024px
		bs_screen_md_max = bs_screen_lg_min - 1; // 1224px
  
	// enquire JS breakpoints
		bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';
		bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';
		bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';
		bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';
		bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';
		bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

// Breakpoints

// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/

// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss

// $screen-xs: 320px;

// $screen-sm: 768px;

// $screen-md: 1025px;

// $screen-lg: 1225px;

var bs_screen_sm_min = '768'; // tablet starts @768px

bs_screen_md_min = '1025'; // desktop starts @1025px

bs_screen_lg_min = '1225'; // large desktop starts @1225px

bs_screen_xs_max = bs_screen_sm_min - 1; // 767px

bs_screen_sm_max = bs_screen_md_min - 1; // 1024px

bs_screen_md_max = bs_screen_lg_min - 1; // 1224px

// enquire JS breakpoints

bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';

bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';

bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';

bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';

bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';

bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

Fichier global-mediaqueries.js :

+ function($){
  'use strict';

  $(document).ready(function(){
    // enquire JS
    enquire.register(bpMobile, {
      match : function() {
       // console.log('bpMobile');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmartphone, {
      match : function() {
        // console.log('bpSmartphone');
      },
      unmatch : function() {}
    });

    enquire.register(bpTablet, {
      match : function() {
        // console.log('bpTablet');
      },
      unmatch : function() {}
    });

    enquire.register(bpDesktop, {
      match : function() {
        // console.log('bpDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmallDesktop, {
      match : function() {
        // console.log('bpSmallDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpLargeDesktop, {
      match : function() {
        // console.log('bpLargeDesktop');
      },
      unmatch : function() {}
    });
  });
  
}(jQuery);

+ function($){

'use strict';

$(document).ready(function(){

// enquire JS

enquire.register(bpMobile, {

match : function() {

// console.log('bpMobile');

unmatch : function() {}

});

enquire.register(bpSmartphone, {

match : function() {

// console.log('bpSmartphone');

unmatch : function() {}

});

enquire.register(bpTablet, {

match : function() {

// console.log('bpTablet');

unmatch : function() {}

});

enquire.register(bpDesktop, {

match : function() {

// console.log('bpDesktop');

unmatch : function() {}

});

enquire.register(bpSmallDesktop, {

match : function() {

// console.log('bpSmallDesktop');

unmatch : function() {}

});

enquire.register(bpLargeDesktop, {

match : function() {

// console.log('bpLargeDesktop');

unmatch : function() {}

});

}(jQuery);

[Magento 1.9] Afficher un nombre de produits par rangée différent en fonction du viewport dans la liste de catégories/produits du thème RWD

11/12/2014 / admin

Méthode #1 : vous avez une contrainte responsive

Une solution full CSS qui gère le nombre de produits par rangée en fonction du viewport.
Cette solution repose sur l’exploitation du mixin SASS product-grid natif au thème Rwd et sur la modification de 2 fichiers :

app/design/frontend/rwd/yourpackage/template/catalog/product/list.phtml pour l’ajout de classes supplémentaires nécessaires à l’activation des media-queries
skin/frontend/rwd/yourpackage/scss/module/_product-list.scss pour l’ajout des mediaqueries

list.phtml

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

1	<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

…et ajouter les classes suivantes :

<ul class="products-grid products-grid--max-1-col products-grid--max-2-col products-grid--max-3-col products-grid--max-<?php echo $_columnCount; ?>-col">

1	<ul class="products-grid products-grid--max-1-col products-grid--max-2-col products-grid--max-3-col products-grid--max-<?php echo $_columnCount; ?>-col">

Remarque : la logique est la même que celle du système de grid responsive proposé par Bootstrap pour ceux qui connaissent.

_product-list.scss

Pour info : les variables prédéfinies à exploiter

$product-column-spacing : espace entre les colonnes (valeur en px).
$productsGridActionHeight : hauteur d’un item produit (valeur en px – si la hauteur de l’élément .product-info change, cette valeur devrait être ajustée).

Repérer le mixin suivant :

@include bp(min-width, 960px) {
    @include product-grid(4, 960);
    @include product-grid(5, 960);
    @include product-grid(6, 960);
}

@include bp(min-width, 960px) {

@include product-grid(4, 960);

@include product-grid(5, 960);

@include product-grid(6, 960);

}

…et ajouter juste en dessous :

@include bp(min-width, 993px) {
    @include product-grid(3, 993);
}

@include bp(max-width, 992px) {
    @include product-grid(2, 992);
}

@include bp(max-width, 360px) {
    @include product-grid(1, 360);
}

@include bp(min-width, 993px) {

@include product-grid(3, 993);

}

@include bp(max-width, 992px) {

@include product-grid(2, 992);

}

@include bp(max-width, 360px) {

@include product-grid(1, 360);

}

Méthode #2 : vous n’avez pas de contrainte responsive

Prendre la main sur le nombre de produits par rangée en modifiant un paramètre de layout.

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et localiser la ligne suivante :

<!-- Since the addColumnCountLayoutDepend does not work, we are manually setting the max columns -->
<action method="setColumnCount"><count>3</count></action>

1 2	<!-- Since the addColumnCountLayoutDepend does not work, we are manually setting the max columns --> <action method="setColumnCount"><count>3</count></action>

Modifier la valeur de <count /> selon le nombre de colonnes souhaité.

Méthode #3 (bidouille – ne pas utiliser)

Source : How to change product column quantity in Magento

Il faut modifier 2 fichiers :

app/design/frontend/default/yourtheme/layout/catalog.xml
app/design/frontend/default/yourtheme/template/catalog/product/list.phtml

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et ajouter les lignes suivantes (ou modifiez les si elles existent déjà) :

<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>

<action method="setTemplate"><template>page/1column.phtml</template></action>

</reference>

Remarque : vous pouvez cibler le template de votre choix en modifiant la valeur entre la balise <template />.

list.phtml :

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

<?php $_columnCount = $this->getColumnCount(); ?>

1	<?php $_columnCount = $this->getColumnCount(); ?>

…et la remplacer par :

<?php $_columnCount = 3  ?>

1	<?php $_columnCount = 3 ?>

Remarque : vous pouvez choisir le nombre de colonnes par rangée à affocher en modifiant la valeur de $_columnCount.

[jQuery][Responsive Design] Exécuter des fonctions en se basant sur les media queries CSS plutôt que sur la largeur de la fenêtre du navigateur

29/08/2014 / admin

Source : Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width.
Ressources en ligne

Problème: jQuery $(window).width() et les Media Queries CSS3 ne sont pas toujours très en phase.

Lorsqu’on utilise Firefox, IE ou Opéra pour naviguer sur un site responsive, on peut remarquer au redimensionnement en largeur de la fenêtre un léger décalage dans l’exécution d’une media querie par rapport avec un javascript auxquels on a assigné des break-points similaires.

Cet différence provient d’une inconsistence dans la prise en compte de la présence des scroll-barres verticales par les largeurs déclarées pour les media queries.

Ce bug a pour effet qu’une valeur de largeur identique déclarée dans une media query et par jQuery ne s’exécutera pas tout-à-fait au même moment.

Solution: utiliser jQuery pour détecter un changement sur une propriété CSS plutôt que sur la largeur de la fenêtre du navigateur.

Plutôt que de mesurer la largeur d’écran au redimensionnement de la fenêtre, je vérifie si un changement de règle CSS s’est opéré par le biais d’une media query. De cette façon, sans se préoccuper de la manière dont le navigateur prend en charge la largeur de la scroll-barre verticale, le code jQuery et la media query seront exécutés au même moment.

Supposons que la classe « .sampleClass » possède une règle « float: left; » avant la media query et une règle « float: none; » après. Au redimensionnement de la fenêtre, je vérifie un changement de cette règle.

jQuery

$(window).resize(function(){	
	if ($(".sampleClass").css("float") == "none" ){
		// your code here
	}
});

$(window).resize(function(){

if ($(".sampleClass").css("float") == "none" ){

// your code here

}

});

Ou (versions les plus récentes de jQuery 1.x) :

$(window).on('resize', function(){	
	if ($(".sampleClass").css("float") == "none" ){
		// your code here
	}
});

$(window).on('resize', function(){

if ($(".sampleClass").css("float") == "none" ){

// your code here

}

});

CSS

.sampleClass {float:left;}
@media only screen and (max-width: 800px){
	.sampleClass {float:none;}
}

.sampleClass {float:left;}

@media only screen and (max-width: 800px){

.sampleClass {float:none;}

}

Ressources en ligne

Importing CSS Breakpoints Into JavaScript
matchMedia() polyfill – test whether a CSS media type or media query applies
enquire.js – a lightweight, pure JavaScript library for responding to CSS media queries. JavaScript callbacks for media queries matching and unmatching.
Tutoriel (en anglais) sur l’utilisation d’enquire.js.

[jQuery][Superfish] Activer/désactiver Superfish au redimensionnement de la fenêtre du navigateur

26/06/2014 / admin

Superfish intègre une méthode destroy (depuis la version 1.7.3 au moins… à vérifier pour des versions antérieures mais dans le cas contraire, mettre à jour son plug-in) qu’on peut appeler en fonction de la largeur du viewport. La navigation peut ensuite être re-stylée via CSS et les mediaqueries.

Avec enquire.js

enquire.register("screen and (max-width: 767px)", {
  match : function() {
    jQuery(document).ready(function(){
      jQuery('ul.sf-menu').superfish('destroy');
    });
  },
  unmatch : function() {
    jQuery(document).ready(function(){
      jQuery('ul.sf-menu').superfish({ //options });
    });
  }
});

enquire.register("screen and (max-width: 767px)", {

match : function() {

jQuery(document).ready(function(){

jQuery('ul.sf-menu').superfish('destroy');

});

unmatch : function() {

jQuery(document).ready(function(){

jQuery('ul.sf-menu').superfish({ //options });

});

}

});

Sans enquire.js

Source : http://stackoverflow.com/questions/6748301/disable-superfish-on-resize-event

var sf, body;
var breakpoint = 600;
jQuery(document).ready(function($) {
    body = $('body');
    sf = $('ul.sf-menu');
    if(body.width() >= breakpoint) {
      // enable superfish when the page first loads if we're on desktop
      sf.superfish();
    }
    $(window).resize(function() {
        if(body.width() >= breakpoint && !sf.hasClass('sf-js-enabled')) {
            // you only want SuperFish to be re-enabled once (sf.hasClass)
            sf.superfish('init');
        } else if(body.width() < breakpoint) {
            // smaller screen, disable SuperFish
            sf.superfish('destroy');
        }
    });
});

var sf, body;

var breakpoint = 600;

jQuery(document).ready(function($) {

body = $('body');

sf = $('ul.sf-menu');

if(body.width() >= breakpoint) {

// enable superfish when the page first loads if we're on desktop

sf.superfish();

}

$(window).resize(function() {

if(body.width() >= breakpoint && !sf.hasClass('sf-js-enabled')) {

// you only want SuperFish to be re-enabled once (sf.hasClass)

sf.superfish('init');

} else if(body.width() < breakpoint) {

// smaller screen, disable SuperFish

sf.superfish('destroy');

}

});

[CSS] Des tableaux responsives en full CSS

09/06/2014 / admin

Ressources en ligne :

Responsive Data Tables sur CSS Tricks. Un tableau qui permute les en-têtes sur la 1ère colonne en mobile.
Attention, ne fonctionnera PAS pour des sites multilingues, à moins peut-être de passer le contenu localisé (texte inclus dans la CSS pour cet exemple) via du JS peut-être?
CSS Tricks – Responsive Data Table Roundup
Demo of Tablesaw : A group of plugins for responsive tables.
Responsive table with vertical and horizontal headers, 2 (voir le CodePen)
Responsive Tables (Zurb) avec du JS.

Deux exemples maison pour un tableau comparatif :

Tableau comparatif dont les éléments à comparer deviennent horizontalement scrollables en vue mobile

Simulation JSfiddle.net (avec code source propre), demo.

Tableau comparatif dont les éléments à comparer se désolidarisent pour s’empiler en vue mobile

Nouveau: une version plus flexible basée sur Flexbox (sources core). https://jsfiddle.net/frontenddeveloper/ay5v30p5/

…et la gueule de cette version Flexbox sous IE11:

Simulation JSfiddle.net (avec code source propre). Attention : la partie commentée du code CSS ne semble pas adaptée à notre exemple.

En utilisant display: inline-block; sur les rangées et white-space: nowrap; sur le corps du tableau :

Source et simulation (Flip Scroll) : http://elvery.net/demo/responsive-tables/#flip-scroll.

<table>
<thead>
<tr>
<th>Code</th>
<th>Company</th>
<th class="numeric">Price</th>
<th class="numeric">Change</th>
<th class="numeric">Change %</th>
<th class="numeric">Open</th>
<th class="numeric">High</th>
<th class="numeric">Low</th>
<th class="numeric">Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>AAC</td>
<td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
<td class="numeric">$1.38</td>
<td class="numeric">-0.01</td>
<td class="numeric">-0.36%</td>
<td class="numeric">$1.39</td>
<td class="numeric">$1.39</td>
<td class="numeric">$1.38</td>
<td class="numeric">9,395</td>
</tr>
</tbody>
</table>

<table>

<thead>

<tr>

<th>Company</th>

<th class="numeric">Price</th>

<th class="numeric">Change</th>

<th class="numeric">Change %</th>

<th class="numeric">Volume</th>

</tr>

</thead>

<tbody>

<tr>

<td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>

</tr>

</tbody>

</table>

@media only screen and (max-width: 800px) {
#flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
#flip-scroll * html .cf { zoom: 1; }
#flip-scroll *:first-child+html .cf { zoom: 1; }
#flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }
 
#flip-scroll th,
#flip-scroll td { margin: 0; vertical-align: top; }
#flip-scroll th { text-align: left; }
#flip-scroll table { display: block; position: relative; width: 100%; }
#flip-scroll thead { display: block; float: left; }
#flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
#flip-scroll thead tr { display: block; }
#flip-scroll th { display: block; text-align: right; }
#flip-scroll tbody tr { display: inline-block; vertical-align: top; }
#flip-scroll td { display: block; min-height: 1.25em; text-align: left; }
 
 
/* sort out borders */
 
#flip-scroll th { border-bottom: 0; border-left: 0; }
#flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
#flip-scroll tbody tr { border-left: 1px solid #babcbf; }
#flip-scroll th:last-child,
#flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
}

@media only screen and (max-width: 800px) {

#flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

#flip-scroll * html .cf { zoom: 1; }

#flip-scroll *:first-child+html .cf { zoom: 1; }

#flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }

#flip-scroll th,

#flip-scroll td { margin: 0; vertical-align: top; }

#flip-scroll th { text-align: left; }

#flip-scroll table { display: block; position: relative; width: 100%; }

#flip-scroll thead { display: block; float: left; }

#flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }

#flip-scroll thead tr { display: block; }

#flip-scroll th { display: block; text-align: right; }

#flip-scroll tbody tr { display: inline-block; vertical-align: top; }

#flip-scroll td { display: block; min-height: 1.25em; text-align: left; }

/* sort out borders */

#flip-scroll th { border-bottom: 0; border-left: 0; }

#flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }

#flip-scroll tbody tr { border-left: 1px solid #babcbf; }

#flip-scroll th:last-child,

#flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }

}

Récupérer les hauteurs (en px) de chaque cellule d’en-tête, les stocker dans un tableau et les réattribuer aux cellules correspondantes dans le corps du tableau.

    var listHeight = $.map($('.thead-first-row').children('th:not(.large)'), function(val){
      return $(val).outerHeight();
    });
    // console.log(listHeight);

    $('.table-flip-scroll tbody tr:not(.sort)').each(function(){
      var count = 0;
      $(this).children('td').each(function(){
        $(this).css('height', listHeight[count ++] + 'px');
      });
    });

var listHeight = $.map($('.thead-first-row').children('th:not(.large)'), function(val){

return $(val).outerHeight();

});

// console.log(listHeight);

$('.table-flip-scroll tbody tr:not(.sort)').each(function(){

var count = 0;

$(this).children('td').each(function(){

$(this).css('height', listHeight[count ++] + 'px');

});

Version SASS de flip-scroll

/* flip-scroll table */
.flip-scroll {
  .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
  * html .cf { zoom: 1; }
  *:first-child+html .cf { zoom: 1; }

  table { width: 100%; border-collapse: collapse; border-spacing: 0; }
  th,
  td { margin: 0; vertical-align: top; }
  th { text-align: left; }

  table { display: block; position: relative; width: 100%; }
  thead { display: block; float: left; }
  tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
  thead tr { display: block; }
  th { display: block; text-align: right; }
  tbody tr { display: inline-block; vertical-align: top; }
  td { display: block; min-height: 1.25em; text-align: left; }

  /* sort out borders */
  th { border-bottom: 0; border-left: 0; }
  td { border-left: 0; border-right: 0; border-bottom: 0; }
  tbody tr { border-left: 1px solid #babcbf; }
  th:last-child,
  td:last-child { border-bottom: 1px solid #babcbf; }
}

/* flip-scroll table */

.flip-scroll {

.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

* html .cf { zoom: 1; }

*:first-child+html .cf { zoom: 1; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }

th,

td { margin: 0; vertical-align: top; }

th { text-align: left; }

table { display: block; position: relative; width: 100%; }

thead { display: block; float: left; }

tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }

thead tr { display: block; }

th { display: block; text-align: right; }

tbody tr { display: inline-block; vertical-align: top; }

td { display: block; min-height: 1.25em; text-align: left; }

/* sort out borders */

th { border-bottom: 0; border-left: 0; }

td { border-left: 0; border-right: 0; border-bottom: 0; }

tbody tr { border-left: 1px solid #babcbf; }

th:last-child,

td:last-child { border-bottom: 1px solid #babcbf; }

}

Version SASS de No More Tables

Source : http://elvery.net/demo/responsive-tables/#no-more-tables.

Attention : ajouter un !important à td { padding-left: 50%; } si vous utilisez Twitter Bootstrap pour styler vos tableaux.

Ajout d’une classe .ignore à placer sur les <td /> qui ne doivent pas faire l’objet d’une transformation. La rangée du tableau transformé n’aura alors pas de libellé (en-tête).

/* no-more-tables table */
.no-more-tables {
  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid $table-border-color;
    margin-bottom: $padding-base-vertical;
  }

  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid $table-border-color;
    position: relative;
    padding-left: 50% !important;
    white-space: normal;
    text-align:left;

    &.ignore {
      padding-left: $table-cell-padding !important;
    }
  }

  td:not(.ignore):before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: $table-cell-padding;
    left: $table-cell-padding;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
  }

  /* Label the data */
  td:not(.ignore):before {
    content: attr(data-title) ' :';
    color: $brand-quaternary;
  }
}

@media (min-width: $screen-xs1) {
  .no-more-tables {
    td {
      padding-left: 30% !important;
    }
    td:not(.ignore):before {
      width: 25%;
    }
  }
}

/* no-more-tables table */

.no-more-tables {

/* Force table to not be like tables anymore */

table,

thead,

tbody,

th,

td,

tr {

display: block;

}

/* Hide table headers (but not display: none;, for accessibility) */

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

}

tr {

border: 1px solid $table-border-color;

margin-bottom: $padding-base-vertical;

}

td {

/* Behave like a "row" */

border: none;

border-bottom: 1px solid $table-border-color;

position: relative;

padding-left: 50% !important;

white-space: normal;

text-align:left;

&.ignore {

padding-left: $table-cell-padding !important;

}

td:not(.ignore):before {

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

top: $table-cell-padding;

left: $table-cell-padding;

width: 45%;

padding-right: 10px;

white-space: nowrap;

text-align:left;

font-weight: bold;

}

/* Label the data */

td:not(.ignore):before {

content: attr(data-title) ' :';

color: $brand-quaternary;

}

@media (min-width: $screen-xs1) {

.no-more-tables {

td {

padding-left: 30% !important;

}

td:not(.ignore):before {

width: 25%;

}

En utilisant display: block; et les data attributes HTML5 :

Source : http://codepen.io/geoffyuen/pen/FCBEg.

Simulation : http://jsfiddle.net/frontenddeveloper/gf7R3/.

<table class="rwd-table">
  <tr>
    <th>Movie Title</th>
    <th>Genre</th>
    <th>Year</th>
    <th>Gross</th>
  </tr>
  <tr>
    <td data-th="Movie Title">Star Wars</td>
    <td data-th="Genre">Adventure, Sci-fi</td>
    <td data-th="Year">1977</td>
    <td data-th="Gross">$460,935,665</td>
  </tr>
  <tr>
    <td data-th="Movie Title">Howard The Duck</td>
    <td data-th="Genre">"Comedy"</td>
    <td data-th="Year">1986</td>
    <td data-th="Gross">$16,295,774</td>
  </tr>
  <tr>
    <td data-th="Movie Title">American Graffiti</td>
    <td data-th="Genre">Comedy, Drama</td>
    <td data-th="Year">1973</td>
    <td data-th="Gross">$115,000,000</td>
  </tr>
</table>

<tr>

<th>Movie Title</th>

<th>Genre</th>

<th>Gross</th>

</tr>

<tr>

<td data-th="Genre">Adventure, Sci-fi</td>

</tr>

<tr>

<td data-th="Movie Title">Howard The Duck</td>

<td data-th="Genre">"Comedy"</td>

</tr>

<tr>

<td data-th="Movie Title">American Graffiti</td>

<td data-th="Genre">Comedy, Drama</td>

</tr>

</table>

.rwd-table {
  min-width: 300px;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:first-child {
  padding-top: .5em;
}
.rwd-table td:last-child {
  padding-bottom: .5em;
}
.rwd-table td:before {
  content: attr(data-th) ": ";
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 480px) {
  .rwd-table td:before {
    display: none;
  }
}
.rwd-table th, .rwd-table td {
  text-align: left;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0;
  }
}

.rwd-table {

min-width: 300px;

}

.rwd-table th {

display: none;

}

.rwd-table td {

display: block;

}

.rwd-table td:first-child {

padding-top: .5em;

}

.rwd-table td:last-child {

padding-bottom: .5em;

}

.rwd-table td:before {

content: attr(data-th) ": ";

width: 6.5em;

display: inline-block;

}

@media (min-width: 480px) {

.rwd-table td:before {

display: none;

}

.rwd-table th, .rwd-table td {

text-align: left;

}

@media (min-width: 480px) {

.rwd-table th, .rwd-table td {

display: table-cell;

padding: .25em .5em;

}

.rwd-table th:first-child, .rwd-table td:first-child {

padding-left: 0;

}

.rwd-table th:last-child, .rwd-table td:last-child {

padding-right: 0;

}

Mixin SASS

@mixin rwd-table() {
  min-width: 300px;
  th {
    display: none;
  }
  td {
    display: block;
    padding: 5px 10px !important;
  }
  td:first-child {
    // padding-top: .5em;
  }
  td:last-child {
    // padding-bottom: .5em;
  }
  td:before {
    // content: attr(data-th) ": ";
    content: attr(data-th);
    width: 6.5em;
    display: inline-block;
    font-family: $site-bold-font-family;
    color: $site-font-color-darker;
  }
  @media (min-width: $screen-sm-min) {
    td:before {
      display: none;
    }
  }
  th, td {
    text-align: left;
  }
  @media (min-width: $screen-sm-min) {
    th, td {
      display: table-cell;
      // padding: .25em .5em;
    }
    th:first-child, td:first-child {
      padding-left: 0;
    }
    th:last-child, td:last-child {
      padding-right: 0;
    }
  }
}

@mixin rwd-table() {

min-width: 300px;

th {

display: none;

}

td {

display: block;

padding: 5px 10px !important;

}

td:first-child {

// padding-top: .5em;

}

td:last-child {

// padding-bottom: .5em;

}

td:before {

// content: attr(data-th) ": ";

content: attr(data-th);

width: 6.5em;

display: inline-block;

font-family: $site-bold-font-family;

color: $site-font-color-darker;

}

@media (min-width: $screen-sm-min) {

td:before {

display: none;

}

th, td {

text-align: left;

}

@media (min-width: $screen-sm-min) {

th, td {

display: table-cell;

// padding: .25em .5em;

}

th:first-child, td:first-child {

padding-left: 0;

}

th:last-child, td:last-child {

padding-right: 0;

}

[CSS][Responsive Design] Les media-queries de base pour cibler les périphériques standards.

30/10/2013 / admin

/* 320x480 */
@media (min-width: 320px) {

}

/* 480x320 */
@media (min-width: 480px) {

}

/* 600x800 */
@media (min-width: 600px) {

}

/* 800x600 */
@media (min-width: 768px) {

}

/* 768x1024 */
@media (min-width: 800px) {

}

/* 1024x768 */
@media (min-width: 1024px) {

}

/* 320x480 */

@media (min-width: 320px) {

}

/* 480x320 */

@media (min-width: 480px) {

}

/* 600x800 */

@media (min-width: 600px) {

}

/* 800x600 */

@media (min-width: 768px) {

}

/* 768x1024 */

@media (min-width: 800px) {

}

/* 1024x768 */

@media (min-width: 1024px) {

}

[jQuery][Responsive Design] Centrer verticalement un élément en jQuery

28/10/2013 / admin

…et conserver le centrage au redimensionnement de la fenêtre.

	// On crée une fonction qui centre verticalement le visuel du champ résumé
	function verticalAlignImageOnWindowResize() {
		jQuery('.mobile-blog-list li').each(function(){
			var listItemHeight = jQuery(this).height();
			var listItemImageHeight = jQuery(this).find('img').height();
			jQuery(this).find('img').css('margin-top', + ((listItemHeight - listItemImageHeight) / 2));
		});
	}

	jQuery(window).load(function(){
		verticalAlignImageOnWindowResize();
	});

	jQuery(window).resize(function(){
		jQuery('.mobile-blog-list li .post-image img').each(function(){
			jQuery(this).removeAttr('style');
		});
		verticalAlignImageOnWindowResize();
	});

// On crée une fonction qui centre verticalement le visuel du champ résumé

function verticalAlignImageOnWindowResize() {

jQuery('.mobile-blog-list li').each(function(){

var listItemHeight = jQuery(this).height();

var listItemImageHeight = jQuery(this).find('img').height();

jQuery(this).find('img').css('margin-top', + ((listItemHeight - listItemImageHeight) / 2));

});

}

jQuery(window).load(function(){

verticalAlignImageOnWindowResize();

});

jQuery(window).resize(function(){

jQuery('.mobile-blog-list li .post-image img').each(function(){

jQuery(this).removeAttr('style');

});

verticalAlignImageOnWindowResize();

});

Articles récents

Catégories

Archives

Méta

Catégorie : Responsive Design

[Responsive design][SASS] Un tableau responsive en mode No More Tables (version 2017)

jQuery (si besoin de fixer les hauteurs des rangées)

[Responsive design][jQuery][SASS] Un tableau responsive en mode Flip Scroll (version 2017)

[CSS] Des mediaqueries adaptées à chaque marque et version de smartphones et tablettes

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

[jQuery][Responsive Design] Exécuter des fonctions en se basant sur les media queries CSS plutôt que sur la largeur de la fenêtre du navigateur

Problème: jQuery $(window).width() et les Media Queries CSS3 ne sont pas toujours très en phase.

Solution: utiliser jQuery pour détecter un changement sur une propriété CSS plutôt que sur la largeur de la fenêtre du navigateur.

jQuery

CSS

Ressources en ligne

[jQuery][Superfish] Activer/désactiver Superfish au redimensionnement de la fenêtre du navigateur

Avec enquire.js

Sans enquire.js

[CSS] Des tableaux responsives en full CSS

Ressources en ligne :

Deux exemples maison pour un tableau comparatif :

Tableau comparatif dont les éléments à comparer deviennent horizontalement scrollables en vue mobile

Tableau comparatif dont les éléments à comparer se désolidarisent pour s’empiler en vue mobile

En utilisant display: inline-block; sur les rangées et white-space: nowrap; sur le corps du tableau :

Récupérer les hauteurs (en px) de chaque cellule d’en-tête, les stocker dans un tableau et les réattribuer aux cellules correspondantes dans le corps du tableau.

Version SASS de flip-scroll

Version SASS de No More Tables

En utilisant display: block; et les data attributes HTML5 :

Mixin SASS

[CSS][Responsive Design] Les media-queries de base pour cibler les périphériques standards.

[jQuery][Responsive Design] Centrer verticalement un élément en jQuery