How to make responsible website with css.

As a backend engineer myself, I had never really thought about responsive design or anything related to css.
So I am going to take a look at what I learned in school about media Query and introduce it to you.
When I thought about creating a responsive website, I first came up with the idea of using userAgent for responding.
Because, although not all of the information is completely reliable, I thought it would be possible to determine the browser and what type of device the access is coming from, so that we could sort out the style sheets to be applied in more detail.
However, using certain techniques in CSS, it is possible to create a site with a responsive design without having to implement the sorting that you don't really want to do.

@media Query

With media query, you can change the design to fit the width of the screen.

example code with link tag

// default stylesheet
<link rel="stylesheet" href="css/style.css">
// this will be apply until width 480px
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 480px)">

You can use multiple style sheets.

// this will be apply until width 480px
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 480px)">
// this will be apply from 480px to 1024px
<link rel="stylesheet" href="css/tablet.css" media="screen and (min-width:480px) and ( max-width:1024px)">
// this will be apply from 1024px
<link rel="stylesheet" href="css/desktop.css" media="screen and (min-width:1024px)">

Or, you can make it short.

// this will be apply until width 480px
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 480px)">
// this will be apply until width 768px
<link rel="stylesheet" href="css/tablet.css" media="screen and (max-width:768px)">
// this will be apply until width 1024px
<link rel="stylesheet" href="css/tablet.css" media="screen and (min-width:1024px)">

example code in css

@media (min-width: 480px) {}

example code with @import

@import "mobstyle.css" screen and (max-width: 480px);

One thing to note about this technique is that all sheets are exchanged regardless of the device from which the request is made.
Therefore, if too large a sheet is implemented using this technique, unnecessary files will be exchanged during HTTP communication.
I consider it an easy and effective technique for creating static, lightweight sites.

I believe that being able to use a variety of technologies and think about what I want to implement in multiple ways is very important for my future growth as an engineer.
I would like to continue to acquire knowledge in a variety of fields regardless of what specialty I have.

Thank you for reading this.