How to properly optimize small UI elements?

Question

css

I still have relatively little experience in UI, web page rotation and optimization for different screens and devices. Now I'm facing this issue.
Here I draw a web interface layout in Photoshop. Administrative panel, for example. When drawing, I start from the size (resolution) of the screen of the monitor I'm working on. Further, in accordance with the size of the elements drawn on the layout, I make the layout. That is, I usually do this: I throw the image of the drawn layout into the browser, and in the next tab I have a page that I am typing. At work, I switch between tabs all the time and check the sizes of the elements, adjust them so that they are the same. It turns out one to one on my screen. Then, using the Google Chrome Inspector and Screenfly, I write media queries to fit the interface to other screen sizes and mobiles. devices.
When laying out, I usually use the Bootstrap grid, and it’s pretty clear to me how to optimize blocks and images, for example, so that they look normal on different screens. But what is the best practice to optimize text (eg titles, links, button names) and small interface elements like buttons for different screens and devices? When I analyze some web projects and interfaces, ready-made themes, I see that text sizes are usually written fixed (for example, the title is set to 16px) and they do not prescribe different text sizes for different screens in media queries. The same applies to buttons and all sorts of small UI elements - fixed widths-heights or paddings for everyone. At the same time, such interfaces on different screens look approximately the same, with adequate element sizes.
When I look at my interfaces on smaller screens, with a lower resolution, I see some kind of hyperbolic headings and buttons, the proportions with the overall design are violated. Because of this, the design changes somewhat in the video: blocks are forced to stretch more in height, elements are transferred to the next lines, etc. I understand that you can use media queries or tricks with vw for automatic adaptation. You can set everything as a percentage. But why, in the above cases, just regular pixels for all situations were registered once, and the interface looks decent?
What is the matter here? I suspect that I am doing something wrong at the stages of layout and optimization. Tell me, please, how is it right? What would be the best practice to optimize texts and small UI elements for different screens? What am I doing wrong in my development routine?

Answer 1

I understand that you can use media queries or tricks with vw for automatic adaptation. You can set everything as a percentage.

Everything is written correctly, so everyone does.
Fix sizes are usually rolled only for some elements, it is on them that you apparently paid attention.