« 一気にトリムする！ | メイン | cssテーブルっぽく »
2013年07月31日
縦向き横向きCSS
@media screen and (orientation:portrait){
縦長画面向けスタイル
}
@media screen and (orientation:landscape){
横長画面向けスタイル
}
今回の新着商品では各商品情報の固まりを1つのdiv（.product-inline-block）で囲みそれらをインラインブロック要素とすることで横に並ぶようにしています。このとき縦画面では横幅144pxなので3つ目の商品情報は画面幅320pxに収まらないため折り返して表示されます。横画面では横幅を96pxにしています。これで折り返されることなく横一列に並ぶわけです。
投稿者 muuming : 2013年07月31日 18:49