| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
February 12, 2022 11:09 AM |
35 |
22 |
10 |
💚 Day 8️⃣8️⃣ / 1️⃣0️⃣0️⃣ Master in CSS Design series!
💥 Today we going to learn about media queries!
❓ What's the main logic behind it?
📌 After that, we going to make responsive our HERO section.
#100DaysOfCode
[#webdev elopment](https://twitter.com/hashtag/webdevelopment)
#webdev
Let me explain!🧵👇 pic.twitter.com/lwP2jHDvdl
🤩 Learn the basics about media queries from this thread.
👇
Ajay Yadav 🎯 (@ATechAjay) - January 14, 2022 3:44 PM
💚 Day 5️⃣8️⃣ / 1️⃣0️⃣0️⃣ Master in CSS Design series!
💥Today we are going to set the hamburger button using media queries.
→ And we are going to also learn about media queries in CSS.
⛔We are not going to use javascript for the click events.
Let me explain!👇🧵 pic.twitter.com/Zq9HSO97Qw
📌 Do you know??
→ There are 2 types of strategies used during building a website!
1️⃣ Desktop-first (Desktop → Mobile) 2️⃣ Mobile-first (Mobile → Desktop )
→ A desktop-first strategy is most popular used during building a website.
→ First of all, we are designed our website for the desktop, then we try to be compatible with smartphones or small screens.
→ And exactly vice-versa, for the mobile-first strategy.
→ Suppose there are 2 breakpoints on our website.
- at 600px
- And, at 1300px
→ So in other words we have to move from 1300px to 600px or less.
→ Because of desktop-first strategy. pic.twitter.com/NmCj3LtgWn
→ Now, we want to add some style when the width of the screen is between 0 to 600px.
→ So, we have to use the "max-width" property because we move from the 1300px or maximum screen size to small screen size.
📌 Or,
- Desktop-first → max-width
- Mobile-first → min-width pic.twitter.com/xrzjRAG3eR
→ Also, if we want to add some styles when the width of the screen is between 1300px to 0.
→ Then, we have to use also "max-width" property, similar to this image. pic.twitter.com/OfPOf51PaU
→ There can be more than one media query on a webpage.
→ Similar to this image, both media quires will be applied. pic.twitter.com/KK6o4bs6Wj
→ Suppose, the width of the screen is 400px, then which media queries will be applied?
→ Both media queries will be applied in this case.
→ Because the width of the screen is less than 600px and 1300px as well.
→ Or, less than 600px both will be applied. pic.twitter.com/XFh0BLM6O4
→ And suppose, we have a screen that is greater than 600px that is 900px.
→ Then which media queries will be applied for the 900px?
→ So, in this case, only one media query will be applied which is less than 1300px.
💚That's all for now:) pic.twitter.com/c5stqDSeFM
