?? ?? ? ????? iPhone? ???? ?? ??? ???????. ??? ?? "??"???? ?? ???? ??? ?? ??? ? ??? ??? ??? ???? ?? CSS? ?????????. Marvelapp/Devices.css?? ??? ???? ?????. ?????? ??? CSS?? ??? ??? ????? ??? ???? ????????. ?? ? ??? ???? ????? (?, ?? ? ? ?????). ?? ??? ? ?? ??? ????? ?? ???? ? ??? ?? ?? ????????. ??? ???? ?? ?????? ???? ??????.

??? ?? ?? ??? ????????. ????? ??? ???? ?? ??? ??? ?? ?????.

?? ?????? SASS? ?????? ??? ?? ??? ?? ??? ???? ??? ?????. ??? ??? ?? ???? ?? ? iPhone X? ???? ? ??? ?? ??? HTML ??? ??????. ??? ??? ?? ???. ????? ??? ????? ??? ?? ??? ???? ????.

??? ?? ?????

??? ??? ? ? ??? ? ?? CSS ??? ????.

1. ??? ?? ??? ?? ???? ??? ?? ? ??? CSS ?? ? calc ()
2. -?? ????, var () ??? ?? ???? CSS ??? ?? ??
3. @Media ??? min-width? ?????

?? ??? ?? ?????.

C alc ()

CSS calc () ??? ???? ??? ??? ??? ??? ??? ? ????. ??? ???? ???? ??? ??? ??? ??? ??? ???? ?????. ?? ??? ??? ??? ??? ??? ?? ?? ??? 2? ???????.

??:

 ?? : 375px;

??:

 ?? : calc (375px / 2);

? ?? ? ??? ? ?? ? ??? ??? ??? ?????. ?? ?????? ?? ?? ??? ?? ??? ??? ???? ?? Calc () ??? ??????.

var (-??? ???)

CSS ??? ??? ?? ???? ?? ???????.

 : ?? {
 -?? ???? : 3;
}

?? ??? ?? VAR () ??? ?? ??? ?? ??? ??? ? ? ????. ?? ??? ??? ??? ? ?? ?? ???? ??? ??? ???? ??? ??? ?? ???? ?? ??? ??? ??? ???? ? ??? ??? ??????.

 ?? : calc (375px / var (-size-divisor));

??? ?? ? ?? ???? ?? ??? ??? 3?? ?? ?? ?????.

@???

??? ??? ????? ?? ??? ??? ?? ?????. ??? ??? ??? ?????? ?????. ? ??? ?? ??? ?? ?? ?? ??? ??? ??? ??? ?????. XS, SM ?? ?? ?? ??? ??? ???? ?? ?? ??????.

?? ??? 0 ???? ?? ?? ??? ??? ????. ?? : ??? ?? ??? ?? ??? ??? ???? ??? ?????. ? ??? ??? ??? ?? ???? ?? ?? ??? ????????.

 @Media (min-width : 576px) {
 : ?? {
  -?? ???? : 2;
 }
}
@Media (min-width : 768px) {
 : ?? {
  -?? ???? : 1.5;
 }
}
@Media (min-width : 992px) {?
 : ?? {
  -?? ???? : 1;
 }
}
@Media (min-width : 1200px) {?
 : ?? {
  -?? ???? : .67;
 }
}

? ??? ?? ???? ??? ?? ?? ??? ??? ?????. calc ()? ???? ??? ???? ?????.

Python?? ????? ??????

??? ??? ???? ??? ?? ??? ?? ?? ?????? ?? ? ??? ??? ??????. ?? ??? ?? ???? ???? ? ?? ?? ?? calc () ??? ?? ? ?? ?????? ???? ?? ??? ??? ????.

??? ??? ???? ?? ?? ?? ??? ???? ???? ??? ????? ??????.

 DEF ??? (??) :
 ?? ? ?? [-2 :] == '; \ n':
  return 'calc ('?? [: -2] / var (-size-divisor)); \ n '
 Elif Token [-3 :] == '); \ n':
  return '('?? [: -3] ' / var (-size-divisor)); \ n'
 return 'calc ('Token ' / var (-size-divisor))' '

