Tut mir leid, dass ich eine solche Frage stelle, ich muss gestehen, dass ich kein tragbares Gerät besitze, aber ich möchte über Layoutoptionen für die von mir entwickelte Desktop-Anwendung sprechen.
Würden Sie mir bitte den Namen dieses Layouttyps nennen?
Scheint mir einfach ein ansprechendes Designmenü zu sein : Wenn eine Website auf mobile Größe verkleinert wird, "migriert" das normalerweise oberste Menü (global) so, dass es sich über der mobilen Website befindet.
Sie können dies testen, indem Sie eine Site nehmen und das Browserfenster verkleinern (das ist nicht wirklich gut genug für die Entwicklung, aber es gibt Ihnen eine Vorstellung. Für Entwickler gibt es Tools, die Ihnen helfen, die Größe richtig zu ändern).
Bearbeiten: Hier ist eine einfache Visualisierung, wie responsives Design funktioniert:
Die Objekte werden neu angeordnet. Was immer häufiger zu werden scheint, ist tatsächlich, ein "normales" Top-Menü zu nehmen und es in ein anklickbares Symbol zu komprimieren, das im Volksmund als "Hamburger" bekannt ist:
Ich empfehle Ihnen auch, sich über Frameworks wie Bootstrap mit responsivem Design zu befassen. Sie haben die meiste schwere Arbeit für Sie erledigt.
Hier ist ein Beispiel für responsives Design; Dies von der Bootstraps-Website. Gesamtbreite:
Und hier in der mobilen Ansicht. Beachten Sie, dass das obere Menü jetzt hinter dem Hamburger "versteckt" wurde:
Heutzutage werden Websites so gebaut, dass sie „mobile first“ genannt werden. Das bedeutet, dass die Frameworks und das Backend-Layout zunächst für mobile Geräte ausgelegt sind. Eine große Mehrheit der Surfer auf der Welt benutzt Mobiltelefone. Machen Sie etwas Benutzerfreundliches im Kleinen, Großes ist kein Problem.
Dies wird als reaktionsfähiges Design bezeichnet. Twitter Bootstrap verfügt über eine Vielzahl von Tools zur Unterstützung des Webs. Sie können ihre Website anzeigen, um zu sehen, wie ein reaktionsfähiges System verwendet wird.
Dies würde Ihnen helfen, eine reaktionsschnelle Desktop-Website zu entwerfen, die auf einem mobilen Gerät oder Tablet ausgerollt werden kann.
Dies kann über Chrome > Inspect Elements > Emulation > Emulate emuliert werden.
Wenn Sie dies ohne die Verwendung eines vorgefertigten Frameworks tun möchten, sind Medienabfragen für CSS (Cascading Style Sheets) die beste Möglichkeit, dies zu tun.
Es gibt ein paar gute Tutorials online, die Ihnen helfen könnten.
Responsives Design mit CSS3-Medienabfragen
BEARBEITEN: Das Layout im Bild wäre ein "Stack-Layout".
Ich hoffe es hilft :)
Saturns Auge
Wolf
Saturns Auge