レスポンシブWebデザインで、PCとスマホ表示を切り替える方法 – LIQUID BLOG
一般的なレスポンシブWebデザインのサイトでは、画面サイズに合わせてレイアウトするため、 ユーザーがPC表示とスマートフォン表示を切り替えることはできませんが、 PC表示も選択出来た方がアクセシビリティが向上する場合もあると思います。 そこで、下記のようなリンクで表示切り替えできるようにしてみます。 追記：WordPressテーマとプラグインを作成しました。 仕組み ユーザーがスマートフォンなら切り替えリンクを表示 Viewportを変更して表示を切り替える 表示方法をCookieに保存する ちなみに、Bootstrapを利用している場合もこの方法で切り替えできます。 HTML viewport（一般的なレスポンシブの仕様） <meta name="viewport" content="width=device-width, initial-scale=1"> 表示切り替えリンク </p>
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
