Design System オブジェクトでメディアを作成し、レスポンシブな表示を実現できます。
@media [ not | only ] <media_type> and <media_feature> [ and | or| not <media_feature> ] ...
|
@media $mediaQueries.<token_name>
‘{‘
class_declaration...
‘}’
「
デザインシステムのクラスの記述スタイル」を参照してください。
入力値の説明:
media_type
メディア/デバイスのタイプを指定します:
all: すべてのメディアタイプのデバイスに対して使用します。これが既定値です。
print: プリンターに使用します。
screen: コンピューターの画面、タブレット、スマートフォンなどに使用します。
speech: 音声でページを読み上げるスクリーンリーダーに使用します。
media_feature
条件の適用に使用する特性です。min-width、max-width、width、orientation などが一般的ですが、ほかにもあります。
CSS の @media ルールを参照してください。
token_name
同じ DSO またはインポートされている DSO の [ Tokens ] エレメントの
#mediaqueries カテゴリで定義されている
トークンの名前です。トークンを定義する構文は次のとおりです:
token_name: [ not | only ] media_type および
media_feature [
and | or| not media_feature ] ...;
class_declaration
クラス宣言です。省略記号は、複数のクラス宣言を指定できることを示します。
説明
media ルールでは、media ヘッダーで指定する条件が満たされた場合にその値を使用する一連のクラスをカプセル化します。
CSS のメディアクエリに相当します。
Design System オブジェクトを Web に使用した場合にのみ考慮されます。
メディアクエリではさまざまなことをチェックできます。次に例を示します:
● ビューポートの幅と高さ
● デバイスの幅と高さ
● 向き (タブレット/スマートフォンで横向きか縦向きか)
● 解像度
● ヘッダーを結合することはできません。つまり 1 つのトークンから構成されるものか、CSS のようにルールから構成されるもののいずれかになります。
例 1
H1_Negative クラスは条件なしと、2 つの異なる条件付きで定義されています (1 つはトークンを使用し、もう 1 つは使用していません)。
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);
}
}
H1_Negative クラスが関連付けられたテキスト ブロック コントロールは、出力で次のようにレンダリングされます。レンダリングは画面の幅に応じて変わります:
● 991px を上回る場合。"color: white" と "font-family: AbhayaLibre-Bold" の各プロパティが使用されます。
● 768 ～ 991px の範囲内の場合。"color: white" と "font-family: AbhayaLibre-Bold"の各プロパティに加えて、"font-size:$fontSizes.H1_S" プロパティ (80px) が使用されます。
● 768px 未満の場合。"color: white" と "font-family: AbhayaLibre-Bold" の各プロパティに加えて、"font-size:$fontSizes.H1_XS" プロパティ (50px) が使用されます。
詳細については、「
デザインシステムでのクラスの構造」を参照してください。
例 2
styles myStyles
{
//クラス…
@media print and (min-width: 30em) and (orientation: landscape)
{
.class1
{
//Properties...
}
.class3
{
//プロパティ...
}
//その他のクラス....
}
//クラス…
}
GeneXus 17 Upgrade 6 以降
一般的なトピックについては「
デザインシステムのスタイルのルール」を参照してください。