アプリケーションの 1 つで( http://nicolas.kruchten.com/pivottable ) pivottable.js を使用しています。テーブルは正常にレンダリングされましたが、UI に応答性を追加する際に問題に直面しています。テーブルは、メディア クエリを使用して小さなビュー ポート用に定義された div サイズに縮小されません。ビューポートに関係なく、テーブルは常に同じサイズでプロットされます。また、テーブルの列の幅は変更できないようです。pivot.css で col の定義済みクラスを変更しようとしましたが、うまくいかないようです。
table.pvtTable .pvtColLabel {text-align: center; width:50px;}
table.pvtTable .pvtTotalLabel {text-align: right; width: 50px;}
また、以下は、テーブルがプロットされる「グラフ」クラスの div でメディアクエリを使用した方法です。
@media (min-width: 320px) and (max-width: 640px) {
/*Making gray box span across the screen*/
body {
padding-left: 0px; /*changed to avoid hz scroll on mobile device*/
padding-right: 0px; /*changed to avoid hz scroll on mobile device*/
padding-top: 0px;
}
#console {
/* Negative indent footer by it's height */
margin: 0px auto -40px;
}
.graph {
width:250px;
height:270px;
}
.wrapper-gray{
background-color: #ebebeb;
padding: 5px;
}
.section-box{
background-color: #fff;
padding: 5px;
}
}
私がどこかで間違っている場合は、私を導いてください。