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.
