Ordinary CSS using @media to deal with responsive website development estimates that most people have encountered, but in CSS preprocessing so popular today, we should learn more agile development mode, better let them play the maximum efficiency. Responsive development is much the same, but the specific processing scheme is still a lot of, here I share a more standard, with more comfortable SCSS processing media query scheme.


The specific plan is like this:

Define some breakpoints (i.e. the size of the device we want to define)

// _config.scss
$breakpoints: (
  'xs': 'only screen and ( min-width: 480px)'.'sm': 'only screen and ( min-width: 768px)'.'md': 'only screen and ( min-width: 992px)'.'lg': 'only screen and ( min-width: 1200px)',)! default;Copy the code

Then define mixins:

// _mixins.scss
@mixin respond-to($breakpoint) {
  $query: map-get($breakpoints.$breakpoint); // This is an SCSS error warning that most people (including me) have never used @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.'; } // The breakpoint is defined in this way$queryLegitimacy @ media#{if(type-of($query) == 'string', unquote($query), inspect($query))}{ @content; }}Copy the code

Here are some of the SCSS functions that appear

String functions by definition are functions that handle strings. Sass string functions consist of two main functions:

unquote($query) : Deletes quotes from strings; quote($query) : Adds quotes to strings. inspect($queryMaps cannot be converted to pure CSS. Passing a value or argument to a CSS function as a variable will cause an error. Use the inspect ($query) function to produce an output stringCopy the code

To use it, write:

// _component.scss
.element {
  color: # 000;

  @include respond-to(sm) {
    color: # 333;}}Copy the code

The output structure of the final compilation is

.element {
  color: # 000;
}

@media (min-width: 768px) {
  .element {
    color: # 333;}}Copy the code

This way, when the requirements change and the media query value changes, we only need to change the value of $breakPoints instead of searching and replacing. And using @include makes our code easy to maintain.

So if I need to define a mobile Retina screen with a double background, what do I do? Create a new breakpoint and use it.

$breakpoints: (...'xs-retina'  : ( max-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
);Copy the code

If the page is complex and requires a lot of breakpoints, you can have a combination explosion that will result in a lot of $Brekpoints subitems, which in addition to slowing sASS compilation, will be more difficult to maintain.

Sass media queries should look like this

  • Dynamic, definable, breakpoints can be added at will

  • Simple, natural syntax, you can use <=,>=, >,< symbol (←_←) such as @include media(“>minWidth”)

  • You can combine breakpoints and define them temporarily. You can combine multiple breakpoints or customize them temporarily, such as @include Media (“>tablet”, “<1280px”).

If you’re interested, try @include-Media, an open source work by Eduardo Boucas and Hugo Giraudel

The original address: www.v5ant.com/details/PYQ…

👏 Other students are welcome to share responsive solutions in your projects.