ReactJS：重要的用户界面断点 [英] ReactJS: Material ui breakpoints

问题描述

breakpoints.up ， breakpoints.down ， breakpoints有什么区别。在和 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 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 （超小）：0像素或更大


• sm （小）：600像素或更大


• md （中）：960px或更大


• lg （大）：1280px或更大


• 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

您要查询的功能（上，下，之间）是使用主题中定义的断点创建媒体查询的助手。

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.

创建最小宽度针对屏幕尺寸大于或等于给定断点的媒体查询。

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）

获取一个断点名称并创建一个最大宽度针对屏幕的媒体查询大小最大为并包括给定的断点。

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.

因为这是包含在内的，所以最大宽度将是下一个断点的值。

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包含主题中定义的断点值的对象

---

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：重要的用户界面断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！