AbhilashMadi / Responsive-Design

Responsive Design and clearn SCSS & SASS

Responsive Design with SCSS & SASS

---

• Variables
• Nesting
• Misins
• Partials
• Functions
• Operators
• Extending
• Importing
• scss map

---

Common Responsive design Breakpoints

no	Device	Width
1️⃣	Mobile	360 x 640
2️⃣	Mobiel	375 x 667
3️⃣	Mobile	360 x 720
4️⃣	iPhone X	375 x 812
5️⃣	Pixel 2	441 x 731
6️⃣	Tablet	768 x 1024
7️⃣	Laptop	1366 x 768
8️⃣	High-res Latptop or desktop	1920 x 1080

---

Bootstrap uses following Breakpoints

@media (max-width: 575.98px){
    /*styles for the small screens goes here*/
}

@media (min-width: 576px) and (max-width: 767.98px){
    /*styles for medium screens go here*/
}

@media (min-width: 768px) and (max-width: 991.98px){
    /*styles for extra-large screens go here*/
}

@media (min-width: 992px) and (max-width: 1199.98px){
    /*styles for extra-large screens go here*/
}

@media (min-width: 1200px){
    /*styles for extra-extra-large screnns go here*/
}