Media style rule

This documentation is valid for:
GeneXus 18 Help
GeneXus 17 Help

Creates media in your Design System Object to achieve responsive displays.

Syntax

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

View Design System Syntax conventions.

Where:

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

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

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.

Description

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

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.

Samples

Example 1

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