mediaqueriesの適用状態をプレビューできるサイト3+α
それを楽にするサイトを3つ紹介します。
sponsors
#1 Screenfly
実際にプレビューした状態
下の方でデバイスを選ぶことが可能で、スマフォはもちろんTVまであります。
URL:http://quirktools.com/screenfly
#2 responsivepx
割と紹介されているサイトでシンプルです。
上部でサイズを選ぶようになっています。
URL:http://responsivepx.com/
#3 Responsive Design Testing
全部のサイズを横スクロールで一気見することができるので、見比べやすいです。
おまけ:Debugging CSS Media Queries
mediaqueriesのデバッグモードについて書かれています。
CSSで以下のように記述するだけで、どこで適用されたかがわかるようになります。
@media only screen and (min-width: 768px) and (max-width: 979px){
body{
/* code */
}
body::before{
content: "Tablet media query (768 < 979) fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255,255,0, 0.9); /* Semi-transparent yellow */
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
}
sponsors
記事作成:2011年9月27日 09:30
記事URL:http://www.skuare.net/2011/09/mediaqueries3.html
TOP > column > mediaqueriesの適用状態をプレビューできるサイト3+α
前の記事:Facebookの新しいタイムラインをいち早く楽しむ方法
次の記事:切り替え時のエフェクトが面白い画像ギャラリーJavaScript「Jquery Slider with transition effects」