web-dev-qa-db-fra.com

Comment rendre différents composants en fonction de la taille de l'appareil?

Je cherche à créer une application réactive qui a un point d'arrêt à 1024. Lorsqu'un utilisateur se connecte/s'inscrit, il y aura quelques questions auxquelles il faudra répondre.

Sur mobile, cela sera rendu comme une question à l'écran à la fois. L'utilisateur verra alors un écran de transition glissant le déplacer vers la question suivante.

Une fois le point d'arrêt dépassé, toutes les questions seront affichées simultanément à l'écran.

Est-ce que quelqu'un sait s'il existe des cadres de style qui fonctionnent avec quelque chose comme ça, ou des solutions pour un rendu conditionnel basé sur la largeur des pixels?

Ce sera une application basée sur React. Utilisant actuellement la fondation pour le style.

Je vous remercie!!

reactjszurb-foundationrenderingdevicestyling
6
peterchic

Vous pouvez utiliser des requêtes multimédia CSS qui définissent display: none pour créer des points d'arrêt pour différentes tailles. Ou vous pouvez utiliser React Responsive library pour rendre React Composants basés sur les requêtes de médias.

exemple de requête multimédia css (insérez-le dans un fichier .css et incluez-le dans votre application):

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

Exemple réactif:

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

Pour votre projet React, consultez Reactive-responsive. Utilisez-le pour importer un composant appelé MediaQuery. MediaQuery ne rendra ses composants enfants que lorsque les conditions que vous aurez définies seront remplies.

À installer:

yarn add react-responsive

Ajoutez cette ligne à votre projet pour importer MediaQuery:

import MediaQuery from "react-responsive";

Utilisez ensuite MediaQuery pour rendre votre contenu de manière conditionnelle ou, dans votre cas, des questions:

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

Vous pouvez trouver plus d'informations sur react-responsive ici .

7
Aaron Pennington

Avez-vous jeté un œil au bootstrap? Il existe des bibliothèques de réaction pour les deux bootstrap 4: https://reactstrap.github.io/ et bootstrap 3: - https://react-bootstrap.github.io/

0
brub

Pour les ordinateurs de burea

@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%;}
}

Pour les mobiles et tablettes

/* 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