position:relative, position:absoluteを用いたデザインを崩れさせずにレスポンシブにしたい

Question

##ききたいこと
デバイスごとに@mediaでデザインをし直す以外に、
レスポンシブができる方法を知りたい。
##やりたいこと
以下のようなPC用サイトの、スマホ版をつくりたいです。
親要素にposition:relative;
子要素にposition:absolute;を適用させたデザインにしています。

##困っていること
デバイスのサイズを変えると、デザインが大幅に崩れてしまう。
iphone X用、iphone5用、ギャラクシー用、ipad用…などそれぞれに@mediaで対応デザインを作っています。
しかしアジア製の私が知らないデバイスもあり、
全てのデバイスに対応するようにデザインをつくることが困難になっています。
##該当コード

 <section class="mainvisual">
        <img src="export.png">
        <div class="bg1-text-div"> 
         <p class="bg1-text">
          <span class="bg1-text-color"><i class="fas fa-check mygray"></i>
            学校や職場でよくものをなくす
          </span>
        </p>
        
        <p class="bg1-text">
         <span class="bg1-text-color"><i class="fas fa-check mygray"></i>
            整理整頓が苦手
         </span>
        </p>

        <p class="bg1-text">
         <span class="bg1-text-color"><i class="fas fa-check mygray"></i>
            よくケアレスミスをしてしまう
         </span>
        </p>
      </div>   
        <p class="bg2-text">
         <span class="bg2-text-color">
                生きづらさを感じるあなたは<br>
                ADHDかもしれません
　　　　　</span>
        </p>
       <div class="bg3"></div>  
        <a href="test/03b.html">
         <p class="bg3-text">
           今すぐ診断チェック→
         </p></a>
 </section>

//　mainvisualの設定
 #mainvisual {
    position: relative;
    height: 600px;   
 }
 
 .mainvisual img {
   height: 600px;
   object-fit: cover;
   position: absolute;
   z-index: -4;
   width: 1300px;
   padding-left: 5%;
   padding-right: 5%;
   padding-top:3%;   
 }
@media (max-width: 1100px){
   .mainvisual img {
      height: 600px;
      object-fit: cover;
      position: absolute;
      z-index: -4;
      max-width: 900px;
      /* padding-left: 5%;
      padding-right: 5%; */
      padding-top:3%;  
    }}

 @media (max-width: 780px){
   .mainvisual img {
      height: 600px;
      object-fit: cover;
      position: absolute;
      z-index: -4;
      max-width: 700px;
      /* padding-left: 5%;
      padding-right: 5%; */
      padding-top:3%;  
    }}
//以下mainvisualについて各デバイスごとの設定が続く、省略

//bg-textの設定
.bg1-text-div{
    padding-top: 20px;
  } 
 
 .bg1-text  {
     font-size: 30px;
     color: #7f7f7f;
     margin: 0px;
     padding-left: 20px;  
 }

 .bg1-text-color{
    background-color:#f1f1f1;
 }
 @media (max-width: 450px){
 
   .bg1-text  {
       font-size: 25px;
       color: #7f7f7f;
       margin: 0px;
       padding-left: 20px; 
   }
  
   .bg1-text-color{
      background-color:#f1f1f1;
   }}

   @media (max-width: 375px){
      .bg1-text  {
         font-size: 22px;
      } }
//以下、bg1-textについてデバイスごとの設定が続く、省略

//bg-2-text,bg3の設定
 .bg2-text {
    font-size: 45px;
    color: #fff;
   padding-top: 260px;
   padding-left: 810px;
}

.bg2-text-color{
   background-color:#A5CAD2;
}

.bg3 {  
   background: #FF7A89;
    height: 80px;
    width: 30%;
    position: absolute;
    top: 820px;
    right: 150px;
    border-radius: 50px;
    z-index: -1;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .26);
}

.bg3:hover {
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .26);
   -webkit-transition: all .3s ease-out;
   transition: all .3s ease-out
 }

