ヘッダーのSNSリンク

「固定値型」では、フォントサイズが固定値となるため、ヘッダーのコンテンツ幅によっては入り切らない場合があるため、ビューポートの幅が1280px未満の場合はSNSリンクを非表示にしている。

「相対値型」では、ビューポートの幅が変わってレイアウトに影響がないので、PCレイアウト時はSNSリンクは常に表示。

「固定・相対値複合型」では、「固定値型」の範囲内でフォントサイズが固定値となるため、ヘッダーのコンテンツ幅によっては入り切らない場合があるため、ビューポートの幅が1280px未満の場合はSNSリンクを非表示にしている。

ヘッダーのコンテンツの幅

「固定値型」では、ページのコンテンツの幅同様に、間延びを防ぐため最大幅を1680pxに設定。ビューポートの幅が1680pxより大きい場合は中央に配置される。

「相対値型」では、ページのコンテンツの幅同様に、常にヘッダーのコンテンツの幅がビューポートの幅と一致するため、最大値を設けなくても破綻しない。

「固定・相対値複合型」では、ページのコンテンツの幅同様に、ビューポートの幅が広くなると「相対値型」と同様の挙動になる。常にヘッダーのコンテンツの幅がビューポートの幅と一致する。

ハンバーガーボタンのライン

「固定値型」では、位置やサイズに対して小数点の値を指定していないため、線が潰れたり線によって太さが変わったりしない。

「相対値型」では、サイズ・位置をビューポートの割合で計算するので、出力される要素のサイズや位置の値に小数点が含まれる。そのため線が潰れたり線によって太さが違うなどの現象が起こる。

「固定・相対値複合型」では、「固定値型」の範囲と「相対値型」の範囲での挙動は、それぞれの範囲の仕様に準ずる。

※詳しくは「固定値型」「相対値型」を参照。

「スマホ特化型」では、固定値で組んでいる場合は線が潰れたり線によって太さが変わる現象が起きにくく、相対値で組んでいる場合は前述の現象が起こることがある。

Responsive Samples by unshift

固定値型

ページのコンテンツの幅

「固定値型」では、間延びを防ぐため最大幅を1680pxに設定。ビューポートの幅が1680pxより大きい場合は中央に配置される。

「相対値型」では、常にページのコンテンツの幅がビューポートの幅と一致するため、最大値を設けなくても破綻しない。

「固定・相対値複合型」では、ビューポートの幅が広くなると「相対値型」と同様の挙動になる。常にページのコンテンツの幅がビューポートの幅と一致する。

「スマホ特化型」では、ビューポートの幅が640px未満の場合はページのコンテンツの幅がビューポートの幅と一致し、640px以上の際にページのコンテンツの幅が640pxで固定される。

ページのコンテンツのパディング

このサンプルにおける「固定値型」では、ページのコンテンツのパディングも固定値であるが、相対値 (コンテンツの幅の5%など)で指定する場合もある。

「相対値型」では、ページのコンテンツのパディングもビューポートの幅に対する割合となる。

「固定・相対値複合型」では、「固定値型」の範囲と「相対値型」の範囲での挙動は、それぞれの範囲の仕様に準ずる。

※詳しくは「固定値型」「相対値型」を参照。

「スマホ特化型」では、常にスマホレイアウトが保たれるので、カラム幅・カラム数もそれに準ずる。