NNPX? ???? ???? ????? ??? calc (nnpx / var (-size-divisor))? ?????. ?? ??? ?? ???? 3 ?? ?? ? ???? : NNPX, NNPX; ? nnpx);. ???? ?? ??? ?????. ??? ??? ??? ?? ? ?? ?? ???? ???? ???????.

 def build_file (SCSS) :
 out = ': root {\ n \ t- ?? ???? : 3; \ n} \ n \ n'
 SCSS ??? ?? :
  ?? = line.split ( '')
  IN RANGE (LEN (TOKENS))? ?? :
   ???? 'px'? ?? [i] :
    ?? [i] = ??? (?? [i])
  out = ''.join (??)
 out = "@media (min-width : 576px) {\ n \
  : root {\ n \ t- ?? ???? : 2; \ n \
  } \ n} \ n \ n@media (min-width : 768px) {\ n \
  : root {\ n \ t- ?? ???? : 1.5; \ n \
  } \ n} \ n \ n@media (min-width : 992px) {\
  \ n : root {\ n \ t- ?? ???? : 1; \ n \
  } \ n} \ n \ n@media (min-width : 1200px) {\
  \ n : root {\ n \ t- ?? ???? : .67; \ n} \ n} "
 ?? ????

? ?????? ????? ??? CSS ??? ???? ?????. ?? ?? ?? ??? ???? ?? ??? ?????? ?? ?????. PX? ???? ?? ?? ??? ?? ??? ?????. ??? ???? ?? ??? ??? ?? ???? ?? ? ??? ?????. ????? ??? ??? ??? ???? ?? ?????? ???? ?????. ??? ???? ???? ?? ?? ??? ??? ??? ?????.

 __name__ == '__main__':
 f = open ( 'device_old.scss', 'r')
 scss = f.readlines ()
 f.close ()
 out = build_file (scss)
 f = open ( 'device_new.scss', 'w')
 F.Write (out)
 f.close ()

? ????? Sass? ??? ?????? ????. ?? ??? ?? CSS ??? ???? ??????.

 SASS DEVICES_NEW.SCSS DEVICES.CSS

? ??? ?????? ??? ??? ????? ??? ????! ??? :

?? ?? ?? ?? ?? ??? ???? GitHub?? ??????.

?? ???

? ??? ??? ?? ???? ???, ???? ?? ?? ??? ???????. ? ? ??? ????? ?????? ??? ??? ????? ? ?? ? ?? ?????.

?

??? ??? ?? ?? ? ??? Zoom? ???? ??? ???? ????. ??? ??? ???? ???? ???? ????? ??? ??? ?? ?? ? ??? ??? calc () ? ???? ?????.

??? ??? ??? ???? ????. ?? ??? ?????. ?? ?? ???? Firefox??? ???? ????.

PX? EM?? ?????

? ?? Find-and-replace ?? ??? PX? ?? ????? EM?? ???? ?? ?????. ?? ?? ??? ?? ??? ?? ???? ?????. ??? ??? ?????? ?? ? ??? ???? Chrome? ?? ?? ?? ?????? ?? ?? ??? ??? ? ????. ? ??? ???? ?? ??? ????? ?? ??? ???? ??? ?? ??? ??? ??? ? ????.

?? ?? ?? 100 ?? ?? ? ?? ?? ?? ??? ???? ??? ? ????. ???? ??? ?? ???? ???? ???? ?? ??? ??????? ??? ??? ?? ???? ?? ? ????? ?????.

??()

scale () ??? ?? ??? ??? ??? ? ????. ??? ? ????, ?? ???? ?? ??? ??? ? ????. ????? ??? ??? ?? ????? CSS ??? ?? ??? ????? ????. ?? ??? "??"?? ??? ? ??? UI ??? ?? ? ? ? ?? ??? ?????.

Chris Coyier?? ???? ???? ??? ??????.

?????

?? ?? calc () ?? ?? ?????? ???? ??? ?? ??? ??? ?? ?? ??? ????? ?? ?????? ?? ? ??? ???? ??????. ?? ? ??? ??? ???? ??? ??????. ?? ?????? ?????? Python ????? ??? ?? ??? ?? ? ?????? ? ???? ?? ? ? ??????.

? ??? ?? ?? ??? ?? ? ??? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!