media query in scss
/* 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) {}
0
0
@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: 900px) { @content; }
} @else if $size == desktop-up {
@media (min-width: 1200px) { @content; }
} @else if $size == big-desktop-up {
@media (min-width: 1800px) { @content; }
}
}
/* used in this .scss file*/
.logo{
&__link{
&__img{
@include breakpoint(mobile) {
width:30%;
}
width:20%;
height:auto;
}
}
}
Thank you!
0
0
3.33
6
$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;
}
Thank you!
6
0
4.11
9
// 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;
}
}
}
Thank you!
9
0
3.64
8
@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;
}
Thank you!
8
0
3.33
3
$size__site_content_width: 1024px;
/* Media Queries */ Not necessarily correct, edit these at will
$media_queries : (
'mobile' : "only screen and (max-width: 667px)",
'tablet' : "only screen and (min-width: 668px) and (max-width: $size__site_content_width)",
'desktop' : "only screen and (min-width: ($size__site_content_width + 1))",
'retina2' : "only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)",
'retina3' : "only screen and (-webkit-min-device-pixel-ratio: 3) and (min-resolution: 288dpi)",
'landscape' : "screen and (orientation:landscape) ",
'portrait' : "screen and (orientation:portrait) "
);
@mixin for_breakpoint($breakpoints) {
$conditions : ();
@each $breakpoint in $breakpoints {
// If the key exists in the map
$conditions: append(
$conditions,
#{inspect(map-get($media_queries, $breakpoint))},
comma
);
}
@media #{$conditions} {
@content;
}
}
Thank you!
3
0
Are there any code examples left?
New code examples in category CSS
-
CSS 2022-03-27 22:50:16 make text bigger html5
-
CSS 2022-03-27 21:40:08 move list item to left css
-
CSS 2022-03-27 21:35:05 reduce image size css
-
CSS 2022-03-27 21:30:21 css image background center horizontally in div
-
CSS 2022-03-27 21:05:02 css button styles
-
CSS 2022-03-27 18:50:09 compass font awesome
-
CSS 2022-03-27 18:50:06 modal in materialize css
-
CSS 2022-03-27 17:55:12 box round corner css
-
CSS 2022-03-27 17:45:12 jquery add css
-
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio