Skip to content

Instantly share code, notes, and snippets.

@Yang03
Created June 28, 2017 08:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Yang03/efd24dd53d091a081dc53f987c2ac0ed to your computer and use it in GitHub Desktop.
Save Yang03/efd24dd53d091a081dc53f987c2ac0ed to your computer and use it in GitHub Desktop.
$BASE_FONT_SIZE = 15px
$MIN_WIDTH = 320px
$MAX_WIDTH = 540px
px2rem($px)
($px / $BASE_FONT_SIZE)rem
html
// 在元素的before伪类上写上当前真实的font-size的大小,以便JS获取
// 原因:JS在获取CSS字体大小时候某些内核会直接将字体转为整数
setAccurateFontSize($font-size)
&:before
content 'Accurate font size:' + $font-size
display none
font-size $BASE_FONT_SIZE
setAccurateFontSize($BASE_FONT_SIZE)
$break-point-size = ()
$break-point-step = 20
$step-num = floor(unit(($MAX_WIDTH - $MIN_WIDTH) / $break-point-step, ''))
if $step-num > 1
for i in (1 ... $step-num + 1)
$width = $MIN_WIDTH + (i * $break-point-step)
$font-size = ($width / $MIN_WIDTH) * $BASE_FONT_SIZE
@media screen and (min-width: $width)
font-size $font-size
setAccurateFontSize($font-size)
else
$min-width = $break-point-size['min-width']
$font-size = $break-point-size['font-size']
@media screen and (min-width: $min-width)
font-size $font-size
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment