# Bubbleのレスポンシブについて

**URL:** <https://www.nocode-faq.com/t/topic/3471>\
**Category:** bubble\
**Created:** [2023 年 3 月 6 日午前 1:28 UTC](https://www.nocode-faq.com/t/topic/3471 "2023-03-06T01:28:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![corp](https://avatars.discourse-cdn.com/v4/letter/c/ed655f/32.png) [@corp](https://www.nocode-faq.com/u/corp)\
**Post date:** [2023 年 3 月 6 日午前 1:28 UTC](https://www.nocode-faq.com/t/topic/3471/1 "2023-03-06T01:28:46Z")

</div>

初歩的な質問で恐縮ですが、Bubbleのレスポンシブについて伺いたく存じます。

Bubbleでスマホサイズにのみ対応したモバイルアプリを開発したいのですが、  
その場合、どのようにレスポンシブを作成するのがよろしいでしょうか？

Bubbleの場合は最初はPC版にあわせた画角で編集が始まるかと思いますので、  
PC版のレスポンシブは気にせずスマホにのみ対応する形で開発をしたいと考えております。

ご回答のほどよろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\
**Post date:** [2023 年 3 月 6 日午前 1:48 UTC](https://www.nocode-faq.com/t/topic/3471/2 "2023-03-06T01:48:06Z")

</div>

Max-widthを指定して開発すると良いですよ。  
768pxがモバイルとPCのブレイクポイントになることが多いので、  
これをMax-widthと考えれば間違いないと思います。  
スマホサイズで考慮しないといけない最小値は320pxなので、  
768px ~ 320pxの幅で、きちんと表示されるように作っていけばよいです。

---

<div class="post-metadata">

**Author:** ![corp](https://avatars.discourse-cdn.com/v4/letter/c/ed655f/32.png) [@corp](https://www.nocode-faq.com/u/corp)\
**Post date:** [2023 年 3 月 6 日午前 2:05 UTC](https://www.nocode-faq.com/t/topic/3471/3 "2023-03-06T02:05:14Z")

</div>

早速のご回答ありがとうございます！

念のため確認ですが768pxをmax-withに設定して、そこから320pxまでの間できちんと表示されるように考慮すればいいということであってますでしょうか？

---

<div class="post-metadata">

**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\
**Post date:** [2023 年 3 月 6 日午前 2:06 UTC](https://www.nocode-faq.com/t/topic/3471/4 "2023-03-06T02:06:58Z")

</div>

はい、そうです！

---

<div class="post-metadata">

**Author:** ![corp](https://avatars.discourse-cdn.com/v4/letter/c/ed655f/32.png) [@corp](https://www.nocode-faq.com/u/corp)\
**Post date:** [2023 年 3 月 6 日午前 5:29 UTC](https://www.nocode-faq.com/t/topic/3471/5 "2023-03-06T05:29:04Z")

</div>

ありがとうございます！  
とても助かりました！
