FrontendWeb Component

Polymerのcore-media-queryでmediaQueryを使用した覚書

通常のCSSではshadowDOM内の要素に対してmediaqueryが使えないらしく、core-media-queryをつかってレスポンシブ化させることになります。 core-media-queryを読み込む WebC […]

広告ここから
広告ここまで

通常のCSSではshadowDOM内の要素に対してmediaqueryが使えないらしく、core-media-queryをつかってレスポンシブ化させることになります。

core-media-queryを読み込む

WebComponentですので、まずはコンポーネントを読み込みます。

bowerで導入している場合、使用するhtmlファイルの中に以下のlinkタグを挿入しましょう。
[html]
<link href="../../bower_components/core-media-query/core-media-query.html" rel="import">
[/html]
あとはcore-media-queryタグを挿入するだけで利用可能になります。

core-media-queryでクラスを書き換える

core-media-queryタグは以下の様な記述で使用します。
[html]
<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
[/html]

「query」内の条件に一致する(queryMaches)場合に「{{phoneScreen}}」がtrueになります。

サンプルコードでは「640px以下の場合にtrueになる」という内容になっています。

あとはクラスを書き換えたい場所にPolymerの三項演算子を利用したコードを追加しましょう。

[html]
<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
<div class="chip {{phoneScreen?’chip-half’:’chip-flex’}}">
640px以下なら「chip-half」クラスを、641px以上ならば「chip-flex」クラスを追加する。
</div>
[/html]
あとはそれぞれのクラスにCSSを記述すればPolymerで作成したサイトをレスポンシブ化させることができます。

HTML属性を書き換える

同じ要領でHTML属性も書き換えられるのかなと思ったのですが、どうもうまくいかない様子でStackoverflowを見ると以下の様な記述にするのが良いみたいでした。
[html]
<div class="card" layout vertical?="{{phoneScreen}}" horizontal?="{{!phoneScreen}}">
641px以上ならばholizontal(flex:row)、
640px以下ならばvertical(flex:column)
</div>
[/html]
html5 – Polymer core-media-query element for responsive layouts – Stack Overflow

作業メモ

DBpediaから西国三十三箇所のデータをぶっこぬいてみる
クリックしてサンプルサイトをみる。

core-media-queryを利用することで、640px以下のブラウザでは常に2カラム表示になるように調整することができました。

また、クリック後に表示される詳細情報も画像の位置を変更させています。

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts