CSSのメディアクエリを使ってレスポンシブに対応させる書き方｜たかもそ／Web Creator.
レスポンシブデザインには欠かせないメディアクエリですが、よく使う画面サイズの判定のほかにも、たくさんの機能があります。デバイスの機能やユーザーの設定によって、最適な表示を実装できたりします。意外と深いメディアクエリの書き方について紹介します。 <meta name="viewport" content="width=device-width, initial-scale=1">前提として、<head> 要素内にレスポンシブ用の <meta> タグを指定する必要があります。 基本の構文メディアクエリの基本的な構文は、メディアタイプとメディア特性からなります。 @media <メディアタイプ> and (<メディア特性>) { ... }メディアタイプはデバイスの種類、メディア特性は画面サイズやデバイスの機能、環境などの特性を指定します。 @media screen and (max-widt
CSS メディアクエリのブレイクポイントに CSS 変数は使えない - かもメモ
タイトルのままです。 CSS 変数はメディアクエリ (@media) のブレイクポイントの値には使うことができないようです。 CSS 変数をブレイクポイントにしても動作しない :root { --breakpoint-md: 48em; } @media (min-width: var(--breakpoint-md)) { body { color: #F00; } } これは動作しない。 (window が 48em 以上になっても color: #F00; にはならない) This may seem confusing at first. If our variables are available at the :root of the page, why can't a media query access them? Well, it comes down to what th
CSS コンテナクエリ（@container）の便利な使い方を解説
CSSのコンテナクエリとは、親コンテナに基づいてスタイルを定義できるCSSの新機能です。これによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。 2023年2月14日にFirefox 110にサポートされ、CSSのコンテナクエリはこれですべてのブラウザで利用できるようになりました。コンテナクエリの基礎知識と便利な使い方を紹介します。 Say Hello To CSS Container Queries by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSコンテナクエリの背景 CSSメディアクエリの問題点 CSSコンテナクエリはどのように役立つのか？ CSSコンテナクエリの基礎知識 CSSコンテナクエリの使用例 CSSコンテナクエリのデバッグ方法 まとめ
メディアクエリだけでモバイルデバイスを判定する - Qiita
デバイスを判定する方法として、UAから判断したりUAparser.js などのライブラリを使う方法がありますが、とにかくモバイルかどうかだけを判定したい時に、ライブラリを読み込んだりするのもどうなのか。と思っていた時に、発見した方法がメディアクエリを利用する方法 参考： https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134 CSSの2つのフィーチャーを使う それは Hover と Pointer hover ポインティングデバイスが要素のhoverをサポートしているかをチェックすることができる pointer ポインティングデバイスを持っているか、もしそうならば、主要なポインティングデバイスにどれだけの正確性があるかを調べる この二つを組み合わせることで、モバイルデバイスを判定することができる
メディアクエリの解釈がMac Safariだけ違う - Qiita
window.onresize = function(){ if(window.innerWidth > 600){ ~~~~~~~ PC ~~~~~~~ }else{ ~~~~~~~ SP ~~~~~~~ } } そんな時、cssのブレイクポイントと、JSのブレイクポイントがズレたらお話しにならない。 メディアクエリは、スクロールバーを含めた幅で判定する なのでウィンドウ幅の判定には、スクロール幅も含めた値を返す window.innerWidth を使う。$(window).width() はバーを含めない値を返すため、その分CSS側とズレてしまう。 上記を考慮して、 601px以上は白 600px以下はピンク になるページが以下です。 DEMO <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>
スマホ向けのビューポートとメディアクエリーまわりのメモ | もしもワークス
スマートフォン用のメディアクエリー（Media Queries）の指定を調べたときのまとめです。 まずはお約束。 <meta name="viewport" content="width=device-width,initial-scale=1.0" /> device-widthを指定して、ビューポート（仮想の画面領域）の幅と実際の画面幅を一致させます。 iPhoneの場合、3GSまでならここは320pxを指定するのと同じ。iPhone 4以降ならRetinaなのでデバイス幅と言うなら本来は640pxになるところですが、互換性を取ってこれも320px。つまり width=320 でもいいってことですかね。 次はメディアクエリーの記述。 @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* iPhone Retin
[css,js] Retinaディスプレイ対策
スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。 500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら 1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。 その方法を以下に列挙する。 基本 Retinaディスプレイはdevice-pixel-ratioという値が1.5ないし2なので CSSなりJSなりでその値を判別して振り分ける CSS3 Meia Queries Androidで未対応機種があるため、上書きで使う方が無難。 @media only screen and (-webkit-min-device-pixel-ratio: 1) { } @media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-de
スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 | ユージック
スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 2011年8月31日 スマートフォンでは機種によって解像度がことなるのは周知のとおり。 100px×100pxの画像をiphone3で表示すると100px×100pxで表示されるが、iPhone4では解像度が2倍なので50px×50pxになってしまいます。 スマートフォンの解像度は横幅320pxを標準として480px、640px、720pxなど機種により様々な違いがあります。そこでCSSのmedia query を利用して最適なサイズに書き分けを行います。 /* devicePixelRatio=1（iPhone3～3GS、低解像度Android端末）とdevicePixelRatio未対応ブラウザ */ .className { width: 100px; height: 100px; backgr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
<resolution> - CSS: カスケーディングスタイルシート | MDN
css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろ