@media Only Screen Code Example


Example 1: media query


@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

Example 2: css media query


/* BOOSTRAP MEDIA BREAKPOINTS */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.selector {
background-color:#f00;
}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

Example 3: media queries les plus utilisees


/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */
@media screen and (max-width: 1280px)

/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
@media all and (min-width: 1024px) and (max-width: 1280px)

/* Sur les téléviseurs */
@media tv

/* Sur tous types d'écrans orientés verticalement */
@media all and (orientation: portrait)

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android SDK Location Should Not Contain Whitespace, As This Cause Problems With NDK Tools