レスポンシブ対応は、スマフォファーストの時代になったからこそ、サイトを作るうえでは必須になってきました。
画像の切り替えやフォントサイズの指定など、なかなか面倒な作業が多いのではないでしょうか。
ですが、htmlだけで、使用する画像の切り替えができます。
画像サイズなどをviewportに応じて使い分けることが可能です。
|
1 2 3 4 5 |
<picture> <source media="(max-width: 320px)" srcset="img/size_320.jpg"> <source media="(max-width: 640px)" srcset="img/size_640.jpg"> <img src="img/960.jpg" alt=""> </picture> |
また、フォントサイズなどでは、
rem という単位があります。
html要素からの相対的なサイズが設定されるため、階層が変わったとしても影響がありません。
rootのフォントサイズを62.5%（10px）にすると、remでの計算が楽になります。
1.4rem = 14pxと1/10倍するだけでpxからremに単位を変えることができます。
この記事を見た人は次の記事も見ています。
第三十回「WordPressにファビコンを設定するプラグインFavicon by RealFaviconGenerator」
IEでposition:absolute;が崩れる場合
WP サイト公開を一時的に中止
WordPress ログイン画面をカスタマイズ- Swiper.js
第五十九回「SEO対策でのキーワード選択の重要性」
Word Pressでページ送りの際にうまくいかない場合
「calc()」の利点
IE にCSSを適用させるハック- ボックスの高さを揃える
wp 複数サイト運用
WPで特定の拡張子のファイルをアップロード可能にする
Photoshop覚えておくと便利なショートカットキー
wpの不正アクセスをブロックする- 要素を重ねる
第四十一回「ラジオボタンで表示を切り替える」
左揃えのまま中央寄せ- 問題を定義する
イラレで保存の際エラーが出たときの対処法- htmlリストボックス
コメント