Creates media in your Design System Object to achieve responsive displays.
@media [not | only] <media_type> and <media_feature> [and | or| not <media_feature>]...
View Design System Syntax conventions.
Specifies the media/device type:
all: used for all media type devices. It is the default value.
print: used for printers
screen: used for computer screens, tablets, smartphones, etc.
speech: used for screen readers that ‘read’ the page out loud.
Is the feature used to apply a condition. The most common ones are min-width, max-width, width, orientation, but there are more. See CSS @media Rule.
Name of a token defined in the Tokens section of the same DSO or of an imported one inside the #mediaqueries category. There, the token definition follows the syntax:
token_name: [ not | only ] media_type and media_feature [ and | or| not media_feature ]...;
Class declaration. The ellipses indicate that a number of class declarations can be specified.
A Media rule encapsulates a set of classes that take that value if the conditions specified in the media header are met. It is equivalent to CSS Media Queries.
It is only taken into account if the Design System object is used for Web.
Media queries can be used to check many things, such as:
● width and height of the viewport
● width and height of the device
● orientation (is the tablet/phone in landscape or portrait mode?)
● The headers cannot be combined; that is, you have one made up of a single token, or one made up of the rule as in CSS.
The H1_Negative class is defined both without any condition and with two disjoint conditions (one with tokens and the other without them).
@media screen and (min-width: 768px) and (max-width: 991px)
XS: screen and (max-width: 767px);
A Text Block control that has the H1_Negative class associated with it will be rendered in the output as follows. If the screen width is:
● Larger than 991px, it will take the properties "color: white" and "font-family: AbhayaLibre-Bold."
● Between 768 and 991px, it will take, in addition to the properties "color: white" and "font-family: AbhayaLibre-Bold," the property "font-size:$fontSizes.H1_S" (80px).
● Smaller than 768, it will take, in addition to the properties "color: white" and "font-family: AbhayaLibre-Bold," the property "font-size:$fontSizes.H1_XS" (50px).
See more at Structuring classes in Design System.
@media print and (min-width: 30em) and (orientation: landscape)
Since GeneXus 17 Upgrade 6.
See the general topic Design System Style Rules.