画面幅に応じて条件分岐をしたい

[salmon]

liquidで画面幅を取得してifで画面幅によって出力を切り替えることって可能ですか？

また、どうすればできるかご教授いただけますと幸いです。

[mrtc · Accepted solution]

その場合はCSSのメディアクエリで操作するのが一般的ですね。
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Media_queries

例えばこんな感じのCSSとHTMLを書けば、画面幅に応じてコンテンツが変わります。

.content {
	display: none;
}
@media screen and (max-width: 559px) {
	.content.mobile {
		display: block;
	}
}
@media screen and (min-width: 560px) and (max-width: 959px){
	.content.tablet {
		display: block;
	}
}
@media screen and (min-width: 960px) {
	.content.desktop {
		display: block;
	}
}

<div class="content mobile"><!-- モバイル用コンテンツのHTML --></div>
<div class="content tablet"><!-- タブレット用コンテンツ --></div>
<div class="content desktop"><!-- デスクトップ用コンテンツ --></div>

クラス名や画面幅の指定はお好みで編集してください。 

Liquidを使いたい場合は上記CSSに加え、Snippetsに「responsive.liquid」を作成しcase/whenを使ってそれぞれのHTMLを書きます。

{% case responsive %}
	{% when 'mobile' %}
		<!-- モバイル用コンテンツのHTML -->
	{% when 'tablet' %}
		<!-- タブレット用コンテンツ -->
	{% when 'desktop' %}
		<!-- デスクトップ用コンテンツ -->
{% endcase %}

そして出力したい位置に 以下のようなHTMLを挿入し、それぞれのソースを出力します。

<div class="content mobile">{% render 'responsive' with 'mobile' %}</div>
<div class="content tablet">{% render 'responsive' with 'tablet' %}</div>
<div class="content desktop">{% render 'responsive' with 'desktop' %}</div>

Javascriptを使ったif分岐とかもできるかもしれませんが、この方法が最も簡単だと思います。