[docs] Update breakpoints.md for clarity#14527
Conversation
| - **md**, medium: 960px or larger | ||
| - **lg**, large: 1280px or larger | ||
| - **xl**, extra-large: 1920px or larger | ||
| * **xs,** extra-small: 0px to 600px |
There was a problem hiding this comment.
For consistency, I think that we should use - for marking a list item.
| ``` | ||
|
|
||
| ### `theme.breakpoints.between(start, end) => media query` | ||
| <a id="theme-breakpoints-between-start-end-media-query">### `theme.breakpoints.between(start, end) => media query`</a> |
There was a problem hiding this comment.
What's wrong with the current hash generation logic?
| * **xs,** extra-small: 0px to 600px | ||
| * **sm,** small: 600px to 960px | ||
| * **md,** medium: 960px to 1280px | ||
| * **lg,** large: 1280px to 1920px |
There was a problem hiding this comment.
This is not 💯 accurate. The actual value is 1920px - 0.05px, as the intervals have an empty intersection. It's important. But 0.05px is too low-level information. I think that it's it important for people to understand that a breakpoint has an associated range, inclusive. It's better explained in
https://material-ui.com/layout/hidden/#how-it-works. I'm not sure how we can explain it here.
As proposed in the discussion from issue #13448 [Breakpoints] functions down() and between() adds +1 to index, the breakpoint widths are described as a range. Furthermore, I found some broken hash links that I attempted to fix.
|
@matthewjwhitney Thanks, I'm moving forward, I'm happy to take your feedback anytime you can :). |
As proposed in the discussion from issue #13448 [Breakpoints] functions down() and between() adds +1 to index, the breakpoint widths are described as a range. Furthermore, I found some broken hash links that I attempted to fix.
Closes #13448