mediaqueriesの適用状態をプレビューできるサイト3+α
昨今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;
}
}
コメントする
記事作成：2011年9月27日 09:49
