Nowadays, it’s common practice to build a website or app that adjusts its user interface depending upon the browser or the device. There are two approaches to achieve this goal. The first involves creating different versions of your website or app for different devices. But it’s inefficient and can lead to unpredictable errors.
In a search for a reliable, future-proof approach, the responsive — or adaptive — design was coined. It focuses on building a single version of your layout that adapts to different browsers or devices automatically.
In this article, we’ll learn about responsive web design and the fundamental principles that will help you make an awesome website.
Responsive Web Design Ingredients
Responsive web design is not as complicated as it sounds. It’s a set of practices that you can use when writing CSS, not a separate technology that you’ll have to learn from scratch. You might already be following several of these principles without realizing it. You can understand responsive web design by exploring its four ingredients: fluid layouts, responsive units, flexible images, and media queries.
Fluid Layouts
With a fluid layout, you can create web pages that adapt to the current viewport width and height. Common practice includes using the max-width property instead of giving a fixed width to an element. Also, using percentage (%), viewport height (vh), or viewport width (vw) helps improve adaptability that is not possible with pixels (px). So, next time you’re building a layout, make sure to introduce these small changes and start benefitting from responsive design techniques.
Responsive Units
As you move to more advanced CSS, you’ll often see the use of rem and em units for length instead of px units. This is because the rem unit makes it super easy to scale the entire layout. By default, 1rem equals 16px because it’s proportional to the <html> element’s font size, typically 16px. However, you can set 1rem equal to 10px (or any other value) for easier calculations, by adjusting the top-level font size.
Read more: Responsive Web Design Principles
