October 12, 20196 yr Hi, im doing some research and im trying to create a To-Do list when i transforming a desktop website into a mobile version (responsive website) So im trying to create a list of the most common CSS properties that I will probably need to change within media queries... For example - Font size, padding... So what by your opinion the most common properties to change for a responsive website? and did you find any static rules? (for instance - font size will always be reduced by 30%...) Thanks!! Edited October 12, 20196 yr by Naveh tags
October 18, 20196 yr I wouldn't follow this rule Quote and did you find any static rules? (for instance - font size will always be reduced by 30%...) You want larger font-sizes to be reduced by a greater ratio than smaller ones. Take the typography variants we have defined at Moonpig for an example https://moonpig-launchpad.netlify.com/#section-typography I'm not sure why listing common properties is important, it really depends what it is you're building. width, flex-direction, position etc are all common to adjust.
October 21, 20196 yr On 10/18/2019 at 3:59 PM, rbrtsmith said: I'm not sure why listing common properties is important, it really depends what it is you're building. width, flex-direction, position etc are all common to adjust. A bit like the age old question "what's the best break point" 😉
October 21, 20196 yr 52 minutes ago, BrowserBugs said: A bit like the age old question "what's the best break point" 😉 Given most of the projects I work with either have a design system or I build one that has to be re-usable between projects means that we do need to set breakpionts ahead of time. Rather than "when it breaks". For that I tend to use points in between the most common devices: 400px, 640px, 900px, 1200px, 1640px are those used at Moonpig, which get converted into em's which keeps things consistent when people adjust the browser font-size.
Create an account or sign in to comment