jQuery Mobile リファレンス

Tweet

CSS3のメディアクエリを利用することでグリッドレイアウトをレスポンシブWebデザインに変更することが可能です。

@media all and (max-width: 360px) {
	#page1 .ui-block-a,
	#page1 .ui-block-b,
	#page1 .ui-block-c,
	#page1 .ui-block-d,
	#page1 .ui-block-e {
		width: 100%;
		float:none;
	}
}

sample

CSSセレクタに関してはjQuery MobileのデフォルトCSSより高い詳細度で記述しないとデフォルトの設定を打ち消すことができないので注意してください。

//デフォルトCSS
.ui-grid-c >:nth-child(n) {
	width: 25%;
	margin-right: -.5px;
}

グリッドレイアウトはjQuery Mobile 1.3.0からレスポンシブWebデザインに対応しました

参考URL

Grids - jQuery Mobile Demos

登録日 : 2013年03月04日 最終更新日 : 2016年12月19日

同じカテゴリー(グリッドレイアウト)のエントリー

• レスポンシブ
• 5カラム
• 4カラム
• 3カラム
• 2カラム