.bg3-text {  color: #F1f1f1;
    height: 80px;
    width: 30%;
    position: absolute;
    top: 790px;
    right: 110px;
    font-size:35px;
}
@media (max-width: 1100px){
 .bg2-text {
      font-size: 35px;
      top: 90%;
  }
  
  .bg3 {  
      height: 80px;
      width: 30%;
      position: absolute;
      top: 50%;
      bottom:0%;
      right: 90%   
  }
  
  .bg3-text {  color: #F1f1f1;
      height: 80px;
      width: 30%;
      position: absolute;
      top: 49%;
      bottom:0%;
      right: 14%;
      font-size:30px;
}}
 @media (max-width: 450px){ 
   .bg2-text {
      font-size: 25px;
      top: 90%;
      padding-left: 5%;
}
 .bg3 {  
     height: 80px;
     width: 80%;
     position: absolute;
     top: 92%;
     bottom:0%;
     right: 10%;
     left:10%;
}

.bg3-text { 
   height: 80px;
   width: 80%;
   position: absolute;
   top: 90%;
   bottom:2%;
   right: 8%;
   left:12%;
   font-size:30px;}}

//以下、bg3-text, bg3についてデバイスごとの設定が続く、省略

省略させていただきましたが、このように@mediaでデバイスごとに設定を繰り返していることをしてしまっています。
「こんな方法がある！」というものでも構いませんので、示唆をいただけますと幸いです。
宜しくお願い致します。

Comments

[-millmill-]

私の環境に載せてみましたが、、、、

掲載されたソースでは、正直なところ
最終的にどのようなデザインを求めておられるのか判断できません。。。

崩れていないバージョンがあるのでしたら
キャプチャを載せて頂けませんか?

[pppppppppp]

PC用、SP用を追記しました。宜しくお願い致します。

[pppppppppp]

説明不足、申しわけございません。

[-millmill-]

ソースの不足ではなく、、、、

ご質問のソースを実際に表示させて見ると
元もレスポンシブも崩れすぎていて。。。
どうしたいのか? が分からないのです。
++++++
元はこの仕上がりで、この位置関係でいいの?
画面に対して、画像に余白が入っているけれどこのままにするの?
レスポンシブはこれの文字やボタンを寄せてきたいだけ?
画像がはみ出るけど、いいの?
・・・
+++++++
InoseKeikoさんが見ているものと違うかもしれませんので
私の方でキャプチャしたものを
アルバムサイトにアップしました(画像は適当なのをはめてます)
http://30d.jp/millmill-mi/1
※今日1にちのみ共有にしています。

もしこれが、実際のソースならば
レスポンシブ以前に、
最終形を考えながら元のcssを
きちんと作られた方が良いのでは?
と思ってしまいますが、、、

[pppppppppp]

なるほど、大変失礼いたしました。
画像を追記しました。

レスポンシブ対応を色々していたら、元のデザインも壊れてしまって、、、
XDで作ったモックデザインを取り急ぎご共有します。

[-millmill-]

ありがとうございます^^

ヒントでの回答を入れていますが
もう少し丁寧な解答をしますので少しお待ち下さいね

[pppppppppp]

とても助かります、、、！！！ありがとうございます。お待ちしています

Answer 1

回答が2重になってしまいますが
ざっくり修正したものを載せますね

---

htmlを組む際は、移動させる要素をブロックとして考えます
InoseKeikoさんのモックだと

1.背景画像、2.左上リンク 3.右下テキストとボタン

に分けられますので
以下のように3つのブロックを作ります

<section class="mainvisual">
    <img src="" alt=""/>
    <div class="bg1-text-div"> 
        <p class="bg1-text"><!-- 略 --></p>
        <p class="bg1-text"><!-- 略 --></p>
        <p class="bg1-text"><!-- 略 --></p>
    </div>   

    <div class="bg3">
        <p class="bg2-text"><!-- 略 --></p>
        <a href="test/03b.html"><p class="bg3-text">今すぐ診断チェック→</p></a>
     </div>  
</section>

html5から <a href=""><p>テキスト</p></a> も認められるようになりましたが
最新の仕様で使えない場合もありますので
基本的には <p><a href="">テキスト</a></p> を使う事をお勧めします

---

cssは%やvhなどの可変単位を使う事で
余計なブレークポイントを作らなくて済みます

htmlの枠組みに対する部分を修正しています。
(spanなど以下に掲載していない装飾などはご自身で^^)

* {box-sizing: border-box; } /* 追加 */
.mainvisual {
    position: relative;
    height: 100vh;  /* 変更 */
    max-width: 100% /* 追加 */
}

.mainvisual img {
  /*  height: 600px; 削除 */
    object-fit: cover;
    position: absolute;
    z-index: -4;
  /*  width: 1300px; padding-top:3%; 削除 */
    padding-left: 5%; 
    padding-right: 5%; 
    width: 100%;  /* 追加 */
    height: 80vh;  /* 追加 */
    max-height: 600px;  /* 追加 */
}

.bg1-text-div{
    padding-top: 20px;
} 

