mediaqueriesの適用状態をプレビューできるサイト3+α

mediaqueriesの適用状態をプレビューできるサイト3+α 昨今mediaqueriesがにわかに注目を浴びたりしていますが、確認がちょっと面倒だったりします。
それを楽にするサイトを3つ紹介します。

#1 Screenfly mediaqueriesの適用状態をプレビューできるサイト
実際にプレビューした状態
下の方でデバイスを選ぶことが可能で、スマフォはもちろんTVまであります。
mediaqueriesの適用状態をプレビューできるサイト
URL:http://quirktools.com/screenfly

#2 responsivepx mediaqueriesの適用状態をプレビューできるサイト
割と紹介されているサイトでシンプルです。
上部でサイズを選ぶようになっています。

mediaqueriesの適用状態をプレビューできるサイト class=
URL:http://responsivepx.com/

#3 Responsive Design Testing mediaqueriesの適用状態をプレビューできるサイト
全部のサイズを横スクロールで一気見することができるので、見比べやすいです。
mediaqueriesの適用状態をプレビューできるサイト

おまけ: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

「mediaqueriesの適用状態をプレビューできるサイト3+α」をシェアする

記事作成:
記事URL:

TOP > > mediaqueriesの適用状態をプレビューできるサイト3+α