if you want to write two sets of css, you can use user-agent to determine the current device, load different pages or css files
, but it is convenient to deal with responsive layout through features such as CSS @ media.

generally speaking, adapting to the mobile terminal is not complicated, and there are three basic ideas:

1. tell the browser how your web page is rendered on mobile devices via < meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" / >
2. uses streaming layout and does not force the width and height of the element to be specified, making it easier to render at different resolutions
3. use media query @ media to adapt to different resolutions

I suggest you do this:

1. use some responsive frameworks to reduce development costs, such as Bootstrap
2. learn by observing the performance of responsive web pages at different ends, refer to Bootstrap theme
3. rem or vw is actually the most trivial trick, just take a look at it. (actually, I am against rem,. I think we should @ media + px)