picturefill.js設置してみました。
レスポンシブでホームページ制作してもキービジュアルが写真だったらあまり気にならないのですがCREATE RECORDは キービジュアルが文字なのでエッジがダルくなるのが気になります。対策としてキービジュアルの画像サイズ切り替えるpicturefill.jsを導入してみました。 設置もシンプルでした。
ヘッダー内でpicturefill.jsを読み込み
|
1 |
<script src="/js/picturefill.js"></script> |
htmlは以下のようなソースです。max-widthを入れないと1000以下のときに画像がきえちゃいましたので入れています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span data-picture data-alt="主にWebデザインについて語っています。"> <span data-src="/images/topkey_m01.png" data-media="(max-width: 1000px)"></span> <span data-src="/images/topkey_m01.png" data-media="(min-width: 1000px)"></span> <span data-src="images/topkey01.png" data-media="(min-width: 1200px)"></span> <span data-src="/images/topkey_b01.png" data-media="(min-width: 2200px)"></span> <!--[if (lt IE 10) & (!IEMobile)]> <span data-src="http://create.irec.jp/docs/common/images/topkey01.png"></span> <![endif]--> <noscript> <img src="http://create.irec.jp/docs/common/images/topkey01.png" alt="主にWebデザインについて語っています。"> </noscript> </span> |
http://create.irec.jpに実装しました。
また時間のある時にタブレットやスマフォの画像を最適化させます。
IEは10以外動作してませんでしたので9以下はカットです。
- 2013年10月06日日曜日
- ：Naruhiko Wakai
comments