7 ms·
What if you need to change justification, image proportions, etc on mobile for instance? Also, from a previous comment of mine: “Problem is, defining quantity
by tambourine_man 8y ago
What if you need to change justification, image proportions, etc on mobile for instance?
Also, from a previous comment of mine:
“Problem is, defining quantity in the class name doesn’t work.
.m10 may be fine for desktop but not for mobile.
Then you’ll have media queries which define .m10 as margin: 5px or something, which is nuts.
You could go for unspecified .mSmall etc, but in real life, things tend to be more specific and messier, in my experience.”
https://news.ycombinator.com/item?id=18083508 https://news.ycombinator.com/item?id=18083508
- mixmastamyk 8y agoWouldn't using em units be a better idea in most cases?
- edoceo 8y agoCSS has 'vh' and 'vw' units too, changed my life.
- kaoD 8y ago'vmin' and 'vmax' too. I'm experimenting with using 'em' and % everywhere, base font size with 'vmin' and scaling font size with %. Works pretty well for scroll-less apps. Example: https://alvaro-cuesta.github.io/instant-trivia/ https://alvaro-cuesta.github.io/instant-trivia/
- di4na 8y agoHint : you can also use 'calc' with vw and vh to get some more complex behaviours than purely proportional. You can add an offset, you can do some multiplications etc. Don't go overboard, but a little offset can go a long way
- tambourine_man 8y agoDoesn't solve the problem though. vw, on a vertical screen (portrait mode) is very different from what you have on a ≈ 16:9 desktop screen. The solution is pointed above, even more classes for responsiveness.
- mcrittenden 8y agoTailwind has responsive variants of anything you want: https://tailwindcss.com/docs/responsive-design/ https://tailwindcss.com/docs/responsive-design/
- melkhior 8y agoTailwind offers 'modules', which let you define classes for certain states, such as responsiveness. You can easily do something like 'w-10 sm:w-5', and it'll add a media-query based class.