Design question. Separate layouts for mobile and desktop?

I'm relatively new to web design (I come from the programming side of things) and I am wondering how I would make a adaptive site that works on mobile and desktop.

The first thing that comes to mind is that I would make separate HTML markups for each client. Android would have a more material design to it. iOS would have whatever standards they like and same with desktop. I would then use the user agent to effectively determine what the client is using and select the proper HTML/CSS bundle to feed to them.

Is that how it works in the world of web design? Am I being naive? Is there a better more efficient way to go about doing this?

Thanks for your help.