I was wondering how should one pick the size for his @media rule.
Let’s say I make a website that looks fine on desktop and I want to make it look good on phones/tablets as well. How do I decide on which size I pick for @media, is there some sort rule I should follow or maybe a list of most common sizes (in px for example) or do I just pick a random size like @media (max-width: 600px) and go from there?
You turn on the responsive design mode in the development tools in whatever browser you use. You drag the edge of the responsive window sideways until something breaks. You see if at all possible you can make the thing work at both sizes without media queries, otherwise a media query at that size. Repeat. For generally better results (most people use their phones to visit websites), start at very small (mobile) widths first, then go upwards, rather than from desktop downwards.
Thanks for the help, I’m still learning while doing Responsive Web Design Projects.