Use the pointer MQ

[ffoodd]

pointer media query allows to know pointer accuracy. We can use it to increase interactive elements' sizing if a low accuracy pointer is used, for example. I'm pretty sure there's a lot more to find about this :)

Some reading:

• MDN article about the pointer MQ

[ffoodd]

Could be interesting along with hover media query.

[ffoodd]

Is something like this a good idea:

:root {
    --gutter: 1em;
}

@media (pointer: coarse) {
    :root {
        --gutter: 1.5em;
    }
}

Waiting for more sources and opinions :)

[ffoodd]

Another resource, with a great example of increasing interactive elements size on coarse pointers: "Potential use cases for script, hover and pointer CSS Level 4 Media Features" by Jordan Moore but also "Interaction Media Features and their potential (for incorrect assumptions)" by Patrick H. Lauke on Dev.Opera.