![Explain how to make responsive design | Mockup Free PSD Explain how to make responsive design](https://mockupfreepsd.com/wp-content/uploads/2021/03/Explain-how-to-make-responsive-design.jpg)
Responsive design (responsive web design) is a mobile-friendly site design with the layout and design adjusted according to the screen width on which the website is displayed. This article is for beginners on how to actually build a responsive design site.
What is responsive design?
Responsive design refers to a design that can be displayed in a single URL with a single URL, even if the display size is different , such as a computer, smartphone, or tablet .
By detecting the width of the screen, the corresponding CSS is reflected for each display size. Even if the display size is slightly different in inches, it is automatically variable and adjusted, so it is possible to build sites and pages that are mobile-friendly and highly usable.
In addition, you can show / hide the items you want to show for each device depending on the CSS settings, so you can adjust the amount of information displayed for each device or reduce the file size of the image for smartphones. You can also expect improvements and improvements in page display speed.
Two steps to implement responsive design
Next, I will briefly explain the two steps to implement responsive design.
1. Add meta viewport tag
The meta viewport tag is the code that adjusts the screen display according to the device and display size. In order to support responsive design, it is necessary to describe the following meta viewport tag in <head> ~ </ head> of html.
<meta name = ”viewport” content = ”width = device-width, initial-scale = 1.0 ″> |
- viewport display area settings
- width = device-width Value to match the width to the screen width of the terminal
- initial-scale = 1.0 Value to increase the displayed magnification to 1.0 times
The above is the meaning of the contents described in the meta viewport tag. Simply put, it is a tag that fits the screen width of the terminal and sets the displayed magnification to a value of 1.0 times.
2. Set CSS using media queries
Media queries are a mechanism to apply CSS that displays the width of the specified display size as a condition.
@media screen and (max-width: ●● px) { / * Enter the CSS to be applied when the screen width is ●● px or less * / } |
By describing the value of any display size in max-width: PX above, the CSS inside the nested {} will be applied below that size.
max-width: The PX part is called a breakpoint, and it is possible to specify the size condition with any value in the form of max-width below the value and min-width above the value.
There are several ways to write media queries, but in general, the default CSS is written for PCs, and media queries are prepared only for smartphones and tablets.
Basically, media queries also follow CSS nesting and priorities, so you need to be careful about the order in which they are listed.
Estimated break point
Next, I will briefly explain the guideline for breakpoints in responsive design.
PC: 1025px or more
@media screen and (min-width: 1025px) { / * Enter the CSS to be applied when the screen width is 1025px or more (PC) * / } |
Tablet: 768px-1024px
@media screen and (max-width: 1024px) { / * Enter the CSS to be applied when the screen width is 1024px or less (tablet) * / } |
Smartphone: 767px or less
@media screen and (max-width: 767px) { / * Enter the CSS to be applied when the screen width is 767px or less (smartphone) * / } |
Keep in mind that the above is just a guide to the current situation, not an absolute break point, and that you need to make settings according to each design in consideration of the appearance of new models.
For example, smartphones and tablets vary in size from small to large, and it is possible that the CSS of a tablet is applied even though it is a smartphone, or the CSS of a personal computer is applied even though it is a tablet. Since the number of personal computers with a display size similar to that of tablets is increasing these days, we recommend checking with an actual device if possible.
However, it is almost impossible to support all existing devices and types including the past, so it is safe to set the breakpoint based on the size that is generally distributed.