You Need Just 4 Steps to Responsive Design Approach

step 1: At first, develop a html structure according to design, just only html (no css).

step 2: This only html structure provides you mobile-like small devices' design(check it on dev tool). Put typography, color, padding, margin in the html through css, but do not put any layout style.

step 3: Find out break points using dev tool and then use @media query according to that breakpoints. In this step, concentrate on layout. Use display:flex/grid/block/inline and other properties into @media query.

step 4: Use less number of @media query as much as possible to reduce complexity.