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)
获取断点名称并创建一个max-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屋!