css3-mediaqueries-js - Project Hosting on Google Code
Code Archive Skip to content Google About Google Privacy Terms
Code Archive Skip to content Google About Google Privacy Terms
最近にわかに盛り上がってきているレスポンシブWebデザイン。 PC・タブレット・スマホなど、様々なスクリーンサイズのデバイスに対応するためにメディアクエリを利用してスクリーンサイズ幅などに応じてレイアウトを調整する技術ですが、残念ながらIE8以下はこれを理解しません。 IE8以下はレスポンシブにならなくても良いなら話は早いですが、 「全部同じ見た目じゃなきゃヤダ！」というクライアントを説き伏せられない場合は 何らかのポリフィル系JSで対応する必要があります。 いくつか似たようなものはあるようですが、 おそらく以下の２つが最有力候補かと思います。 ・respond.js ・css-mediaqueries.js ■respond.js Adobe Dreamweaver CS6の目玉機能「可変グリッドレイアウト」でも利用されているスクリプト。 非常に軽量でサクサク動き、にわかに本命的な扱いを
/* Extra small devices: Phones (<768px) */ @media (max-width: 767px) {} /* Small devices: Tablets (≥768px) */ @media (min-width: 768px) and (max-width: 991px) {} /* Medium devices: Desktops (≥992px) */ @media (min-width: 992px) and (max-width: 1199px) {} /* Large devices: Desktops (≥1200px) */ @media (min-width: 1200px) {} /* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet t
twitter facebook hatena google pocket 昨今mediaqueriesがにわかに注目を浴びたりしていますが、確認がちょっと面倒だったりします。 それを楽にするサイトを3つ紹介します。 sponsors #1 Screenfly 実際にプレビューした状態 下の方でデバイスを選ぶことが可能で、スマフォはもちろんTVまであります。 URL：http://quirktools.com/screenfly #2 responsivepx 割と紹介されているサイトでシンプルです。 上部でサイズを選ぶようになっています。 URL：http://responsivepx.com/ #3 Responsive Design Testing 全部のサイズを横スクロールで一気見することができるので、見比べやすいです。 おまけ：Debugging CSS Media Querie
レシポンシブデザインでは、PCやスマホの表示をCSS3のMedia Queriesを使ってスタイルシートを切り替える事になります。しかしIE6、IE7、IE8はこのMedia Queriesに標準で対応していないため、css3-mediaqueries.jsを読み込ませて使えるようにします。しかし書き方によって、css3-mediaqueries.jsが効かない場合があることがわかりました。 スタイルシートが読み込まれない 本ブログはPCとスマホ表示をMedia Queriesを使って、cssを切り替えて表示を変えているのですが、ある時IE6・IE7、IE8で表示させてみると…… 普段はFirefoxを使っているので、まったく気がつかなかったのですが、思いっきり表示に不具合が出ていました…… これはひどい よく調べてみるとIE6・IE7・IE8でcssが読み込まれていないことがわかりました
Reference | jQuery.jcflick | funnythingz HTML5 MediaQueries Multi-Device Template.
仕様 jQueryのプラグインとして開発してあります。下記のように読み込むことで簡単に実装できます。 下記はフリックのみの例です。 <html lang="ja"> <head> <link rel="stylesheet" href="/public/resources/common/css/jquery-jcflick.css" media="all" type="text/css"> <script type="text/javascript" src="/public/resources/common/js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="/public/resources/common/js/jquery-jcflick.js"></script> <script type="t
Sassのmixin機能を利用して、冗長なメディアクエリを簡単に書きます。 まずブレイクポイントは変数にします BootStrapの設定を参考に、４デバイスを想定しました。 実のところPCかスマホだけで十分！という場合も少なくないですが、せっかくなので４つとも使います。損はないです。 //== Screen Size $screen-xs: 480px !default; //Extra small screen(xs)->smartphone $screen-sm: 768px !default; //Small screen(sm) ->tablet $screen-md: 992px !default; //Medium screen(md) ->desktop $screen-lg: 1200px !default; //Large screen(lg） ->wide deskto
INDEX | funnythingz HTML5 MediaQueries Multi-Device Template.
"ワンソース・マルチデバイス" テンプレートのスタンダードを創る。 PC、スマフォ、全対応の"ワンソース・マルチデバイス"テンプレートってあまり見ないなと思い、ちょっと頑張って開発してみました。 まだバグとかあるかもなのでβ版です。バグ見つけ次第、直していきます。 ワンソース・マルチデバイスとは？ 「ワンソース・マルチデバイス」とは、1つのドキュメント(HTML)を、文書構造・内容に手を加えずに、仕様や画面サイズの異なる複数の端末毎に最適化して表示させる技術です。 CSS3のMediaQueriesを使って横幅の変化によってCSSの読み込みを変えることで、さまざまな画面サイズのデバイスに対応することができます。 とりあえず目標 スマートフォン、PC、タブレットなど、Web標準ブラウザを搭載するデバイスに最適な形でコンテンツを提供することを頑張る。 マルチデバイス対応案件における、開発、
レスポンシブレイアウトで、CSSでMedia Queriesを設定したら、HTMLでviewportを指定しなければ意味ない。何も起こらないんですね〜。Media Queries使うならviewportは必須。 ところで、viewportのプロパティや値はいろいろあるけど、どれを使うのが最適なんだろう？ 「width」と「initial-scale」は同時に指定しないほうが良いってホント？（…違ってました） などの疑問を今回いろいろ調べてみた。 そのほか、レスポンシブレイアウトでの画像サイズ、 -webkit-text-size-adjust（文字サイズ自動調整）についてもメモ！ 本日のINDEX viewportの指定について viewportの「width」と「initial-scale」 viewport の使い方パターン2つ メディアクエリ無しなら viewport 不要 メディア
IE用にcss3-mediaqueries.jsを実装させる 2011年10月 6日 21:24 | ウェブ制作Tips | sonex レスポンシブWEBデザインなサイトを作る上でやっかいなのはIE8以前のブラウザです。 CSS3 Media Queriesに対応していないためにブラウザのウィンドウサイズをいくら変えても何も反応してくれません。 そこで実装しなくてはいけないのが「css3-mediaqueries-js」です。 >> http://code.google.com/p/css3-mediaqueries-js/ 実装させるページの内に、 <!--[if lt IE 9]> <script src="サイト内パス/css3-mediaqueries.js"></script> <![endif]--> を入れて実装完了。 これで制作段階でIE8以下のブラ
INDEX | funnythingz HTML5 MediaQueries Multi-Device Template.
メディアクエリー(MediaQueries)で実装した、スマフォ対応、HTML5ワンソースマルチデバイステンプレートを公開しています。iPhone、Androidにも対応したフリックJS(jcflick)も公開しています。"ワンソース・マルチデバイス" テンプレートのスタンダードを創る。 PC、スマフォ、全対応の"ワンソース・マルチデバイス"テンプレートってあまり見ないなと思い、ちょっと頑張って開発してみました。 まだバグとかあるかもなのでβ版です。バグ見つけ次第、直していきます。 ワンソース・マルチデバイスとは？ 「ワンソース・マルチデバイス」とは、1つのドキュメント(HTML)を、文書構造・内容に手を加えずに、仕様や画面サイズの異なる複数の端末毎に最適化して表示させる技術です。 CSS3のMediaQueriesを使って横幅の変化によってCSSの読み込みを変えることで、さまざまな画
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
とあるコーダーの備忘録 |css3-mediaqueries.jsが効かなくて困った時のまとめ
レスポンシブWebデザインのためのMediaQueriesの閾値 - Qiita
mediaqueriesの適用状態をプレビューできるサイト3+α
レシポンシブデザイン IE6,7,8でcss3-mediaqueries.jsが効かない対処
MediaQueriesを横着して書く方法@Sass - Qiita
MediaQueriesとviewportは一緒じゃないと無意味（viewportの指定について）
IE用にcss3-mediaqueries.jsを実装させる - GEKKO CREATORS