Skip to content

Instantly share code, notes, and snippets.

@frontend-coder
Last active January 9, 2023 12:26
Show Gist options
  • Save frontend-coder/fbab3946485da52aab872eb65fba74eb to your computer and use it in GitHub Desktop.
Save frontend-coder/fbab3946485da52aab872eb65fba74eb to your computer and use it in GitHub Desktop.
Создать адаптивний миксин #adaptive
@media(min-width:576px) {
.container {
max-width: 100%;
padding-left:0.75rem;
padding-right:0.75rem;
}
}
@media(min-width:576px) {
.container {
max-width: 540px;
padding-left:0.75rem;
padding-right:0.75rem;
}
}
@media(min-width:768px) {
.container {
max-width: 720px;
padding-left:0.75rem;
padding-right:0.75rem;
}
}
@media(min-width:992px) {
.container {
max-width: 960px;
padding-left:0.75rem;
padding-right:0.75rem;
}
}
@media(min-width:1200px) {
.container {
max-width: 1140px;
padding-left:0.75rem;
padding-right:0.75rem;
}
}
@media(min-width:1400px) {
.container {
max-width: 1320px;
padding-left:0.75rem;
padding-right:0.75rem;
}
}
html {
font-size:10px;
font-size: 62.5%; // 10 px
@include respond(tab-land) {
font-size:56.25%; // 9px
}
body{
font-size:1.6rem;
letter-apacing:.2rem;
padding:5rem;
}
@include respond(tab-port) {
font-size:50%;
}
@include respond(phone) {
font-size:30%;
}
@include respond(big-land) {
font-size:75%;
}
}
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
@mixin respond($breakpoint) {
@if( $breakpoint == phone ) {
@media only screen and (max-width:600) {
@content;
}
}
@if( $breakpoint == tab-port ) {
@media only screen and (max-width:900) {
@content;
}
}
@if( $breakpoint == tab-land ) {
@media only screen and (max-width:1200) {
@content;
}
}
@if( $breakpoint == big-land ) { // экран больше 1800 пикселей
@media only screen and (min-width:1800) {
@content;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment