Wie man die Größe eines Elements über Geräte hinweg festlegt

-2

Ich möchte ein Element, das aus der Perspektive der Realität eine feste Größe hat - sagen wir 6 x 3 cm - für jeden, der es betrachtet. Also habe ich es auf 400 x 200 px eingestellt - und ändere dann mein Layout um dieses Element (einspaltige Anzeige für kleinere Displays etc.)Wie man die Größe eines Elements über Geräte hinweg festlegt

Das funktioniert gut, wenn ich die Größe meines Desktop Browsers ändere - das Element erscheint das gleiche, aber das Layout ändert sich - aber wenn ich Dev-Tools öffne und mobile Geräte simuliere, erscheint das Element viel kleiner.

Gibt es einen einfachen Weg, um die (reale Welt) Größe des Elements über Geräte hinweg zu beheben?

Ich bin wirklich fest auf diesem (ich bin mir sicher, sehr einfach) Punkt, so würde jede Hilfe sehr geschätzt werden!

Zum Beispiel:

This is what I'm talking about

Quelle

2016-08-02 Mark

wo ist dein CSS und HTML – jonju

fügen Sie hier Ihren Code eingeben, was Sie versucht hatte –

Hallo Mark, begrüßen Überlauf zu stapeln. Wenn Sie hier eine Frage stellen, ist es normalerweise eine gute Idee, ein [minimales, vollständiges und überprüfbares Beispiel] (http://stackoverflow.com/help/mcve) Ihres Codes zu zeigen. In Ihrer Frage könnten Sie ein Code-Snippet erstellen, indem Sie das Symbol verwenden, das wie eine Seite mit einigen spitzen Klammern aussieht. Viel Glück! –

EDIT/VERÄNDERUNG DER ANTWORT (nach dem Bild sehen Sie hinzugefügt):

Als ersten Schritt setzen diese in die <head>-Tag Ihrer HTML-Code:

<meta name="viewport" content="width=device-width, initial-scale=1">

Die Seite wird nicht gezoomt werden bis auf die Größe des Ansichtsfensters (dh des mobilen Bildschirms), wenn Sie das hinzufügen.

Lesen Sie dann darüber, wie Medienanfragen verwenden ...

Quelle

2016-08-02 10:21:37 Johannes

Es scheint den gleichen Effekt zu geben, wenn ich cm verwende. – Mark

Danke! Das war's. – Mark

Fügen Sie diese in Ihrem css

@media(max-width:480px){ 
    .test{ 
    width:100%; /*as per your requirement*/ 
    height:500px; 
    }

}

HINWEIS: dieses ist für bestimmtes Gerät ist mit maximal mit 480px, können Sie andere hinzufügen Größe auch der ähnliche Weg. Und vergessen Sie nicht, den Wert von width & height gemäß Ihrer Anforderung zu ändern.

Quelle

2016-08-02 10:19:14 jonju

Danke - Ich habe die Regel hinzugefügt, aber es schien keinen Unterschied zu machen? – Mark

es wird angenommen, @media (max-width: 480px) 'nicht' 480'. Hast du das geändert? Denken Sie daran, Sie müssen auch das "Viewport" -Meta-Tag wie Johannes erwähnt – jonju

Ah ja, das war, was ich vermisst wurde. Vielen Dank. – Mark

Sie haben zwei Möglichkeiten, dieses Verhalten zu erhalten:

lernen, wie Sie Ihre eigenen Medien Abfrage schreiben http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Verwenden Sie ein Framework wie bootstrap http://getbootstrap.com/ und verwalten Sichtbarkeit Klassen

<button type="submit" class="btn btn-primary btn-sm btn-block visible-xs">My button</button> 
<button type="submit" class="btn btn-primary btn-lg btn-block visible-sm visible-md visible-lg">My button</button>

Quelle

2016-08-02 10:25:23 Luca

Das Verhalten unterscheidet sich je nach Gerät, nicht nur die Größe des Ansichtsfensters - ich habe ein grundlegendes Verständnis der Medienabfragen, aber ich bin mir nicht sicher, wie Sie sie in diesem Fall schreiben – Mark

Was meinst du mit "Verhalten "? – Luca

Die Größe (Aussehen) des angezeigten DIV – Mark

Wie man die Größe eines Elements über Geräte hinweg festlegt

Antwort

Verwandte Themen