Skip to main content

Responsive Font size concept

Now, your example:

p {
  font-size: calc(1rem + 1vw);
}

We are calculating font size (how big the text looks).

🔹 Let’s break it:

1rem → means base font size of the browser (usually 16px)
1vw → means 1% of the screen width

So if your screen width = 1000px,
then 1vw = 10px.

Now calculate:

font-size = 1rem + 1vw
           = 16px + 10px
           = 26px

If you make your screen wider, 1vw becomes bigger → text grows!
If you make your screen smaller, 1vw becomes smaller → text shrinks!

✅ That’s why we say it’s responsive font size.

Unit Means Changes When
px    Pixels      Never
em Size of parent text        Parent font changes
rem Size of root text (usually 16px)      Browser base font changes
vw % of screen width                         Screen width changes
vh % of screen height Screen height changes

Comments

Post a Comment

Popular posts from this blog

Tailwind css and its corresponding vanilla css

Tailwind Class CSS Property Vanilla CSS Equivalent Description bg-white background-color background-color: #ffffff; Sets background color to white. shadow-sm box-shadow box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); Adds a small shadow under the element. border-b border-bottom-width border-bottom-width: 1px; Adds a bottom border. Default color: #e5e7eb (gray-200). max-w-7xl max-width max-width: 80rem; /* 1280px */ Restricts container width for large screens. mx-auto margin-left , margin-right margin-left: auto; margin-right: auto; Centers the container horizontally. px-4 padding-left , padding-right padding-left: 1rem; padding-right: 1rem; Adds horizontal padding (16px). sm:px-6 Responsive padding (small screens ≥640px) @media (min-width: 640px) { padding-left: 1.5rem; padding-right: 1.5rem; } Increases padding on small screens. lg:px-8 Responsive padding (large screens ≥1024px) @media (min-width: 1024px) { padding-left: 2rem; paddi...
Post a Comment
Read more

Rest and spread operator in javascript

  Absolutely 👍 — here are several practical and clear examples of the rest operator ( ... ) in JavaScript, covering functions, arrays, and objects 👇 🧮 1. Rest in Function Parameters When you don’t know how many arguments a function will receive: function multiply ( factor, ...numbers ) { return numbers. map ( n => n * factor); } console . log ( multiply ( 2 , 1 , 2 , 3 , 4 )); // Output: [2, 4, 6, 8] 👉 factor gets the first argument ( 2 ), and ...numbers collects the rest into an array [1, 2, 3, 4] . 🧑‍🤝‍🧑 2. Rest with Array Destructuring You can collect remaining array elements into a variable: const fruits = [ "apple" , "banana" , "mango" , "orange" ]; const [first, second, ...others] = fruits; console . log (first); // "apple" console . log (second); // "banana" console . log (others); // ["mango", "orange"] 👉 The rest operator gathers all remaining elements afte...
Post a Comment
Read more

Role of box-sizing and its attributes in css

  🧱 Default behavior (content-box) By default, browsers use: box-sizing : content-box; This means: Total element width = content width + padding + border So if you have: .container { width : 300px ; padding : 20px ; border : 5px solid black; } Then the total visible width becomes: 300 (content) + 40 ( left + right padding) + 10 ( left + right border) = 350 px ⚠️ The box becomes wider than 300px , which can cause overflow or layout shifts. ✅ With box-sizing: border-box When you use: box-sizing : border-box; the formula changes to: Total element width = width (including padding + border) So the same CSS now behaves like this: width = 300 px (total) → content area = 300 - ( 40 padding + 10 border) = 250 px ✅ The box stays exactly 300px wide — no overflow. 🎯 Why it’s useful Prevents unexpected overflow due to padding/borders Makes responsive layouts easier Keeps your box sizes consistent You can trust width to be the actu...
Post a Comment
Read more