ReactJS:Material ui 断点 [英] ReactJS: Material ui breakpoints

问题描述

breakpoints.up、breakpoints.down、breakpoints.between 和 breakpoints.value 有什么区别> ?这段代码是什么意思，断点值在这里是如何工作的?theme.spacing.unit*2*2 = theme.spacing.unit*4 还是有别的意思?

What is the difference between breakpoints.up, breakpoints.down, breakpoints.between and breakpoints.value ? And what is meant by this code, how breakpoints value is working here? Is theme.spacing.unit*2*2 = theme.spacing.unit*4 or it has some other meaning?

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

推荐答案

Material 使用以下断点集.您可以在主题中自定义此断点的值.

Material uses the following set of breakpoints. You can customize the values of this breakpoint in the theme.

断点文档

断点是具有特定布局要求的预定屏幕尺寸范围.

A breakpoint is the range of predetermined screen sizes that have specific layout requirements.

• xs(超小):0px 或更大
• sm(小):600 像素或更大
• md(中等):960 像素或更大
• lg(大):1280 像素或更大
• xl(超大):1920 像素或更大

• xs (extra-small): 0px or larger
• sm (small): 600px or larger
• md (medium): 960px or larger
• lg (large): 1280px or larger
• xl (extra-large): 1920px or larger

您询问的函数(up、down、between)是使用主题中定义的断点创建媒体查询的助手.

The functions you asked about (up, down, between) are helpers for creating media queries using the breakpoints defined in the theme.

注意:breakpoints.up() 和 breakpoints.down() 也接受一个数字，它将被转换为像素.其他方法则不然.

Note: breakpoints.up() and breakpoints.down() also accept a number, which will be converted to pixels. This is not true of the other methods.

创建一个 min-width 媒体查询，以大于或等于给定断点的屏幕尺寸为目标.

Creates a min-width media query that targets screen sizes greater than or equal to the given breakpoint.

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

breakpoints.down(breakpoint | number)

获取断点名称并创建一个ma​​x-width 媒体查询，其目标屏幕尺寸最大并包括给定的断点.

breakpoints.down(breakpoint | number)

Takes a breakpoint name and creates a max-width media query that targets screen sizes up to and including the given breakpoint.

因为这是包含的，max-width 将是下一个断点的值.

Because this is inclusive, the max-width will be the value of the next breakpoint up.

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

breakpoints.between(start, end)

采用两个断点名称，并创建一个媒体查询，以从第一个断点到并包括第二个断点的屏幕尺寸为目标.

breakpoints.between(start, end)

Takes two breakpoint names, and creates a media query that targets screen sizes from the first breakpoint, up to and including the second breakpoint.

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

<小时>

断点.值

一个包含主题中定义的断点值的对象

---

breakpoints.values

An object containing the breakpoint values defined in the theme

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

breakpoints.width(breakpoint)

该函数用于获取特定断点的值.

breakpoints.width(breakpoint)

This function is used to get the value of a specific breakpoint.

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

这篇关于ReactJS:Material ui 断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！