CSS Responsive based on screen width instead of container width

Vaadin 6 / 7 / 8
1

Hi!


Is it possible to use the Responsive add-on to set rules based on the total screen size?

I am using rules such as:

.label-regular-responsive {
&[width-range=“1px-1000px”]
{
font-size: 45px;
text-align: center;
}
&[width-range=“1001px-2500px”]
{
font-size: 16px;
text-align: center;
}
}

By using these rules, if I add that style to a label with setResponsive(true), it will change according to its container size (for instance, the label may be contained within a responsive layout that takes 1/3 of the screen)


So, is it possible to change the font-size or any other rule based on total screen size instead of container size?

Thanks!

2

One thing that comes to mind that you could try adding a width-range selector on the top level (UI, root layout or similar) of the application and use CSS combinators to target the element you want. It might not be quite the same as total screen size, but if your UI is full-sized, it could work.

-Olli