Introduction to Responsive Web Design:

Introduction to Responsive Web Design

We can't talk about web development without talking about responsive design. It is only given these days and has been for many years. Media queries are a part of responsive design and they are not going anywhere. Since the introduction of media queries (literally decades ago), CSS has evolved to the point that there are many strategies that can help greatly reduce the use of media queries we use. In some cases, I will show you how to replace multiple media queries with just one CSS declaration. This approach can result in less code, be easier to maintain, and more consistent with the content at hand.
For example, some web designers, instead of ensuring a stable user experience across all browsers, make it their life's work, often spending days solving small problems with Internet Explorer.

Responsive web design approach
What is commonly seen about Responsive web design is not just about adjusting the look of your webpages; Instead, the focus should be on logically adapting your site for use across different devices. For example: using a mouse does not provide the same user experience as a touchscreen. Don't you agree Your responsive mobile versus desktop layout should reflect these differences.
At the same time, you don't want to completely rewrite your site for each of the ten different screen sizes where it can be viewed - this type of approach is simply impossible. Instead, the solution is to implement flexible responsive design elements that use the same HTML code to match the size of the user's screen.From a technical standpoint, the solution lies in this responsive design tutorial: using CSS media queries, pseudo-elements, flexible set grid layouts and other tools to dynamically adjust to a given resolution.

Media Queries in Responsive Design
Media types first appeared in HTML4 and CSS2.1, enabling separate CSS placements for screen and print. In this way, it was possible to set a different style with its printout for displaying a one-page computer.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">

@media screen {
* {
background: gray;
}
}
This definition is possible by setting the basic features: max-width, device-width, adaptation and color. Other definitions are possible; But in this case, the most important things to note are the minimum resolution width and orientation settings landscape vs. portrait.
We can define different styles in the same CSS stylesheet as they are used only when certain limitations are satisfied. For example, this part of our responsive CSS will only be used if the width of the current device is above 480px:
@media screen and (min-width: 480px) {
div {
float: left;
background: green;
}
}

Pseudo-Elements
Pseudo-elements are used to apply a specific style to a specific part of an HTML element or to select a specific subset of elements. For example,: first-line pseudo-element lets you define only a certain selector in the first line (first-line will apply to the first line of all). Similarly, a: visited pseudo-element lets you define everyone's style, like the links previously visited by the user. Obviously, these can come in handy.
Here is an example of a simple responsive design where we create three different layouts for a login button, one for desktop, tablet and smartphone. On smartphones, we will have a single icon, while on tablets we will have the same icon

So, where do I start?
The first step you should take is to organize all the elements of your webpage into different screens .See the desktop version of the layout presented above. In this case, the content on the left (green rectangle) can serve as some kind of main menu. But when low-resolution devices are used (for example, a tablet or smartphone), this main menu may appear at full width.
When determining the responsive layout for different devices, several key elements are important. Unlike desktop versions where there is ample space for our content, the development of smartphones is even more demanding. More than ever, specific content needs to be grouped and the importance of individual parts needs to be categorized.

Other Responsive Design Elements
When using a media query, keep in mind the behavior of all elements of the page, not just those that are being targeted, especially when using a liquid grid, in which case (against certain dimensions) the page will be completely full at any time. Moment, proportionately increasing and decreasing the size of the content. Since the widths are set in percentages, the graphical elements (i.e., images) can be distorted and distorted under this type of fluid format.

About Fluid Grid Systems
Such discussions should include the most accessible uses, the importance of the material based on visible page area, simplified reading, and intuitive navigation. Among these categories, one of the most important elements is content width adjustment. For example, so-called fluid grid systems set up elements, that is, elements based on relative width as a percentage of the overall page.
Although these fluid grid systems are closely related to what we are discussing here, they are really a completely separate entity that requires an additional tutorial to discuss in detail. Therefore, I will only mention some of the larger frameworks that support this type of behavior: bootstrap, unsemantic, and brackets.

Conclusion
Until recently, website optimization was a term reserved specifically for customizing functionality based on different web browsers. The term is now expected to adapt to responsive web design with device and screen size, as we face the inevitable struggle with the various browser standards we have today. To cut it on the modern web, your site must know not who is looking at it, but how.