Mediálne dotazy scss
Príklady kódu
mediálny dotaz v scss
$media-desktop: "only screen and (max-width : 1024px)";
$media-tablet: "only screen and (max-width : 768px)";
$media-mobile: "only screen and (max-width : 600px)";
$media-mobile-sm: "only screen and (max-width : 480px)";
@media #{$media-desktop} {
background: red;
}
@media #{$media-tablet} {
background: red;
}
@media #{$media-mobile} {
background: red;
}
@media #{$media-mobile-sm} {
background: red;
}
mediálne dotazy scss
@mixin breakpoint($size) {
@if $size == mobile {
@media (max-width: 599px) { @content; }
} @else if $size == tablet-portrait-up {
@media (min-width: 600px) { @content; }
} @else if $size == tablet-landscape-up {
@media (min-width: 768px) { @content; }
} @else if $size == laptop-desktop {
@media (min-width: 992px) { @content; }
} @else if $size == extra-large-devices {
@media (min-width: 1200px) { @content; }
}
}
.header{
height: 10vh;
display: flex;
justify-content: space-between;
border-bottom: 2px solid black;
}obrazovka médií scss mixin
// respond is the name of your mixin
@mixin respond ($breakpoint) {
// $breakpoint is simply a variable that can have several values
@if $breakpoint==tablet {
// here `laptop` is the value of $breakpoint
// when call laptop, we mean the following piece of code
@media only screen and (max-width: 600px) {
@content;
}
}
@if $breakpoint==mobile {
@media only screen and (max-width: 480px) {
@content;
}
}
}
mediálny dotaz Sass
@media #{$small-and-down} {
// styles for small screens and down
}
@media #{$medium-and-up} {
// styles for medium screens and larger
}
@media #{$medium-and-down} {
// styles for medium screens and down
}
@media #{$large-and-up} {
// styles for large screens and up
}
@media #{$extra-large-and-up} {
// styles for extra large screens and up
}
Podobné stránky
Podobné stránky s príkladmi
V iných jazykoch
Táto stránka je v iných jazykoch
empty row
Русский
..................................................................................................................
English
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Балгарскі
..................................................................................................................
Íslensk
..................................................................................................................
Populárne v tejto kategórii
Populárne stránky s príkladmi v kategórii
empty row