vue.jsvue-componentvuetify.jsadaptive-designadaptive-layout

How can I make adaptive website with vuetify?


I want to make a adaptive website with vuetify : https://vuetifyjs.com/en/

so there will provide several versions of the website which will be used according to the device.

Adaptive design will provide several designs with different sizes, namely 320, 480, 760, 960, 1200, and 1600 pixels.

so there are about 6 different sizes. does that mean I will make 6 types of web?

I read on docs of vuetify https://vuetifyjs.com/en/styles/float#responsive. but seems it only responsive website. no adaptive website

I am confused about adaptive website implementation with vuetify

I know responsive website. but for this case, i want to implement adaptive website to my project


Solution

  • So the whole idea of adaptive design is to create several different designs. If you have six different sizes, you would have six different versions of each page. Would recommend using Vuetify's breakpoint system (which you can get programatically via this.$vuetify.breakpoint.name) to determine which design that you show. More details here: https://vuetifyjs.com/en/customization/breakpoints