Resizable Layout

※Forge全件データの日本語検索サービスをご利用になりたい場合は、こちらまでお問合せください。

Forge英文サイト

更新日： 2015-05-18 バージョン： 1.0.0 作者： DemoTeam Platform： 9.0.1.3 DB： All スタック： All カテゴリー： Components, Widgets

概要：

レスポンシブなコンテナ付きのサイズ変更可能な左サイドメニュー

詳細：

サイズ変更可能な左サイドメニューウィジェットを使用することで、純粋なCSSを使用してメニュ内のレスポンシブな動作が可能になります。 CSSの例： .widget-name { padding：25px; } .widget-name [max-width = "200px"] { padding：0; } .widget-name [min-width = "500px"] { padding：55px; } / *レスポンシブイメージ/ * .responsive-image img { width：100％; } .responsive-image [max-width ^ = '400px'] img { content：url（demo / image-400px.jpg）; } .responsive-image [max-width ^ = '1000px'] img { content：url（demo / image-1000px.jpg）; } .responsive-image [min-width = '1000px'] img { content：url（demo / image-full.jpg）; }

[Overview]
Resizable left pane with responsive containers

[Detail]
Resizable left-pane with widgets allowing for responsive behaviour within that pane using pure CSS! Example CSS: .widget-name { padding: 25px; } .widget-name[max-width="200px"] { padding: 0; } .widget-name[min-width="500px"] { padding: 55px; } /* responsive images /* .responsive-image img { width: 100%; } .responsive-image[max-width^='400px'] img { content: url(demo/image-400px.jpg); } .responsive-image[max-width^='1000px'] img { content: url(demo/image-1000px.jpg); } .responsive-image[min-width='1000px'] img { content: url(demo/image-full.jpg); } The underlying javascript is credited to Marc J. Schmidt. Check for samples and documentation at http://marcj.github.io/css-element-queries/. Under this license

戻る