Responsive Website with only 1 CSS PROPERTY

clamp(minimum, preferred, maximum);

Explanation

  1. minimum value: E.g. 16px
  2. flexible value: E.g. 5vw
  3. maximum value: E.g. 34px
h1 {
font-size: clamp(16px, 5vw, 34px);
}
img {
width: clamp(15vw, 800%, 100%);
}
h1 {
font-size: clamp(20px, 5vw, 35px);
}
p {
font-size: clamp(10px, 4vw, 20px);
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Build a multi-language web app without AJAX

[Learning] #18 JS: Intro to function

Echo Ridge Lot 99, Framing Progress

Echo Ridge Lot 99, Framing Progress

JSX is extension of JavaScript with which we can use HTML-like syntax to write JS functions.

6 Useful JavaScript Console Methods You Are Unlikely to Know Of

Creating a CRUD app using Node.js and Mongodb on Ubuntu 18.04

Writing a RESTful micro-service API using NodeJS+TypeScript+ExpressJS+Prisma — Part 1

Building REST APIs using NodeJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AMAN PRATAP

AMAN PRATAP

More from Medium

Top 5 UI/UX Trends in 2022

Converting our support page to CSS Grid

Starting from [Squircle] One: Becoming a Designer with No Experience

Web Design: Blog #5