Search code examples
htmlcssmedia-queriesterminologyw3-css

Is there a name for the size related break points defined in a media query?

Is there a name for the breakpoints used to change the web page user interface when writing media queries?

For example, in animation there are keyframes that define a point in time to apply changes to the video or video elements. Is there something similar with media queries? If not, would calling them keysizes make sense?

For example, the following keys would be 400, 800 and 1080:

@media (min-width: 400px) {}
@media (min-width: 800px) {}
@media (min-width: 1080px) {}
Solution

  • UPDATE - 8/21/2021: There is a name for it. It is called breakpoints.

    See this video:

    https://www.youtube.com/watch?v=IsC5-C_nuF4&t=218s

    OLD ANSWER:

    The answer to this question is "No, there is no name for it" (not that I could find on https://www.w3.org/TR/mediaqueries-5/#mq-syntax).

    I didn't see any specific description in the spec that define these "points" or "widths" that queries applies or match.

    The point (no pun intended) of these points is to show a different layout for different sized devices like mobile, tablet and desktop. Allowing the designer the ability to make custom layout to fit the available space.

    Here's what I did find.

    IIUC The queries that I'm writing look like the following:

    `@media (min-width: 400px)`

    that would be a media query and media condition:

    enter image description here

    then there is the media feature:

    enter image description here

    then media feature name and value:

    enter image description here

    enter image description here

    Then the width property:

    enter image description here

    If there is no other name for it, the one that sounds correct is breakpoint.

    More fitting names might be:

    • response point
    • size point
    • device point
    • point break
    • query point
    • match points
    • key points