Media Queries which we mostly use
:root{
font-size:16px; font-size:1rem;
}
/* = = = MEDIA QUERY FROM 660px and greater = = = = = = = */
/**
* 560px +
* Media query: 35em
*/
@media screen and (min-width: 35em){
}
/* = = = MEDIA QUERY FROM 608px and greater = = = = = = = */
/**
* 608px +
* Media query: 38em
*/
@media screen and (min-width: 38em) {
}
/* = = = MEDIA QUERY FROM 768px and greater = = = = = = = */
/**
* 768px +
* Media query: 48em
*/
@media screen and (min-width: 48em) {
}
/* = = = MEDIA QUERY FROM 960px and greater = = = = = = = */
/**
* 960px +
* Media query: 60em
*/
@media screen and (min-width:60em) {
:root{
overflow-y: scroll;
}
}
/* = = = MEDIA QUERY FROM 1024px and greater = = = = = = = */
/**
* 1024px +
* Media query: 64em
*/
@media screen and (min-width:64em) {
}
/* = = = MEDIA QUERY FROM 1280px and greater = = = = = = = */
/**
* 1280px +
* Media query: 80em
*/
@media screen and (min-width:80em) {
:root{
font-size:18px; font-size:1.125rem;
}
}
/* = = = MEDIA QUERY FROM 1440px and greater = = = = = = = */
/**
* 1440px +
* Media query: 90em
*/
@media screen and (min-width:90em) {
}
/* = = = MEDIA QUERY FROM 1600px and greater = = = = = = = */
/**
* 1600px +
* Media query: 100em
*/
@media screen and (min-width:100em) {
:root{
font-size:20px; font-size:1.25rem;
}
}
/* = = = MEDIA QUERY FROM 1920px and greater = = = = = = = */
/**
* 1920px +
* Media query: 120em
*/
@media screen and (min-width:120em) {
}
/* = = = MEDIA QUERY FROM 2560px and greater = = = = = = = */
/**
* 2560px +
* Media query: 160em
*/
@media screen and (min-width:160em) {
}
