skuare.net

昨今mediaqueriesがにわかに注目を浴びたりしていますが、確認がちょっと面倒だったりします。
それを楽にするサイトを3つ紹介します。

#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;
}
}