@uot (uo yu)posted at 2021-08-26

レスポンシブにて、違う箇所の記述が反映されてしまう。

Q&A

HTML CSS レスポンシブ

解決したいこと

レスポンシブにて、違う箇所の記述が反映されてしまうのを防ぎたい。(タブレット画面にてPCのcssが反映されせしまう)
もし、対象方法をご存じの方はご教示頂きたいです。

発生している問題・エラー

タブレット表示にて、『padding-right: 8vw;』反映させたくないので、下記のような記述をしているが反映されてしまう。

該当するソースコード

//pc
.light-body{
  width: 50vw;
  height: 100vh;
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  padding-right: 8vw;
}

//タブレット表示
@media (max-width: 1024px) {
.light-body{
    width: 50vw;
    height: 100vh;
    display: flex;
    flex-direction: column; 
    justify-content: center; 
  }
}

自分で試したこと

ネットで調べましたが、ヒットしませんでした。

2Answer

@YottyPG posted at 2021-08-26

「media」を記載していないと全端末で反映され、「media」を記載していると該当の端末にそのスタイルが反映されます。
共有するスタイルはタブレット側には記述を省略して、変更したいスタイルだけタブレット用に記載してうまくいかないでしょうか？

//全端末
.light-body{
  width: 50vw;
  height: 100vh;
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  padding-right: 8vw;
}

//タブレット表示
@media (max-width: 1024px) {
.light-body{
  padding-right: 0;
  }
}

それか、PC用のスタイルに「min-width: 1024px」を適用して、完全にPC用のスタイルとタブレット用のスタイルを分けるのはいかがでしょうか？

//pc
@media (min-width: 1024px) {
.light-body{
  width: 50vw;
  height: 100vh;
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  padding-right: 8vw;
  }
}

//タブレット表示
@media (max-width: 1024px) {
.light-body{
    width: 50vw;
    height: 100vh;
    display: flex;
    flex-direction: column; 
    justify-content: center; 
  }
}

1Like

@uot posted at 2021-08-26

レスポンシブの理解ができてなかったです！
上記を参考に実装して、解決しました！
ありがとうございます！

0Like

Are you sure you want to delete the question?