First of all, let's understand why do you need a responsive website.
The goal of responsive design is to make the user experience as good as possible across those devices, even though the design may look slightly different. For instance, you may present information in one column on a smartphone and two columns on a laptop, but the branding and content will remain exactly the same.
Creating a great user experience is essential to any business’s longevity. And believe it or not, your website is an extension of your physical business. Additionally, Google considers whether or not a website is mobile-friendly as part of its search engine algorithms.
The following are the ways to have responsive design without media queries:-
- Setting minimum and maximum values in CSS
The min() function lets you set the smallest value from a list of comma-separated expressions as the value of a CSS property value. This function proves really useful in terms of helping text sizes to properly scale across different screen sizes, like never letting fluid type drop below a legible font size. Similarly, the max() function lets you set the largest value from a list of comma-separated expressions as the value of a CSS property value.
Example:
body {
font-size: max(1em, 12px);
}
div{
font-size: min(14x, 22px);
}
- Use Clamp
CSS clamp() offers the best of CSS min() and CSS max() combined. CSS clamp() essentially clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value.
Example:
body {
font-size : clamp(1rem, 40px, 4rem)
}
- Use responsive units for font sizes
The way you start to make your site fluid is by using percentages for your height and width instead of static pixel sizes.
In CSS, you can determine sizes or lengths of elements using various units of measurements, and the most used units of measurements includes: px, em, rem, %, vw, and vh.
The text size can be set with a vw unit, which means the "viewport width".That way the text size will follow the size of the browser window.Note that relative units are more responsive compared to absolute units.
This way when someone resizes their browser window, your HTML tags will shrink or expand accordingly instead of breaking the page.
The following will scale based on the percentage of your screen.
Example:
div{
width: 25%;
height: 50%;
}
- Use picture tag
Did you know that in modern browsers you can change an image source depending on your page width? That’s what srcset is made for!
HTML offers the element that allows us specify the exact image resource that will be rendered based on the media query we add.
Example:
<picture>
<source media="(max-width: 799px)" srcset="elva-480w.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg">
</picture>
Top comments (0)