.bg1-text  {
    font-size: 30px;
    color: #7f7f7f;
    margin: 0px;
  /*  padding-left: 20px; 削除 */
}

.bg3 {  
    position: absolute; /* 元の設定からこれだけ残し他は全部削除 */
    bottom: 5%;  /* 追加 */
    right: 0;  /* 追加 */
    width: auto;  /* 追加 */
    text-align: center;  /* 追加 */
}

 .bg2-text {
    color: #fff;
    font-size: 45px; 
    text-align: left; /* 追加 */
  /*  padding-top: 260px; 削除 */
  /*  padding-left: 810px; 削除 */
}

.bg3-text {  
  /*  height: 80px;  削除 */
  /*  width: 30%;   削除 */
  /*  position: absolute;  削除 */
  /*  top: 790px;  削除 */
  /*  right: 110px;  削除 */
    color: #F1f1f1;
    font-size:35px;
    background: #FF7A89;  /* bg3から移動 */
    border-radius: 50px;  /* bg3から移動 */
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .26);  /* bg3から移動 */
    padding: 0 10px;  /* 追加 */
    line-height: 2.28;  /* font-sizeに対して可変 / 追加 */
    display: inline-block; /* 追加 */
    margin: 20px auto 0; /* 追加 */
}

サイズはほぼ可変ですから
画面サイズが小さくなって文字が折れる辺りで
ブレークポイントを作り
font-sizs をvw指定にしてしまえば
ブレークポイントは
1箇所、多くても2か所で済みますよ。

画面に対して上や左右に余白を入れたい場合は
.mainvisual
に padding を入れて下さいm(__)m

---

先の回答でも言いましたが
正直今のcssはレスポンシブ以前。。。
もっとcssを学ばないと、ですね^^

Comments

[-millmill-]

ボタンの高さも可変になるよう、cssを少し修正しました^^;;

[pppppppppp]

ありがとうございます、、、！まさかこんな詳しく教えて下さるなんて思いませんでした。
本当に本当に感謝しています。ありがとうございます。

無事できそうです、、、ままコピペではなく、意味を調べながら書いています。

ちゃんと構造化して、大きな要素からデザインを適用させていかないといけないのですね。
しっかり１から勉強します。
ありがとうございました！！！

Answer 2

ご質問のソースをレスポンシブにしようとすると
ほぼ書き換えになってしまいますので、、、

おおよその修正ポイントを

---

1. 基本のwrapとなる

<section class="mainvisual">

cssでは #mainvisual
と、ID指定で これではそもそもpositionの意味をなしていません。

1. paddingでのはみ出しを予防する為 box-sizing をかける

2. どうしても必要な部分以外にwidthを指定しない

3. .mainvisual と .mainvisual img は

可変させるために max-width: 100%; を入れる

1. 左右の位置・paddingは極力 % で指定

2. <div class="bg3"></div> 空タグにせず中にリンクテキストを入れる

---

細かく見ればツッコミどころはまだまだありますが、、、

レスポンシブうんぬん、の前に
初歩的なミスをなくす事、そして
もう少し css の各プロパティの働きや単位の意味をきちんと理解してください。

ベースとなるcssをきちんと作ってからレスポンシブに進まないと、
最終的に余計な手間が掛かるばかりになると思います^^;;

Comments

[pppppppppp]

ありがとうございます。
すべて独学でｐｘ指定でずっと作ってました。
１から勉強しなおします、、、！

Answer 3

面倒くさい時はheight:0;にして
padding-bottom: 〇〇%;
or
padding-bottom: 〇〇vw;
で高さを出してあげて子要素にposition: absolute;
top:〇%　or　〇vw
にしてあげると最小限で済むこともある。
画像の場合はwidth:〇%;で原寸計算してあげれば
リサイズされても画面幅の割合で表示されてくれるので便利です。
画像のみのLPとかによく使います。

例になります。

<style>
* { margin: 0; padding: 0;}
.mainvisual {
    position: relative;
    height: 0;
    padding-bottom: 47vw;
    background: #ccc;
}
.mainvisual img {
    background: #aaa;
    width: 100%;
    height: 100%;
    border: solid 1px;
    position: absolute;
    top: 0;
    left: 0;
}
.bg1-text-div,
.bg2-text {
    font-size: 1.6vw;
    position: absolute;
}
.bg1-text-div {
    top: 10vw;
}
.bg2-text {
    top: 22vw;
}
</style>

Comments

[pppppppppp]

トライしてみます！ありがとうございます。