Media style rule

Official Content
This documentation is valid for:

Allows creating media in your Design System Object to achieve responsive displays.

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?)
●    resolution

Syntax

@media  [not | only] media_type and media_feature [and | or| not media_feature]...
|
@media $mediaQueries.token_name
‘{‘
    class_declaration...
‘}’

View Syntax conventions.

Where:

media_type: Specifies the type of media/device: 
    all (default, used for all media type devices)
    print (used for printers)
    screen (used for computer screens, tablets, smartphones, etc.)
    speech (used for screen readers that ‘read’ the page out loud).

media_feature: Here goes the feature used to apply a condition. The most common ones are mix-width, man-width, width, orientation, but there are more. See CSS @media Rule.

token_name: 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: Class declaration. The ellipses indicate that a number of class declarations can be specified.

Restrictions

●    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.

Example:

The H1_Negative class is defined both without any condition and with two disjoint conditions (one with tokens and the other without them).

styles TravelAgencyFrontendExtended
{
   .H1_Negative
   {
        color: white;
        font-family: AbhayaLibre-Bold;
   } 
    @media $mediaQueries.XS
    {
        .H1_Negative {
            font-size: $fontSizes.H1_XS;
        }
        .H2 {
            font-size: $fontSizes.H2_XS;
        }
    }
    @media screen and (min-width: 768px) and (max-width: 991px)
    {
        .H1_Negative {
            font-size: $fontSizes.H1_S;
        }
        .H2 {
            font-size: $fontSizes.H2_S;
        }
    }
}

tokens TravelAgencyFrontendExtended
{
    #fontSizes
    {
       H1: 95px; 
       H1_XS: 50px;
       H1_S: 80px;
       H2: 60px;
       H2_XS: 24px;
       H2_S: 60px;

   }    
    #mediaQueries
    {
        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.

Example 2

styles myStyles
{
          //Classes…

         @media print and (min-width: 30em) and (orientation: landscape)
                  {
                       .class1
                       {
                          //Properties...
                       }
                       .class3
                      {
                         //Properties...
                      }
                        //More classes....
                 }
        //Classes…
}

Availability

Since GeneXus 17 Upgrade 6.

See Also

See the general topic Design System Style Rules.