Advertisement
Guest User

Untitled

a guest
Jun 28th, 2017
102
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.98 KB | None | 0 0
  1. $BASE_FONT_SIZE = 15px
  2. $MIN_WIDTH = 320px
  3. $MAX_WIDTH = 540px
  4.  
  5. px2rem($px)
  6. ($px / $BASE_FONT_SIZE)rem
  7.  
  8.  
  9. html
  10. // 在元素的before伪类上写上当前真实的font-size的大小,以便JS获取
  11. // 原因:JS在获取CSS字体大小时候某些内核会直接将字体转为整数
  12. setAccurateFontSize($font-size)
  13. &:before
  14. content 'Accurate font size:' + $font-size
  15. display none
  16.  
  17. font-size $BASE_FONT_SIZE
  18. setAccurateFontSize($BASE_FONT_SIZE)
  19. $break-point-size = ()
  20. $break-point-step = 20
  21. $step-num = floor(unit(($MAX_WIDTH - $MIN_WIDTH) / $break-point-step, ''))
  22. if $step-num > 1
  23. for i in (1 ... $step-num + 1)
  24. $width = $MIN_WIDTH + (i * $break-point-step)
  25. $font-size = ($width / $MIN_WIDTH) * $BASE_FONT_SIZE
  26. @media screen and (min-width: $width)
  27. font-size $font-size
  28. setAccurateFontSize($font-size)
  29.  
  30. else
  31. $min-width = $break-point-size['min-width']
  32. $font-size = $break-point-size['font-size']
  33. @media screen and (min-width: $min-width)
  34. font-size $font-size
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement