web-dev-qa-db-ja.com

デバイスサイズに基づいてさまざまなコンポーネントをレンダリングする方法は？

1024にブレークポイントがあるレスポンシブアプリを作成しようとしています。ユーザーがログイン/サインアップすると、いくつかの質問に答える必要があります。

モバイルでは、これは一度に1つの質問として画面に表示されます。ユーザーには、次の質問に移動するスライド式の移行画面が表示されます。

ブレークポイントを超えると、すべての質問が同時に画面に表示されます。

このようなもので動作するスタイリングフレームワーク、またはピクセル幅に基づく条件付きレンダリングの回避策があるかどうか誰かが知っていますか？

これは、Reactベースのアプリになります。現在、スタイリングにファンデーションを使用しています。

ありがとうございました！！

reactjszurb-foundationrenderingdevicestyling
6
peterchic

Display：noneを設定するCSSメディアクエリを使用して、さまざまなサイズのブレークポイントを作成できます。または、 React Responsiveライブラリ を使用して、Reactメディアクエリに基づくコンポーネントをレンダリングします。

css Media Queryの例（これを.cssファイルに挿入し、アプリに含めます）：

//Any device with className .loginFeature below 1024px will not be displayed
@media (max-width: 1024px) {
  .loginFeature:{
    display: none;
  }
}

React Responsive Example：

<MediaQuery query="(max-device-width: 1024px)">
  //Insert any components/html here that you want rendered thats below 1024px
</MediaQuery>
14
MEnf

あなたの反応プロジェクトについては、反応応答をチェックしてください。 MediaQueryと呼ばれるコンポーネントをインポートするために使用します。 MediaQueryは、設定した条件が満たされた場合にのみ子コンポーネントをレンダリングします。

インストールするには：

yarn add react-responsive

MediaQueryをインポートするには、次の行をプロジェクトに追加します。

import MediaQuery from "react-responsive";

次に、MediaQueryを使用してコンテンツを条件付きでレンダリングするか、ケースの質問で：

<MediaQuery query=(min-width: 1024px)>
    <div className="question">
        ...
    </div>
</MediaQuery>

反応対応 ここ に関する詳細情報を見つけることができます。

7
Aaron Pennington

ブートストラップを見たことがありますか？ bootstrap 4 :: https://reactstrap.github.io/ とbootstrap 3：の両方に反応ライブラリがあります- https://react-bootstrap.github.io/

0
brub

デスクトップの場合

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

携帯電話とタブレット用

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
0
user8823283