Web Dev Tutorials: Macaw & Breakpoints

Ara-Haltepunkte

Ara – Haltepunkte

Ara & Haltepunkte

Wir haben einige Male über Macaw gesprochen, die designorientierte Webentwicklungssoftware. Wie ich in der Vergangenheit festgestellt habe, fühlt sich Ara manchmal unvollständig. Eines der Dinge, die in der heutigen Veröffentlichung im Vordergrund stehen und denen Macaw nicht gerecht wird, ist die automatische Größenänderung Ihres Projekts für mehrere verschiedene Haltepunkte .

Anfangen

Unabhängig davon, wie intensiv Sie suchen, finden Sie hier Tutorials zum Ändern der Größe normaler Webseiten, die mit reinem HTML erstellt wurden. Wie raten Sie, welche Seitengrößen verwendet werden sollen? Das musst du nicht, weil ich es dir sagen werde! Zunächst befindet sich der Haltepunkteditor in der oberen rechten Ecke des Arbeitsbereichs. Hier ist eine Nahaufnahme.

Screen Shot 04.07.2016 um 23.25.25 Uhr

Wir werden uns auf ein paar wichtige Bruchpunkte konzentrieren. Unabhängig davon, ob Sie den integrierten Testbrowser oder Ihren normalen Webbrowser verwenden, werden Sie die wichtigsten Unterschiede bei jeder Größenänderung feststellen. Standardmäßig ist unser Haltepunkt 1200px. Was wir tun werden, ist, unseren Hauptstandardpunkt zu ändern und etwas mehr hinzuzufügen. Unsere wichtigsten Haltepunkte sind:

  • 1920px
  • 1720px
  • 1550px
  • 1366px
  • 1280px
  • 950px
  • 750px
  • 650px
  • 540px
  • 425px ****

Jetzt wird es langweilig. 1920px ist Ihr Hauptfokus, bis Sie alle Materialien (Text, Fotos, soziale Abzeichen usw.) platziert haben. Nachdem Sie Ihren Haupt-Haltepunkt festgelegt haben, müssen Sie nun die Platzierungen Ihrer Projekt-Assets bearbeiten, da sich diese je nach Haltepunkt auf unterschiedliche Weise verschieben.

Unser zweitwichtigster Haltepunkt wird der 425px sein. Dies liegt daran, dass dies unser mobiler Bildschirm-Haltepunkt ist (ich habe dies hauptsächlich auf iPhones getestet). Sie müssen auch hier testen, wie Sie Ihr Vermögen außerhalb des Bildschirms ausdehnen können. Der Arbeitsbereich für den 425px-Bildschirm scheint nicht der „wahre Arbeitsbereich“ zu sein und erfordert, dass Sie Dinge auf dem Bildschirm bewegen und sogar vom Bildschirm entfernen, um ihn anzupassen.

Nachdem Sie getestet und sichergestellt haben, dass Ihre Website auf allen Plattformen funktioniert, können Sie loslegen!

** Video tut in Kürze **