Bedingte if/then-Abfragen in CSS

Question

Wie schreibe ich bedingte Anweisungen für CSS?

if {...] 
@when 

sowie @media

Ich habe alle Arten von Informationen von

gesehen.

Ich möchte Code für die sozialen (tertiären) Schaltflächen schreiben, um in die Mitte der Seite zu bewegen, wenn meine Website auf einem kleineren Bildschirm angezeigt wird. Ich habe momentan zwei Reihen von Menüschaltflächen für kleinere Bildschirme, wodurch die sozialen Schaltflächen verschwinden. Ich habe verschiedene Syntaxarten gelesen, bin mir aber nicht sicher, wie ich das formulieren soll.

Danke

Answer 1

Es gibt kein wenn sonst in CSS. Es gibt, wenn Sie Blogger verwenden. Wenn ich etwas in einem mobilen Bildschirm angezeigt werden soll, würde ich diesen Code-Block zu meinem CSS hinzufügen:

@media only screen and (min-width: 480px) and (max-width : 1600px) { 
.tertiary-menu { 
display:none; 
} 
} 

@media only screen and (max-width : 479px) { 
.tertiary-menu { 
display:block; 
} 
} 

Dies bedeutet, dass ein Bildschirm kleiner als 479px. Sie können and (min-width: <size>px;) hinzufügen, um einen minimalen und maximalen Bereich einzustellen, wenn das Element angezeigt werden soll.

Wenn Sie auf etwas klicken, um das Menü anzuzeigen, ich fürchte, Sie müssen Javascript dafür verwenden. Es gibt Möglichkeiten, um Menüs mit CSS anzuzeigen, wenn Sie die Suchleiste hier überprüfen können: eatingisliving.com. Es verwendet CSS, um die Suchleiste zu erweitern. Einige Elemente werden ebenfalls ausgeblendet, wenn die Größe des Bildschirms geändert wird. Um CSS zu verwenden, um andere Elemente anzuzeigen, können Sie etwas wie .secondary-menu:hover ~ .tertiary-menu { } oder .secondary-menu:focus ~ .tertiary-menu { } verwenden, aber es ist nur auf Geschwister- oder untergeordnete Elemente beschränkt. Nur das Elternelement oder ein Geschwister vor dem Zielelement kann es auslösen.

Wenn Sie Ihre Codes und weitere Details angeben könnten. Ich kann dir helfen, es zu reparieren.