I have to create some elements to live on a very large screen (8K). I can’t design on that size but I want everything to scale up proportionally - fonts, gaps, everything. I could work at 1920 wide if I could then scale up by exactly 4x
So - I presume starting with defining everything as percentage is a good first step? Are there any Pinegrow tools that will help? I’m thinking to use tailwind, and currently expecting to use Alpine for dynamic data.
Thanks!
Whats driving the display? Eg. Sending a 4k signal will be upscaled by the display anyway wont it? I doubt you need to design pixel for pixel here.
Don’t need to design pixels but need to render to 8k, yeah. It’s a high res LED with people viewing from close.
(If you want the full context it’s a web resource running on a media server at the full res of the LED wall - 4K isn’t any sort of limitation. Definitely an edge case for HTML but some Media Servers use HTML for dynamic content)
How about designing at 1920 and then use filter:scale(4) on body when displaying on the LED screen?
Hmm. filter:scale(4) doesn’t seem to do anything. I found the tailwind transform scale-[4.0] and it sort of works. Gets weird in that some elements are already proportional.
To circle around… I’m using transform and scale=[x.0] and it’s working apparently. I need to be very careful about scaling everything on the page - using vw, vh sometimes and sometimes the tailwind classes work. Hit and miss but it’s looking right. Using the Google developer tools and devices to check.
ollow up for those who come after: I struck out on any method to use scaling (inconsistencies), plus some internet research indicated that scale would actually render small and upscale, which isn’t acceptable in this case.
I ended up making every single thing on the page use vw and vh type sizes, and it works.
Yeah, I think scale can be problematic.
Great you have a solution.