Media Queries Breakpoint

Media Query Breaking Point : em

CSS 미디어쿼리 em 처리

// Small screens
@media only screen {
  /* Define mobile styles */
}

@media only screen and (max-width: 40em) {
  /* max-width 640px, mobile-only styles, use when QAing mobile issues */
}



// Medium screens
@media only screen and (min-width: 40.063em) {
  /* min-width 641px, medium screens */
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
}



// Large screens
@media only screen and (min-width: 64.063em) {
  /* min-width 1025px, large screens */
}

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
}



// XLarge screens
@media only screen and (min-width: 90.063em) {
  /* min-width 1441px, xlarge screens */
}

@media only screen and (min-width: 90.063em) and (max-width: 120em) {
  /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
}



// XXLarge screens
@media only screen and (min-width: 120.063em) {
  /* min-width 1921px, xxlarge screens */
} 

SCSS 미디어쿼리 처리

em-calc() 구현

css

$em-base : 16;
@function em-Calc($pxWidth, $from-size : $em-base) {
  @return $pxWidth / $from-size * 1em;
}

// The function em-calc() calculates the em-value from a px-value.
$small-breakpoint:  em-calc(640)  !default;
$medium-breakpoint: em-calc(1024) !default;
$large-breakpoint:  em-calc(1440) !default;
$xlarge-breakpoint: em-calc(1920) !default;

다양한 미디어 사이즈

scss

// Here we define the lower and upper bounds for each media size
$small-range:   (0, $small-breakpoint) !default; /* 0, 640px */
$medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint) !default; /* 641px, 1024px */
$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint)  !default; /* 1025px, 1440px */
$xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint) !default; /* 1441px, 1920px */
$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default; /* 1921px, ... */


// Media Queries
$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

$retina: (
        "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
        "#{$screen} and (min--moz-device-pixel-ratio: 2)",
        "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
        "#{$screen} and (min-device-pixel-ratio: 2)",
        "#{$screen} and (min-resolution: 192dpi)",
        "#{$screen} and (min-resolution: 2dppx)"
);

Sass 미디어쿼리 적용하기(Style with Sass)

css

// Style With Sass

@media #{$small-up} { }
@media #{$small-only} { }

@media #{$medium-up} { }
@media #{$medium-only} { }

@media #{$large-up} { }
@media #{$large-only} { }

@media #{$xlarge-up} { }
@media #{$xlarge-only} { }

@media #{$xxlarge-up} { }
@media #{$xxlarge-only} { }

Jaehee's WebClub