convert pixels to ems or %
- Started
- Last post
- 7 Responses
- _niko
Client asks me to build a page that will be displayed on 1080p 16:9 screens at sporting combines. Essentially a page of tables showing player info, drills , scores and rankings ect.
So I build an HTML page 1920 x 1080 using pixels as the dimensions since there was no need to have it respond to different screens and there would be no scrolling, since the final destination will be TV displays and the dimensions are fixed.
Now they are saying that they actually also want it to fit on all screens/resolutions laptops, tablets desktops with no scrollbars.
This wasn't specified in the original brief, so my question is is there a quick way to do this? Would i need to go in and convert all pixels to % or ems?
Is there a way to add a script to keep my page intact and just scale the size as the browser dimensions change?
- _niko0
^ie i'm ok if white space is added to the top and bottom or sides while keeping my 16:9 page intact.
- Continuity0
What are you more worried about, the tables or the fonts?
Seems to me, the easiest way to deal with this is % for the table/TDs and em for the fonts.
It's still going to be hard graft making all the changes in your CSS from fixed pixels to % and ems, though.
- yeah that's what i was afraid of.
Been playing around with it a bit but it's a nightmare_niko - On the other hand, once you're done it never has to be done again, and you've got something adaptable.Continuity
- yeah that's what i was afraid of.
- ukit20
I've never seen a script or plugin to automatically convert a layout to responsive. I think you'll have to go with the old-fashioned approach of converting widths to percentages and using media queries.
- gonzalle0
don't forget to resize the window to see the effect
- _niko0
^are you scaling everything individually or scaling the main container which in-turn scales everything within it? how did you handle the text scaling, I'm having issues with mine.
- gonzalle0
i'm scalling (proportionnaly with js) the main container , everithing in it is either % or em. What is em is scaled through js -> dynamic rescaling of body font-size .