web-dev-qa-db-fra.com

ReactJS: Points d'interruption de l'interface utilisateur matérielle

Quelle est la différence entre breakpoints.up, breakpoints.down, breakpoints.between et breakpoints.value? Et que signifie ce code, comment fonctionne la valeur des points d'arrêt ici? Est theme.spacing.unit*2*2 = theme.spacing.unit*4 ou cela a une autre signification?

[theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]: {
  width: 600,
  marginLeft: 'auto',
  marginRight: 'auto',
},
reactjsresponsive-designmedia-queriesmaterial-uibreakpoints
6
Jatin Goyal

Le matériau utilise l'ensemble de points d'arrêt suivant. Vous pouvez personnaliser les valeurs de ce point d'arrêt dans le thème.

documentation sur les points d'arrêt

Un point d'arrêt est la plage de tailles d'écran prédéterminées qui ont des exigences de mise en page spécifiques.

  • xs (extra-petit): 0px ou plus
  • sm (petit): 600px ou plus
  • md (moyen): 960 px ou plus
  • lg (large): 1280 pixels ou plus
  • xl (extra-large): 1920 px ou plus

Les fonctions que vous avez demandées (up, down, between) sont des aides pour créer des requêtes multimédias en utilisant les points d'arrêt définis dans le thème.

Remarque: breakpoints.up() et breakpoints.down() acceptent également un nombre, qui sera converti en pixels. Ce n'est pas le cas des autres méthodes.

breakpoints.up (point d'arrêt | nombre)

Crée une requête multimédia de largeur minimale qui cible des tailles d'écran supérieures ou égales au point d'arrêt donné.

// Styles will be applies to screen sizes from "sm" and up
[theme.breakpoints.up('sm')]: {
  // styles
}

breakpoints.down (point d'arrêt | nombre)

Prend un nom de point d'arrêt et crée une requête multimédia de largeur maximale qui cible les tailles d'écran jusqu'à et y compris le point d'arrêt donné .

Parce que c'est inclusif, la largeur max sera la valeur du prochain point d'arrêt.

// Styles will be applies to screen sizes from 0 up to and including "md"
[theme.breakpoints.down('md')]: {
  // styles
}

breakpoints.between (début, fin)

Prend deux noms de point d'arrêt et crée une requête multimédia qui cible les tailles d'écran à partir du premier point d'arrêt, jusqu'à et y compris le deuxième point d'arrêt.

// Styles will be applies to screen sizes from "sm" up to
// and including "lg"
[theme.breakpoints.between('sm', 'lg')]: {
  // styles
}

breakpoints.values

Un objet contenant les valeurs de point d'arrêt définies dans le thème

{xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920}

breakpoints.width (point d'arrêt)

Cette fonction est utilisée pour obtenir la valeur d'un point d'arrêt spécifique.

theme.breakpoints.width('sm')  // => 600
15
Luke Peavey