Reply To: What is the solution for a smooth Responsive Design?

[Beverleyh]

do we need to include the media queries of all the 100 devices in our CSS3?

Short answer, no.

Rather than trying to target and adapt a web design for specific device sizes, aim to set a media query only when your layout/content needs it instead.

So if you’re working from a mobile-first standpoint, a very simple test would be to start by pulling your browser window in to the skinniest linear proportions, and expand it until the layout/content begins to look a bit rubbish. This is where you choose your first media query breakpoint where you fix your layout/content for a lightly wider screen. Then expand a bit more, and when something else starts to look a bit rough, set another media query breakpoint and fix the layout/content for a wider screen still. Keep going like this until you reach the widest screen width you’re supporting.

Is there any solution for a website to transition in a fluid manner across screen sizes, without the switchy (abrupt) change?

You can counteract any abrupt layout shifts by working in fluid units. For example, set module/element widths in % or vw so they expand and contract smoothly as the screen width changes. You can always cap their layouts using min-width or max-width if you need to.