ReactJS: Точки останова пользовательского интерфейса - PullRequest
Новая
       42

ReactJS: Точки останова пользовательского интерфейса

0 голосов
/ 24 сентября 2018

В чем разница между breakpoints.up, breakpoints.down, breakpoints.between и breakpoints.value?И что подразумевается под этим кодом, как работает значение контрольных точек?theme.spacing.unit*2*2 = theme.spacing.unit*4 или имеет какое-то другое значение? 

[theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]: {
  width: 600,
  marginLeft: 'auto',
  marginRight: 'auto',
},

1 Ответ

0 голосов
/ 25 сентября 2018

Материал использует следующий набор контрольных точек.Вы можете настроить значения этих точек останова в теме.

Документация по точкам останова

Точка останова - это диапазон предварительно определенных размеров экрана, которые имеют особые требования к макету.

  • xs (очень маленький): 0px или больше
  • sm (маленький): 600px или больше
  • md (средний):960px или больше
  • lg (большой): 1280px или больше
  • xl (extra-large): 1920px или больше

Функции, о которых вы спрашивали (up, down, between), являются помощниками для создания медиазапросов с использованием точек останова, определенных в теме.

breakpoints.up (точка останова | число)

Создает медиазапрос min-width , который нацелен на размеры экрана, превышающие или равные указанной точке останова.

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

Примечание: breakpoints.up() также принимает число, которое будет преобразовано в пиксели.Это не относится к другим методам.

breakpoints.down (точка останова)

Принимает имя точки останова и создает медиазапрос max-width , который предназначен для экранов размером до и включает данная точка останова.

Поскольку это значение включено, max-width будет значением следующей точки останова вверх. 

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

breakpoints.between (начало, конец)

Принимает дваИмена точек останова и создает медиазапрос с целевым размером экрана от первой точки останова до и включая вторую точку останова.

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

breakpoints.values ​​

Объект, содержащий значения точек останова, определенные в теме 

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

breakpoints.width (точка останова)

Эта функция используется для получения значения определенной точки останова.

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