レスポンシブWEBデザインについて

質問

positionを使用したコンテンツのレスポンシブ対応化について教えていただきたいです。

particles.jsというJavascriptプラグインをメインビジュアルの背景に設置しました。
このメインビジュ
アルを可変にしたいのですが、どうしても縦幅が上手くいきません。
URLを乗せますので、どうかご教授お願いいたします。

http://muko.hiho.jp/position/

回答No.2

Proof4 · ベストアンサー

ページ拝見いたしました。
具体的にどこが上手くいっていないのか、どのような見た目にしたいのか質問文からでは分かりかねました。
ソースコードから推測するに「背景を画面いっぱいに表示したい」ということと考え回答いたします。

CSSの該当部分を下記のように変更することで背景が画面いっぱいに表示されます。
/* -----------------------------------------------------------
particles.js
----------------------------------------------------------- */

@media screen and (min-width: 780px) {
#hoge {
width: 100%;
height: calc(100vh - 65px);
position: fixed;
top: 65px;
left: 0;
display: block;
z-index: 0;
background-color: #430663;
}
}

/* -----------------------------------------------------------
particles.js(sp)
----------------------------------------------------------- */

@media screen and (max-width: 479px) {
#hoge {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: -1;
background-color: #430663;
}
}

いずれもposition:fixedを指定し、位置を固定。min-width: 780pxではcalcを使用し、高さを算出しています。max-width: 479pxではヘッダーが隠れないようにするため、z-index: -1を設定しています。

回答No.1

4017B

最終的な完成デザインは他人にはとんと分かりませんので、とりあえずはCSSの設定の仕方を以下の様に…

#mainVisual
{
　～
}

@media screen and (min-width: 480px) {
　#mainVisual
　{
　　～
　}
}

@media screen and (min-width: 780px) {
　#mainVisual
　{
　　～
　}
}

～上記の様に最初に一番画面が小さくなった時の表示を基準として設定して置き、そこから大きくなって行く毎に段階的にCSS設定を上書きして行くイメージで書いてみてください。

maxとmin設定を混在させながら上手く表示の調整をするのは、CCS全般を完璧に理解した上級者でないと難しいです。先ずはmin、或いはmax設定のみで練習してみてください。

リンク先のCSS設定だと、画面幅が480px～779pxの間が設定無しの空白地帯になってしまっているため、表示が乱れている原因となっています。