Resize this window in different resolutions
Look at all the examples in the "test/index.html" and "example/app.js" and
"example/hello.vue", and/or use the code inspector to see the DOM changes
Static element ID "hello" that will add classes at "tablet" and "desktop" size. Uses
compliant json.
ELEMENT
static element (Id= world)
Static element using non compliant json object. Will add classes at "tablet" and
"desktop" size.
Inline styling per device breakdown. Uses compliant json.
String like directives. Adds classes at "tablet" and "desktop" size.
Inline styling per device, the style will be added to the element and the color will
change
String like directives, add a class to the element and removes a class from the
element
Custom Expressions via string like Directive between 900px and 1599px
Custom query Expressions via string like Directive. Adds classes at min-width: 900px
and max-width: 1599px. This element has an ID of "customQueries2".
Static element that will teleport at "desktop or mobile" TO "static
hello"
Static element that will teleport this to "before" ID "customQueries2". Will
trigger only once
Direct teleport after "world" on load. Unline using
"data-adaptive" this will only teleport once, not responsive
Direct teleport before "world" OnLoad.
Unlike using "data-adaptive", this will only teleport once,
not responsive (see the source of this page)